CodePush

Sentry's React Native SDK works out of the box with CodePush. To see readable stack traces in the product, you must upload source maps to Sentry. This guide explains how to upload source maps for CodePush releases, that are created with the AppCenter CLI.

Prerequisites

• Sign up for an account
• Set up Sentry React Native SDK
• Set up Sentry Metro Plugin
  • The plugin ensures that Debug IDs are enabled and used to link source maps to bundles.

Wrap Your App

Ensure codePush is the outer most function because it needs access to the root component in order to swap out the bundle.

export default codePush(Sentry.wrap(App));

Create CodePush Release

To ensure Sentry can symbolicate events from your CodePush releases, you need to generate and upload the necessary assets. When creating a CodePush release, include the --sourcemap-output-dir flag to generate source maps. This allows you to upload these files to Sentry in the next step.

appcenter codepush release-react \
  --app "${APP_NAME}" \
  --deployment-name "${DEPLOYMENT_NAME}" \
  --output-dir ./build \
  --sourcemap-output-dir ./build

Notes

If you are using Hermes make sure jq is installed on your system. If it's not, you can install it using your system's package manager. For example apt-get install jq on Ubuntu, or brew install jq on macOS with Homebrew.

Upload Source Maps

Upload source maps for your CodePush release by setting up your environment variables and running the react-native appcenter command.

Before running the upload command, make sure to set up your environment variables.

export SENTRY_ORG=example-org
export SENTRY_PROJECT=example-project
export SENTRY_AUTH_TOKEN=sntrys_YOUR_TOKEN_HERE

To upload source maps for your CodePush release, use the react-native appcenter command.

npx sentry-cli sourcemaps upload \
  --debug-id-reference \
  --strip-prefix /path/to/project/root \
  ./build

Notes

Optional Release and Dist

To associate the uploaded artifacts with the CodePush release, use the --release and --dist options, which are parameters of the sentry-cli command. Make sure that events reported by the SDK have the same release and dist values. You can follow the default schema ${BUNDLE}@${VERSION}+${BUILD} for release and ${BUILD} for dist or set the values manually in Sentry.init. This is optional when uploading artifacts with Debug IDs.

Using codePush.getUpdateMetadata

If you rely on codePush.getUpdateMetadata to get the CodePush Update Label, use Sentry.setTag to associate the CodePush Update Label with the captured events. This will enable you to filter events in the Sentry UI based on the label. We discourage using codePush.getUpdateMetadata to initialize the SDK as it delays the initialization and errors before the CodePush Update Label is available won't be reported to Sentry.

codePush.getUpdateMetadata().then((update) => {
  Sentry.setTag("codepush", update.label);
});