React/Redux Integration - Real User Monitoring

React is the JavaScript library for building user interfaces. Atatus provides an error tracking and performance monitoring service for React/Redux apps.

Agent Installation

For NPM and YARN

If you want to include Atatus script with your source, you can add it through package managers such as YARN and NPM.

Install atatus-spa from the npm or yarn registry:

copy

npm install --save atatus-spa
Or
yarn add atatus-spa

Import and initialize atatus to monitor your application:

copy

import * as atatus from 'atatus-spa';
atatus.config('YOUR_API_KEY').install();

For CDN

Copy & paste this code into the <head> tag of your html (every page) to start using Atatus on your site. Please make sure that you add it before other script tags as well.

copy

<script src="//dmc1acwvwny3.cloudfront.net/atatus-spa.js"></script>
<script type="text/javascript">atatus.config('YOUR_API_KEY').install();</script>

Replace the YOUR_API_KEY string with the API Key that is assigned for your project. You're done.

For more advanced options on installing your monitoring code, view customizing agent.

Test Integration

To verify that your integration is working, call notify() in your application:

copy

atatus.notify(new Error('Test Atatus Setup'));

Within few seconds, performance metrics and errors will appear in your project dashboard.

Add atatus to the React error handler

copy

var reportError = function(error) {
  if (window.atatus) {
    window.atatus.notify(error);
  }
};
var Component = React.createClass({
    render() {
        try {
            // ..
        } catch (ex) {
            reportError(ex);
        }
    }
});