Installation

The Raygun4ReactNative provider allows you to automatically capture and report on unhandled runtime errors within your project by setting up event listeners for the JavaScript and platform-native (Android/iOS) sides of your project.

The provider also allows for manual error capturing using the RaygunClient.sendError(...) function. This allows you to customize the data being reported on and capture use cases specific to your project.

Installation

Installing and integrating the provider is simple and instantly begins working in the background so that you can get back to developing quickly.

Requirements

"react-native": ^0.60.0

Pull the package into your project

Navigate to your project and install the package and its peer dependencies using npm:

npm:

npm install raygun4reactnative
#Peer depencencies as well
npm install react react-native @react-native-async-storage/async-storage 

yarn:

yarn add raygun4reactnative
#Peer depencencies as well
yarn add react react-native @react-native-async-storage/async-storage

Additional step for iOS

Since our SDK supports native crashes, we need to link the SDK to your native projects.

Modify Podfile

platform :ios, '10.0'

then run

cd ios && pod install
# OR
npx pod-install ios

Additional step for Android

Modify the app's android/app/src/main/AndroidManifest.xml to include the following line to enable the background Crash Reporting Service & Real-time User monitoring

<application ...>
    ...
    <service
            android:name="com.raygun.raygun4android.services.CrashReportingPostService"
            android:exported="false"
            android:permission="android.permission.BIND_JOB_SERVICE"
            android:process=":crashreportingpostservice"
    />
    <service
            android:name="com.raygun.raygun4android.services.RUMPostService"
            android:exported="false"
            android:permission="android.permission.BIND_JOB_SERVICE"
            android:process=":rumpostservice"
    />
    ...
</application>

Integrate the package with your project

From here you can import the package into your project and initialize the RaygunClient using the API key displayed when you created your Raygun application (or can be viewed in the application settings).

import RaygunClient from 'raygun4reactnative';
 
const options: RaygunClientOptions = {
  apiKey: '_YOUR_API_KEY_',
  enableCrashReporting: true
}

RaygunClient.init(options);

This will enable Raygun Crash Reporting and immediately start transmitting errors to your Raygun dashboard. See Advanced Initialisation Options to further customize your RaygunClient.

Usage

Automatic Crash Reporting

Once the RaygunClient has been initialized it will capture unhandled runtime errors within your project and transmit them to Raygun to be displayed on your Raygun dashboard.

The captured errors include JavaScript errors and promise rejections as well as native errors occurring on the Android/iOS platform side of your app (see Advanced Initialisation Options to disable native side error capturing).

Manual Crash Reporting

On top of automatic Crash Reporting, you can implement manual error sending within your project to capture custom errors or unhandled exceptions. This is accomplished using the RaygunClient.sendError(...) function:

import RaygunClient, {CustomData} from "raygun4reactnative"

const error = new Error("Custom Message"); // This error can be any Error

RaygunClient.sendError(error);

You can also append Tags and Custom Data to manual crash reports (See Customize Manual Crash Reports).

Start Capturing Errors!

Now that you've initialized your RaygunClient within your project you can see that it is working by creating some errors:

const App = () => {
  throw new Error("FOOBAR");
}

Then those errors will be packaged as crash reports and displayed on your Application dashboard in the Crash Reporting section: