Install Airbrake in 2 easy steps:
Step 1: Add the library
Include via CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/airbrake-js/1.6.2/client.min.js"></script>
We also support installation via npm or Bower.
Step 2: Configure the library with your credentials
To report errors from a React app, you'll need to set up and use an ErrorBoundary
component and initialize an AirbrakeClient
with your projectId
and projectKey
.
(You can find your project ID and API KEY with your project's settings):
import AirbrakeClient from 'airbrake-js';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
this.airbrake = new AirbrakeClient({
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;
}
}
Then you can use it as a regular component:
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
To test that Airbrake has been installed correctly in your JavaScript project, just open up the JavaScript console in your internet browser and paste in:
window.onerror("TestError: This is a test", "path/to/file.js", 123);
Visit our official GitHub repo for more info on alternative configurations and advanced options.