React Native

The LogRocket SDK for React Native allows you to capture session replays, network requests and logs from your React Native applications.

Quick Start

Register with LogRocket

Go to https://logrocket.com/signup to create a free trial account. If you already have a LogRocket account, you can use your existing account. All LogRocket accounts include 1,000 free mobile sessions.

Adding the SDK

Our React Native package is available on NPM. New releases of the LogRocket Native SDKs are catalogued on our Mobile SDK Changelog (the current release is 0.23.2).

npm install --save @logrocket/react-native

Preparing Android

In order for our Android Native SDK to be added to the application a small change must be made to the android/app/build.gradle file: find the repositories block and add our maven repository:

repositories {
    // Add this declaration to any existion repositories block. Do not remove any existing entries in the block.
    maven { url "https://storage.googleapis.com/logrocket-maven/" }
}

Preparing iOS

Our iOS Native SDK is provided through CocoaPods and must be added to the iOS project via pod install, or using the pod-install helper:

npx pod-install

Initializing the SDK

Initializing the SDK is as simple as importing the package and running the initialization method. A good place to initialize the SDK is in a useEffect hook in your top-level Application component.

Replace <APP_SLUG> with your LogRocket application slug, located in our dashboard's quick start guides.

import React, { useEffect } from 'react';
import LogRocket from '@logrocket/react-native';

const App = () => {
  useEffect(() => {
    LogRocket.init('<APP_SLUG>');
  }, []);
  // Your application entry
};

Identifying Users

User Identification uses the same interface as our Web SDK. More information can be found in the reference documentation.

Visual Capture & Replay

The React Native SDK is a light-weight interface into our native Android and iOS SDKs. For more information on Visual Capture & Replay please see the documentation for those platforms:

Privacy

React Native elements can be redacted by assigning an appropriate testID attribute. A list of values that should be redacted can be provided when initializing the SDK.

Accessing the Session URL

Integration with third party services can be accomplished by retrieving the Session URL and adding it as context to the third party library. In the React Native SDK, the session URL can be accessed with the LogRocket.getSessionURL method. Session URLs are only made available when our backend has accepted the session, which can take 1-5 seconds from when the SDK is initialized.

LogRocket.getSessionURL(url => {
  // Use the accepted Session URL.
});

Network Requests

Network requests sent through the fetch API in React Native are automatically captured.

Redacting Sensitive Information

The SDK accepts a requestSanitizer and responseSanitizer at initialization. More information on network sanitization can be found in our Web SDK reference.

Application Logs

Our SDK automatically captures logs from the console.* APIs.

Configuration Options

The following options are available for configuration, and should be provided as the second argument to LogRocket.init.

enableIPCapture

Set to false to disable capture of user IP Addresses.

network

A collection of configuration options specific to network capture. See more details in our Web SDK Reference.

console

A collection of configuration options specific to console capture. See more details in our Web SDK Reference.

redactionTags

An array of string values for redacting elements. If an elements testID matches any value in this list it, and its descendants, will not be captured for replay.