The Raygun4ReactNative provider allows you to automatically monitor user's experience in your application by tracking how they move through the different views within the project as well as the network calls and responses they produce.

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 dependencies as well
npm install react react-native @react-native-async-storage/async-storage

yarn:

yarn add raygun4reactnative
#Peer dependencies 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: 'paste_your_api_key_here',
  enableRealUserMonitoring: true
}

RaygunClient.init(options);

This will enable Raygun Real User Monitoring and immediately start transmitting timing events to your Raygun dashboard. See Advanced Initialisation Options to further customize your RaygunClient.

Using with Expo

Building

In order for Raygun4ReactNative to work with Expo you have to build and run you application using the expo CLI npx expo run:android and or npx expo run:ios. Using npm start or similar will not work as it does not generate the necessary native code that Raygun4ReactNative needs to function. A sign that you may be encountering this issue is if your program is throwing a DEVICE_ID is null exception.

Modifying the AndroidManifest

Expo by default abstracts platform specific information from the user, as a result there is typically no Manifest file to edit. There are two main ways to get around this

1. Using npx expo prebuild. This will create Android and iOS directories with the native code for your project, allowing you to modify the Android Manifest file.
2. Using Config Plugins. These allow you to extend and modify your projects configuration file, including the AndroidManifest.xml file.

Usage

Automatic Real User Monitoring

Once the RaygunClient has been initialized it will record user experience timing events within your project and transmit them to Raygun to be displayed on your Raygun dashboard.

The RaygunClient will detect whenever the user changes view within the app as well as any network calls that they make during their session.

Manual Real User Monitoring

On top of automatic Real User Monitoring, you can send manual timing events within your project. This is accomplished using the RaygunClient.sendRUMTimingEvent(...) function:

import RaygunClient, {RealUserMonitoringTimings} from "raygun4reactnative"

//The user has loaded a new view in the app which took 1000 ms to load
RaygunClient.sendRUMTimingEvent(RealUserMonitoringTimings.ViewLoaded, 'User loaded the FOO screen', 1000);

//The user made a network call from the app which took 500 ms to complete
RaygunClient.sendRUMTimingEvent(RealUserMonitoringTimings.NetworkCall, 'User made request to BAR.com', 500);