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

Agent Installation

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

With NPM

Installation

  1. Install atatus-js from the npm registry:

    copy
    icon/buttons/copy
    npm install --save atatus-js
    

    Import and initialize atatus to monitor your application:

    copy
    icon/buttons/copy
    import * as atatus from 'atatus-js';
    atatus.config('YOUR_API_KEY').install();
    

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

  2. Add atatus to the React error handler

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

Test Integration

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

copy
icon/buttons/copy
atatus.notify(new Error('Test Atatus Setup'));

An error will appear in your project dashboard.

With YARN

Installation

  1. Install atatus-js from the npm registry:

    copy
    icon/buttons/copy
    yarn add atatus-js
    

    Import and initialize atatus to monitor your application

    copy
    icon/buttons/copy
    import * as atatus from 'atatus-js';
    atatus.config('YOUR_API_KEY').install();
    

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

  2. Add atatus to the React error handler

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

Test Integration

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

copy
icon/buttons/copy
atatus.notify(new Error('Test Atatus Setup'));

An error will appear in your project dashboard.

With CDN

Installation

  1. 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
    icon/buttons/copy
    <script src="//dmc1acwvwny3.cloudfront.net/atatus.js"></script>
    <script type="text/javascript">atatus.config('YOUR_API_KEY').install();</script>
    

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

  2. Add atatus to the React error handler

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

Test Integration

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

copy
icon/buttons/copy
atatus.notify(new Error('Test Atatus Setup'));

An error will appear in your project dashboard.