Manual setup guide

The easiest way to get started 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

The latest available version of @bugsnag/react-native is v7.22.6.

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:8.+"
    }
}

Since v7.x of bugsnag-android-gradle-plugin, our major version number matches the version of Android Gradle plugin that it supports. If you are using version 3.4.x - 4.x in your project, use version 5.+ of our plugin.

And at the end of your Module Gradle Settings, usually found at <project_dir>/app/build.gradle:

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 from your BugSnag dashboard.

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 from your BugSnag dashboard.

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.