Sentry React-Native with CodePush not using source maps - react-native

Question

I can't seem to figure this out. Can someone please help me troubleshoot this? I'm using CodePush to upload my app and I want Sentry to handle my errors since the appcenter diagnostics are not very good.
I have this in a root component of my app...
if (process.env.NODE_ENV === 'production') {
Sentry.config('****',{
deactivateStacktraceMerging: false
}).install();
codePush.getUpdateMetadata().then((update) => {
if (update) {
Sentry.setVersion(update.appVersion + '-codepush:' + update.label);
}
});
}
And I have a deploy package script that will deploy to codepush and also run the sentry commands found in their docs
appcenter codepush release-react -a account/project --output-dir ./build && export SENTRY_PROPERTIES=./ios/sentry.properties && sentry-cli react-native appcenter account/project ios ./build/codePush
Everytime I get an error caught or one that I've captured I lack actual information on what file threw the error and I see the There was 1 error encountered while processing this event at the top which says Source code was not found for app:///main.jsbundle when I expand it.
I feel that this has to be something with sentry not properly connecting to codepush to get my source maps?

Answer 1

Finally got the sourcemap to work for both iOS and Android with AppCenter codepush after some trial and failure (since the Sentry doc is misleading), following these steps in bash script:
MY_APP_NAME="e.g. Sentry account/project"
MY_BUNDLE_ID="e.g. com.company.superapp"
MY_APP_ENV="e.g. development, staging or production"
NATIVE_VERSION="e.g. 1.2.3"
PLATFORM="e.g. ios or android"
# Build and release to appcenter
appcenter codepush release-react \
-a "$MY_APP_NAME" \
-d "$MY_APP_ENV" \
-m -t "$NATIVE_VERSION" \
--sourcemap-output \
--output-dir "./build/$PLATFORM"
export SENTRY_PROPERTIES="./$PLATFORM/sentry.properties"
# Get label and name of latest release
LABEL=$(appcenter codepush deployment history $MY_APP_ENV -a $MY_APP_NAME --output json | jq '.[-1][0]' -r)
RELEASE_NAME="$MY_BUNDLE_ID#$NATIVE_VERSION+codepush:$LABEL"
# Upload sourcemap
sentry-cli react-native appcenter \
"$MY_APP_NAME" "$PLATFORM" "./build/$PLATFORM/CodePush" \
--deployment "$MY_APP_ENV" \
--release-name "$RELEASE_NAME" \
--dist "$LABEL"
And doing this initialization in app.ts (or similar):
Sentry.init({...});
codePush.getUpdateMetadata().then(update => {
if (update) {
if (MY_APP_ENV === 'production')) {
Sentry.setRelease(
`${MY_BUNDLE_ID}#${update.appVersion}+codepush:${update.label}`,
);
} else {
Sentry.setRelease(
`${MY_BUNDLE_ID}.${MY_APP_ENV}#${update.appVersion}+codepush:${update.label}`,
);
}
Sentry.setDist(update.label);
}
});
Environment:
appcenter version: 2.7.3
#sentry/react-native: 2.5.1

Answer 2

You need to call Sentry.init with release and dist options and pass the same values as flags when you upload your sourcemaps via the CLI.
As per the Sentry Docs
If you want to use Sentry together with CodePush you will have to pass release and dist to Sentry.init. Our suggestion is to store them in an app.json, or you can just use the package.json. These values need to be unique to each version of your codebase and match the version on the source maps exactly, or they might not be symbolicated.
For example:
Sentry.init({
dsn: YOUR_DSN,
release: '1.0',
dist: 'v1',
});
And then when you want to upload your source maps:
export SENTRY_PROPERTIES=./ios/sentry.properties
sentry-cli react-native appcenter \
account/project \
ios ./build/codePush \
--release-name "1.0" \
--dist "v1"
Your release and dist can be arbitrary strings, but Sentry recommends the following format:
${BUNDLE_ID}#${APP_VERSION}+codepush:${DIST}

Answer 3

I've had the same issue - everything gets uploaded to Sentry and attached into a Release, but Issues show this warning.
Issue for me was that bundle ID was different in the app and in Sentry Release, syncing this solved the issue.