---
title: CodePush Setup
description: >-
  Learn how to use a client-side React Native module to interact with Appcenter
  Codepush and Datadog.
breadcrumbs: >-
  Docs > RUM & Session Replay > Application Monitoring > React Native Monitoring
  > React Native Monitoring Setup > CodePush Setup
---

# CodePush Setup

## Overview{% #overview %}

Enable React Native Crash Reporting and Error Tracking to get comprehensive crash reports and error trends with Real User Monitoring.

Each time you release a new [CodePush](https://github.com/microsoft/react-native-code-push) version for your React Native application, you need to upload the source maps to Datadog to unminify errors.

Datadog recommends using `@datadog/mobile-react-native-code-push` in your app and the [datadog-ci](https://github.com/DataDog/datadog-ci) `react-native codepush` command to upload your source maps. This ensures that the `version` is consistent in both reported crashes and uploaded source maps.

If you experience any issues setting up the Datadog SDK with codepush, you can see our [example application](https://github.com/DataDog/dd-sdk-reactnative-examples/tree/main/rum-react-navigation-codepush) as a reference.

## Setup{% #setup %}

See the [React Native Monitoring installation steps](https://docs.datadoghq.com/real_user_monitoring/reactnative/) to install `@datadog/mobile-react-native`.

Then, install `@datadog/mobile-react-native-code-push`.

To install with NPM, run:

```sh
npm install @datadog/mobile-react-native-code-push
```

To install with Yarn, run:

```sh
yarn add @datadog/mobile-react-native-code-push
```

### Initializing with DdSdkReactNative.initialize{% #initializing-with-ddsdkreactnativeinitialize %}

Replace `DdSdkReactNative.initialize` by `DatadogCodepush.initialize` in your code:

```js
import { CoreConfiguration } from 'expo-datadog';

const config = new CoreConfiguration(
    '<CLIENT_TOKEN>',
    '<ENVIRONMENT_NAME>',
    trackingConsent,
    {
        site: 'US1', // Optional: Select your Datadog website ("US1", "US3", "US5", "EU1", or "US1_FED"). Default is "US1".
        rumConfiguration: {
            applicationId: '<APPLICATION_ID>', // RUM Application ID
            trackInteractions: true, // Track user interactions (set to false if using Error Tracking only)
            trackResources: true, // Track XHR resources (set to false if using Error Tracking only)
            trackErrors: true, // Track errors
            sessionSampleRate: 80, // Optional: Sample sessions, for example: 80% of sessions are sent to Datadog. Default is 100%.
            nativeCrashReportEnabled: true // Optional: Enable or disable native crash reports.
        },
        logsConfiguration: {}, // Enable Logs
        traceConfiguration: {} // Enable Traces
    }
)

await DatadogCodepush.initialize(config);
```

### Initializing with DatadogProvider{% #initializing-with-datadogprovider %}

Replace `DatadogProvider` by `DatadogCodepushProvider` in your App component:

```js
import { DatadogCodepushProvider } from '@datadog/mobile-react-native-code-push';

export default function App() {
    return (
        <DatadogCodepushProvider configuration={datadogConfiguration}>
            <Navigation />
        </DatadogCodepushProvider>
    );
}
```

As getting the CodePush version is an asynchronous step that needs to be performed before initializing the Datadog React Native SDK for RUM, there is no difference between `InitializationMode.SYNC` and `InitializationMode.ASYNC` when using `DatadogCodepushProvider`.

## Upload CodePush source maps{% #upload-codepush-source-maps %}

Install [`@datadog/datadog-ci`](https://github.com/DataDog/datadog-ci) as a development dependency to your project.

To install it with NPM:

```sh
npm install @datadog/datadog-ci --save-dev
```

To install it with Yarn:

```sh
yarn add -D @datadog/datadog-ci
```

Create a gitignored `datadog-ci.json` file at the root of your project containing your API key and the Datadog site (if not `datadoghq.com`):

```json
{
    "apiKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "site": "datadoghq.eu"
}
```

You can also export them as `DATADOG_API_KEY` and `DATADOG_SITE` environment variables.

When releasing a new CodePush bundle, specify a directory to output the source maps and bundle:

```sh
appcenter codepush release-react -a MyOrganization/MyApplication -d MyDeployment --sourcemap-output --output-dir ./build
```

Run the `datadog-ci react-native codepush` command by passing the adequate CodePush `app` and `deployment` arguments.

To run it with NPM:

```sh
npm run datadog-ci react-native codepush --platform ios --service com.company.app --bundle ./build/CodePush/main.jsbundle --sourcemap ./build/CodePush/main.jsbundle.map --app MyOrganization/MyApplication --deployment MyDeployment
```

To run it with Yarn:

```sh
yarn datadog-ci react-native codepush --platform ios --service com.company.app --bundle ./build/CodePush/main.jsbundle --sourcemap ./build/CodePush/main.jsbundle.map --app MyOrganization/MyApplication --deployment MyDeployment
```

## Alternatives{% #alternatives %}

These steps ensure that the `version` matches the format `{commercialVersion}-codepush.{codePushLabel}`, such as `1.2.4-codepush.v3`.

You can also do that by specifying a `versionSuffix` in the SDK configuration:

```js
import { CoreConfiguration } from '@datadog/mobile-react-native';

const config = new CoreConfiguration('<CLIENT_TOKEN>', '<ENVIRONMENT_NAME>');

config.versionSuffix = `codepush.${codepushVersion}`; // will result in "1.0.0-codepush.v2"
```

In order to avoid potential version clashes, the `versionSuffix` adds a dash (`-`) before the suffix.

To obtain the `codepushVersion`, you can hardcode it or use [`CodePush.getUpdateMetadata`](https://github.com/microsoft/react-native-code-push/blob/master/docs/api-js.md#codepushgetupdatemetadata).

Then, upload your source maps using the [`datadog-ci react-native upload`](https://github.com/DataDog/datadog-ci/tree/master/packages/datadog-ci/src/commands/react-native#upload) command, and ensure the `--release-version` argument matches the one set in the SDK configuration.

## Sending data when device is offline{% #sending-data-when-device-is-offline %}

RUM ensures availability of data when your user device is offline. In case of low-network areas, or when the device battery is too low, all the RUM events are first stored on the local device in batches.

Each batch follows the intake specification. They are sent as soon as the network is available, and the battery is high enough to ensure the Datadog SDK does not impact the end user's experience. If the network is not available while your application is in the foreground, or if an upload of data fails, the batch is kept until it can be sent successfully.

This means that even if users open your application while offline, no data is lost. To ensure the SDK does not use too much disk space, the data on the disk is automatically discarded if it gets too old.

## Further reading{% #further-reading %}

- [Source code for dd-sdk-reactnative](https://github.com/DataDog/dd-sdk-reactnative)
- [Learn about React Native monitoring](https://docs.datadoghq.com/real_user_monitoring/reactnative/)