1. Home
  2. Language Guides
  3. JavaScript
  4. Real User Monitoring
  5. React

React

Real User Monitoring for React applications with Raygun is available using the Raygun4JS provider.

Raygun4JS is a library you can easily add to your website and web applications which allows you to then monitor frontend performance issues affecting your users.

Once Raygun is installed, it will automatically start monitoring user sessions with Real User Monitoring.

Package Manager
CDN

Install Raygun via NPM.

npm install raygun4js

yarn add raygun4js

bun add raygun4js

Import the Raygun4JS provider into your application inside of App.js (or equivalent for your framework) and activate Real User Monitoring.

import rg4js from 'raygun4js';

rg4js('apiKey', 'paste_your_api_key_here');
rg4js('enableRealUserMonitoring', true);

Add the following snippet to the beginning of the <head> tag within your markup. Please include this snippet before any other <script> tag references are made to ensure that Raygun has the best chance to capture all error events on the page.

<script type="text/javascript">
  !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
  (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
  f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
  h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
  e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>

The above snippet will fetch the Raygun4JS script from our CDN asynchronously so it doesn't block the page load. It will also catch errors that are thrown while the page is loading, and send them when the script is ready.

Alternatively, you can download the production script (minified) or the development script (full source). Note: If you encounter a situation where no events are appearing within Raygun, you may need to hard code the protocol so that the CDN matches your hosting environment. This could look like one of the following:

  • https://cdn.raygun.io/raygun4js/raygun.min.js
  • http://cdn.raygun.io/raygun4js/raygun.min.js

This will be in replacement of //cdn.raygun.io/raygun4js/raygun.min.js.

Add the following lines underneath the previous code in Step 1.

<script type="text/javascript">
  rg4js('apiKey', 'paste_your_api_key_here');
  rg4js('enableRealUserMonitoring', true); // Enables Real User Monitoring
</script>

Below is an example of how you can use React Router alongside the BrowserRouter to automatically track route changes.

// App.js
import { useEffect } from "react";
import {
  Routes,
  Route,
  Link,
  useLocation
} from "react-router-dom";
import rg4js from 'raygun4js';

function App() {

  let location = useLocation();

  useEffect(function() {
    rg4js('trackEvent', { type: 'pageView', path: location.pathname });
  }, [location]);

  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </>
  );
}

function Home() { return <p>Home</p> }
function About() { return <p>About</p> }

export default App;

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from "react-router-dom";
import rg4js from 'raygun4js';
import App from './App';

rg4js('apiKey', process.env.REACT_APP_RAYGUN_API_KEY);
rg4js('enableCrashReporting', true);
rg4js('enableRealUserMonitoring', true);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

More examples can be found here:

The provider is open source and available at the Raygun4js repository.

On this page: