core

React Native Embrace

Embrace gathers the information needed to identify issues and measure performance automatically upon integration. The following React Native guide provides simple instruction on how to call the relevant functions so teams can be provided much needed additional context (logs and user info) and measure the timing of key areas of their app explicitly (spans).

For additional info please refer to the React Native Guide.

Requirements

Only an Embrace App ID and an Embrace API Token.

If you need an App ID and API Token, Go to our dashboard to create an account.

Integration

Add the JavaScript library

    npm install @embrace-io/react-native

Or

    yarn add @embrace-io/react-native

For iOS you will also need to install the pod:

cd ios && pod install --repo-update

Run the setup scripts

The JavaScript Embrace SDK ships with a setup script to modify the files in your project to add the native dependencies. The setup scripts can be found in your node_modules folder at node_modules/@embrace-io/react-native/lib/scripts/setup

node node_modules/@embrace-io/react-native/lib/scripts/setup/installAndroid.js

node node_modules/@embrace-io/react-native/lib/scripts/setup/installIos.js

To run these steps manually refer to this section of our guide

Initialize the Embrace SDK

Initialize method applies the necessary listener to your application. This allow Embrace to track javascript errors, check js bundle changes (if you use OTA), track js patch and react native versions.

import {View} from "react-native";
import React, {useEffect} from "react";
import {initialize} from "@embrace-io/react-native";

const App = () => {
  useEffect(() => {
    // `initialize` is a Promise, so if you want to perform an action and it must be tracked, it is recommended to await for the method to finish
    const handleInit = async () => {
      const hasStarted = await initialize({
        sdkConfig: {
          ios: {
            appId: "abcdf",
          },
        },
      });

      if (hasStarted) {
        // do something
      }
    };

    handleInit();
  }, []);

  // rest of the app
  return <View>...</View>;
};

export default App;

Uploading source maps

The Embrace SDK allows you to view both native and JavaScript stack traces for crashes and error logs. Refer to our guide on uploading symbol files.

Troubleshooting

Please refer to our complete integration guide. If you continue to run into issues please contact us directly or reach out in our Community Slack