Honeybadger for React Native

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:

shell

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

The above will download the Honeybadger React Native library and add it as a dependency of your project. 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("Your project API key");
  // ...
}

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

The configure method takes additional configuration options.

Name	Type	Required	Default	Example
apiKey	String	YES	`""`	`"hb-api-key-1234"`
reportErrors	Boolean	NO	true
revision	String	NO	`""`	`"8afb34a"`
projectRoot	String	NO	`""`	`"/path/to/project"`

  Honeybadger.configure(
    "hb-api-key-1234",
    "8afb34a",
    "/path/to/project"
  );

The reportErrors parameter determines if errors are to be sent to Honeybadger. This is set to true by default. In certain environments, say, during development, it could be useful to set reportErrors to false to prevent errors from being posted to your Honeybadger account.

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.

javascript

  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:

javascript

  

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.

javascript

  

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:

javascript

// 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

This package includes a script that will help you generate source maps for your project. To generate source maps for both iOS and Android, run the following from your project root directory.

shell

npx honeybadger-generate-sourcemaps

The operation might take some time, as React Native needs to build production-ready bundles and their respective source map files for both iOS and Android. Upon completion, you will find the sourcemap-ios and sourcemap-android files in your project root directory. You can then upload these files to Honeybadger to view descriptive stack trace symbols in your production builds.

Sample applications

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

Package:
@honeybadger-io/react-native

Version:
6.2.1

Repository:
https://github.com/honeybadger-io/honeybadger-js/tree/master/packages/react-native