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: <Your project ID>,
projectKey: '<Your project API Key>'
});
}
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>
To test that Airbrake has been installed correctly in your project, start up
your JS project locally. Then visit it in your browser (eg:
http://localhost:1080), open the JS console, and paste in the following to
trigger a test error:
window.onerror("TestError: This is a test", "path/to/file.js", 123);
This should send a test error to your Airbrake project.
Full documentation
Visit our official GitHub repo for more info on alternative configurations and advanced options.
Installation
Add the library
Configuration
To report errors from a React app, you'll need to set up and use an
ErrorBoundary
component and initialize aNotifier
with yourprojectId
andprojectKey
.(You can find your project ID and API key in your project's settings)
Then you can use it as a regular component:
To test that Airbrake has been installed correctly in your project, start up your JS project locally. Then visit it in your browser (eg:
http://localhost:1080
), open the JS console, and paste in the following to trigger a test error:This should send a test error to your Airbrake project.
Full documentation
Visit our official GitHub repo for more info on alternative configurations and advanced options.