
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.