Skip to content

Commit 4fab254

Browse files
feat: Update CodePush guide for Debug IDs
1 parent e2ff53f commit 4fab254

File tree

3 files changed

+96
-103
lines changed

3 files changed

+96
-103
lines changed

docs/platforms/react-native/manual-setup/codepush.mdx

Lines changed: 0 additions & 103 deletions
This file was deleted.
Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
title: CodePush
3+
sidebar_order: 100
4+
description: "Upload source maps for CodePush releases."
5+
---
6+
7+
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.
8+
9+
## Prerequisities
10+
11+
- [Sign up for an account](https://sentry.io/signup/)
12+
- [Set up Sentry React Native SDK](/platforms/react-native)
13+
- [Set up Sentry Metro Plugin](/platforms/react-native/manual-setup/metro)
14+
- The plugin ensures that Debug IDs are enabled and used to link source maps to bundles.
15+
16+
## Wrap Your App
17+
18+
Ensure `codePush` is the outer most function because it needs access to the root component in order to swap out the bundle.
19+
20+
```javascript
21+
export default codePush(Sentry.wrap(App));
22+
```
23+
24+
## Create CodePush Release
25+
26+
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.
27+
28+
```bash {tabTitle:JSC}
29+
appcenter codepush release-react \
30+
--app "${APP_NAME}" \
31+
--deployment-name "${DEPLOYMENT_NAME}" \
32+
--output-dir ./build \
33+
--sourcemap-output-dir ./build
34+
```
35+
36+
```bash {tabTitle:Hermes}
37+
rm -rf ./build
38+
CODEPUSH_COMMAND="appcenter codepush release-react \
39+
--app \"${APP_NAME}\" \
40+
--deployment-name \"${DEPLOYMENT_NAME}\" \
41+
--use-hermes \
42+
--output-dir ./build \
43+
--sourcemap-output-dir ./build"
44+
45+
DEBUG_ID=$(eval "$CODEPUSH_COMMAND" | tee /dev/tty | grep -o 'Bundle Debug ID: [0-9a-f-]*' | sed 's/Bundle Debug ID: //')
46+
47+
# Find the .map file and add the debug_id to it
48+
MAP_FILE=$(find ./build -name "*.map" -type f)
49+
jq -c ". + {\"debug_id\": \"${DEBUG_ID}\"}" "${MAP_FILE}" > "${MAP_FILE}.tmp"
50+
mv "${MAP_FILE}.tmp" "${MAP_FILE}"
51+
```
52+
53+
### Notes
54+
55+
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.
56+
57+
## Upload Source Maps
58+
59+
Upload source maps for your CodePush release by setting up your environment variables and running the `react-native appcenter` command.
60+
61+
Before running the upload command, make sure to set up your environment variables.
62+
63+
```bash {tabTitle:Environment Variables}
64+
export SENTRY_ORG=___ORG_SLUG___
65+
export SENTRY_PROJECT=___PROJECT_SLUG___
66+
export SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
67+
```
68+
69+
To upload source maps for your CodePush release, use the `react-native appcenter` command.
70+
71+
```bash {tabTitle:Sentry CLI}
72+
npx sentry-cli sourcemaps upload \
73+
--debug-id-reference \
74+
--strip-prefix /path/to/project/root \
75+
./build
76+
```
77+
78+
## Notes
79+
80+
### Optional Release and Dist
81+
82+
To associate the uploaded artifacts with the CodePush release, use the `--release` and `--dist` options. 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.
83+
84+
### Using `codePush.getUpdateMetadata`
85+
86+
Use `Sentry.setTag` to associate the CodePush Update Label with the captured events.
87+
88+
```javascript
89+
codePush.getUpdateMetadata().then((update) => {
90+
Sentry.setTag('codepush', update.label);
91+
});
92+
```

redirects.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -597,6 +597,10 @@ const userDocsRedirects = [
597597
source: '/api/rate-limits/',
598598
destination: '/api/ratelimits/',
599599
},
600+
{
601+
source: '/platforms/react-native/manual-setup/codepush/',
602+
destination: '/platforms/react-native/sourcemaps/uploading/codepush/',
603+
},
600604
];
601605

602606
/**

0 commit comments

Comments
 (0)