React

Crash Reporting and 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 JavaScript errors and frontend performance issues affecting your users.

Once Raygun is installed, it will automatically start monitoring your application for errors with Crash Reporting and complete user sessions with Real User Monitoring.


Add the following snippet into the <head> of your document above every other script file.

<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>
What is this snippet?

The snippet fetches the Raygun4JS script from our CDN asynchronously so it doesn't block the page load. It also catches errors that are thrown while the page is loading and only sends them when the provider has loaded.


Add the following lines which enabled both Crash Reporting and Real User Monitoring products underneath the snippet you included in Step 1:

<script type="text/javascript">
  rg4js('apiKey', 'paste_your_api_key_here');
  rg4js('enableCrashReporting', true);
  rg4js('enablePulse', true);
</script>

To track route changes for Single Page Applications, you can use the trackEvent option making sure that you pass the updated path as you would like it to appear in Raygun.

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

note: More information about the trackEvent option can be found here.

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

// App.js
import { withRouter } from 'react-router'

class App extends Component {
  constructor(props) {
    super(props);

    // The listener
    this.props.history.listen((location, action) => {
      rg4js('trackEvent', { type: 'pageView', path: location.pathname });
    });

  }

  render() {
    return (
      <div>
        <Route exact path="/" Component={...} />
        <Route exact path="/Home" Component={...} />
      </div>
    );
  }
}

export default withRouter(App);

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Read our blog post about integrating Raygun4JS with React for more examples.


You can setup user tracking to have a better idea of who is using your web application. To do so call the setUser method after your authentication step succeeds.

rg4js('setUser', {
  identifier: 'users_email_address_or_unique_id',
  isAnonymous: false,
  email: 'users_email_address@domain.com',
  firstName: 'Firstname',
  fullName: 'Firstname Lastname'
});

note: Note: The identifier field is the only mandatory field and is used to uniquely identify the user within Raygun.


While Real User Monitoring automatically tracks an extensive set of performance timings related to page and asset loading, you can also attach your own custom timing events.

For this example, we will use a common one - How long it takes for your Application to render on the initial page load.

While React provides excellent performance tracking tools, these only work using the development build of React. Unfortunately, this means that you can't plug these tools in on production to find out how long it takes for your React components to render.

However, using the performance.now() API you can get a good approximation of the time it took for your app to fully render. This can be achieved by taking the difference between the time that a component was constructed and the time that the componentDidMount event fires (after the components render method has finished, which means all of its children have finished rendering as well).

While this isn't as precise as the React instrumentation and could be affected by some other factors than just rendering it should be close to the true time. Once you have the duration that the render took you can use the Raygun4JS custom timings message to send the timing to Raygun.

You can wrap a component with the below function to have its rendering time (and that of its children) reported to Raygun.

import React from 'react';

// This has not been tested with a browser that doesn't support the window.performance api
export default function LogRenderingTime(Component) {
  let boot = 0;

  class LogRenderTime extends React.Component {
    constructor(props) {
      super(props);

      boot = window.performance ? performance.now() : 0;
    }

    componentDidMount() {
      const renderTime = window.performance ? performance.now() - boot : 0;

      rg4js('trackEvent', {
        type: 'customTiming',
        name: 'render',
        duration: renderTime
      });
    }

    render() {
      return <Component {...this.props} />;
    }
  }

  return LogRenderTime;
}

Congratulations, you have successfully implemented Raygun into your application!

tip: We recommend raising a test exception from your application right now to view your dashboard and test that everything is wired up correctly. If your setup is not working get in touch.

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