React Native

Installing Airbrake in a React Native application

Key Features

  • Easy and flexible installation options including npm and Yarn
  • Send uncaught errors to Airbrake or manually using a try/catch
  • Add custom parameters to your errors for more context
  • Private source map support
  • Control which errors you send with customizable filtering options

Installation & Configuration

Installation

Using npm

npm install @airbrake/browser

Using Yarn

yarn add @airbrake/browser

Configuration

To report errors from a React Native 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 Boundaries to learn how they function in React/React Native.

Read Error Handling in React 16 for more details.

Throwing a Test Error

Throwing an exception in a particular component in your app, like the example below, is a quick way to check the notifier is working as expected.

const MyComponent = (props) => {

  // IMPORTANT: remember to remove before building for production!
  throw new Error("TestError: This is a test");
  ...
}

Troubleshoot

Installation and configuration is just the beginning. The airbrake-js notifier supports many other advanced uses and options including:

Please visit the airbrake-js GitHub repo for more usage and configuration examples.