React Error Monitoring

Use Airbrake React

To report errors from a React app, you'll need to set up and use an ErrorBoundary component and initialize a Notifier with your projectId and projectKey.

import React, { Component } from 'react';
import { Notifier } from '@airbrake/browser';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
    this.airbrake = new Notifier({
      projectId: 1,
      projectKey: 'FIXME'
    });
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // Send error to Airbrake
    this.airbrake.notify({
      error: error,
      params: {info: info}
    });
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

Then you can use it as a regular component:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Read Error Handling in React 16 for more details.

Frictionless error monitoring for React

Your applications are up and running, but your customers still see problems. It's not enough to monitor your servers and your apps. You need to monitor your user experience. That's where Airbrake comes in. Airbrake React monitors your application, notifying you when a new error occurs.

Airbrake React error monitoring is done in real-time and provides detailed stack traces, context, browser breakdowns, and more, giving you all of the information necessary for assessing the scope and determining the root of the problem. Delivered to the communication tool of your choice (email, Slack, JIRA, etc.), Airbrake React is accessible via your phone on a mobile-optimized web app. Plus, it installs in minutes, allowing you to drill down and to understand what's breaking your application.

Key features of Airbrake React include:

• Comprehensive read and write API
• Deploy tracking - see the impact of deploys on your error volumes and types
• Backtrace, parameters, and other contextual info for digging deeper
• Intelligently grouped errors - track trends over time or across your whole project
• Aggregations - identify affected users, URLs, browsers, and more

In addition, customized filtering options let you cut through the noise so that you can focus on fixing the errors that matter most. Errors make your customers angry. Delight them instead with Airbrake React.