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

Part of running an application is ensuring your customers don’t see problems and errors. Just like when you're monitoring your servers and apps, you need tools to monitor the user experience. That's where Airbrake React Error Monitoring 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. 

Airbrake integrates with the communication tool of your choice (email, Slack, JIRA, etc.) and installs in minutes, allowing you to drill down and to understand what's breaking your application.

With Airbrake React Error Monitoring, you’ll have access to:

Tools that show which lines of code are broken, without having to go through logs 

• Airbrake React will notify you when an error has occurred within your application. 
• Instead of going through logs to find an error, Airbrake will tell you where an error occurred, right down to the exact line of broken code. 
• Keep track of error-prone files with the Airbrake Hotspots feature. 

Deploy tracking 

• Discover patterns between deploys and errors via the “Deploy” tab. 
• Know exactly which deploys introduced errors and deploys that fixed errors. 
• Track deploys within specific timeframes from 1-hour to 90 days (depending on your plan). 
• Obtain minute details about each deployment including who pushed it, when, and its occurrence rate. 

Robust security that protects your data

• Airbrake offers data encryption both in transit and at rest. 
• Airbrake is SOC II Type 2, EU-USPrivacy Shield Framework, and GDPR certified. 
• Our application supports TLS Protocol v. 1.2 and v. 1.3.

Detailed aggregations and grouping options

• Every error comes with a set of preconfigured aggregations including error messages, server hostnames, remote addresses and countries, browsers, functions, URLs, etc. 
• Paid plans also come with the option to create custom aggregations. 
• Group errors by parameters such as error type, file, environment, and more. 

Tools to communicate with your team about errors

• Collaborate with your team by leaving comments within the Airbrake application itself. 
• Be notified when a team member writes a comment. 
• Integrate with popular applications like Slack, GitHub, Trello, etc. 
• Control what type of error notifications you receive from your Airbrake account. 

Errors make your customers angry. Delight them instead with Airbrake React Error Monitoring. Airbrake plans are affordable and with On-Demand Errors, you’ll never have to worry about missing another error again. Try Airbrake with a free 30-day trial.