Manual setup guide

The easiest way to get start with Bugsnag on a React Native project is to use our CLI, as detailed in the installation and configuration guide. If your project structure deviates from a normal setup, or you just want to make the modifications to your project manually, you can follow this guide.

Installation

Add the Bugsnag package to your dependencies in package.json:

npm install --save @bugsnag/react-native
# or
yarn add @bugsnag/react-native

To ensure errors that occur before React Native initializes are captured, Bugsnag is started and configured in the native Android and iOS projects:

Android

Add Bugsnag to your project by adding the following dependency to your Project Gradle Settings, <project_dir>/build.gradle:

buildscript {
    dependencies {
        // ...
        classpath "com.bugsnag:bugsnag-android-gradle-plugin:5.+"
    }
}

And add the following dependencies and configuration to your Module Gradle Settings, usually found at <project_dir>/app/build.gradle:

apply from: "../../node_modules/react-native/react.gradle"

// The following line must be inserted AFTER the React gradle plugin
apply plugin: "com.bugsnag.android.gradle"

iOS

The Bugsnag dependency will be added via Cocoapods. Open the ios/ subdirectory of the project and run pod install:

cd ios/ && pod install

Basic configuration

The Bugsnag React Native package uses the native Bugsnag Cocoa and Android libraries to send both native and JavaScript errors to your dashboard. To setup your app, add the following code to your Android project, Xcode project and your JavaScript code:

Android

Configure your API key in the <application> tag of your App Manifest file (usually in src/main/AndroidManifest.xml):

<application ...>
  <meta-data android:name="com.bugsnag.android.API_KEY"
             android:value="your-api-key-here"/>
</application>

You can find your API key in Project Settings.

Initialize Bugsnag in the onCreate callback of your Application subclass (usually in MainApplication.java):

import com.bugsnag.android.Bugsnag;

public class MainApplication extends Application implements ReactApplication {
    @Override
    public void onCreate() {
        super.onCreate();
        Bugsnag.start(this);
        // ...
    }
}
import com.bugsnag.android.Bugsnag

class MainApplication : Application(), ReactApplication {
    override fun onCreate() {
        super.onCreate()
        Bugsnag.start(this)
        // ...
    }
}

iOS

Configure your API key by adding a bugsnag Dictionary to your Info.plist file:

Set the apiKey in your Info.plist

Or in XML:

<key>bugsnag</key>
<dict>
    <key>apiKey</key>
    <string>YOUR-API-KEY</string>
</dict>

You can find your API key in Project Settings.

App Delegate

If your app implements an app delegate, import the Bugsnag module and initialize Bugsnag in the application:didFinishLaunchingWithOptions: method:

#import <Bugsnag/Bugsnag.h>

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
        didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [Bugsnag start];
    return YES;
}
import Bugsnag

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication,
            didFinishLaunchingWithOptions launchOptions: 
            [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        Bugsnag.start()
        return true
    }
}

JavaScript

In index.js, import and start the Bugsnag JavaScript client:

import Bugsnag from '@bugsnag/react-native'

Bugsnag.start()

If you’re using App Center CodePush you should set the codeBundleId configuration option.

Next steps

Head back to the integration guide and pick up where you left off.