Honeybadger for React Native

Note

This documentation is for version 6 or later. If you are using an earlier version, please see the v5 documentation.

Hi there! You’ve found Honeybadger’s guide to React Native exception and error tracking. Once installed, Honeybadger will automatically report errors from your React Native application.

Installation

From the root directory of your React Native project, add @honeybadger-io/react-native as a dependency:

npm install "@honeybadger-io/react-native"
cd ios && pod install

The iOS step is required to properly add the library to the Xcode project through CocoaPods. Android doesn’t require a separate step.

Add the following to your App.js file to initialize the Honeybadger library.

import Honeybadger from "@honeybadger-io/react-native";

export default function App() {
  Honeybadger.configure({
    apiKey: "[ YOUR API KEY HERE ]",
  });
  // ...
}

You can log into your Honeybadger account to obtain your API key.

See the Configuration Reference for a full list of config options.

Note

Errors that happen in development and test environments are not reported by default. To always report errors or to change the defaults, see Environments and Versions.

Reporting errors

Uncaught iOS, Android, and JavaScript errors will be automatically reported to Honeybadger by default.

You may also manually report errors by directly invoking the honeybadger.js API.

Honeybadger.notify(error);

See the full documentation for more options.

Identifying users

Honeybadger can track which users have encountered each error. To identify the current user in error reports, add a user identifier and/or email address with Honeybadger.setContext:

Honeybadger.setContext({
  user_id: 123,
  user_email: "user@example.com",
});

Sending additional context

Sometimes additional application state may be helpful for diagnosing errors. You can arbitrarily specify additional key/value pairs when you invoke setContext.

Honeybadger.setContext({
  active_organization: 55,
  custom_configuration: false,
});

Clearing context

If your user logs out or if your context changes during the React component lifetime, you can set new values as appropriate by invoking setContext again.

Additionally, if needed, you can clear the context by invoking clear:

// Set the context to {}
Honeybadger.clear();

Advanced usage

@honeybadger-io/react-native is built on honeybadger.js.

See the Honeybadger JavaScript integration documentation for additional customization options.

Source map support

To generate and upload source maps to Honeybadger, use the following command:

npx honeybadger-upload-sourcemaps --apiKey <your project API key> --revision <build revision>

The --apiKey param is your Honeybadger API key for the project. The --revision param should match the revision param of the Honeybadger.init call inside your application. This is done so that reported errors are correctly matched up against the generated source maps.

As of version 0.70, React Native uses Hermes as the default JavaScript engine. The source maps tool assumes that your project uses Hermes. If you are building against an earlier version of React Native, or are explicitly not using Hermes, add the --no-hermes flag to the source maps tool, like so:

npx honeybadger-upload-sourcemaps --no-hermes --apiKey <your project API key> --revision <build revision>

If your React Native project uses Expo, include the --expo param.

npx honeybadger-upload-sourcemaps --apiKey <your project API key> --revision <build revision> --expo

If you just want to generate the source maps without uploading them to Honeybadger, you can use the --skip-upload flag.

npx honeybadger-upload-sourcemaps --skip-upload --apiKey <your project API key> --revision <build revision>

Sample applications

The examples folder contains two minimal React Native projects, demonstrating the use of the Honeybadger library. See the README for details.