1. Home
  2. Language Guides
  3. React Native
  4. Real User Monitoring
  5. Installation

Installation

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.

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

"react-native": ^0.60.0

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

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

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>

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_',
  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.

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.

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);

Now that you've initialized your RaygunClient within your project you can see that it is working by simply starting your app and using it.

As you interact with and traverse your app you will see Real User Monitoring timing events being displayed on your application dashboard in the Real User Monitoring section

This provider is open source and available at the Raygun4ReactNative repository.

On this page: