reactshadow

React Error Monitoring

Improve Your User Experience with Airbrake 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.

KEY FEATURES: 

Blazing fast, real-time errors alerts

Lightweight notifier installs quickly and won't impact your app performance

Receive error notifications via email, Slack, or webhooks

Fast error search and filtering within your Airbrake dashboard

Advanced data security including SOC-2 Compliance and SAML Single Sign-On - included with all Airbrake plans

Integrates with GitHub, Trello, Slack, JIRA, Pivotal Tracker, GitHub Enterprise, GitLab, GitLab CE/EE, Bitbucket, Lighthouse, Flowdock, Campfire, Assembla, custom webhooks and other 3rd party apps

Dupe error detection

Customizable error filtering

Unlimited users and projects

Comprehensive read & write API

Deploy tracking to monitor code quality

Performance insight about your total app health including your code, production environment, and the user experience.