How to setup React-Native + Microsoft CodePush with Sentry Platform
In this article I will show you how to setup correctly your react-native application that uses Microsoft CodePush on Sentry platform, uploading the source maps correctly to observe what’s the correct line that throws the error.
On the react-native code
The first step is to install Sentry SDK on your react-native project, you can achieve this running the above commands.
After install, considering that you already have the Microsoft CodePush configured correctly, you will have to change your index.js source file, this is the modifications that you will have to do.
I will explain what’s included in the release attribute:
BUNDLE_ID: com.yourapp.bundleid > You can find on android > app > build.gradle file.
NATIVE_VERSION: Is the native version on your build.gradle like 5.4.4, you can find this information on android > app > build.gradle file.
CODEPUSH_DIST: This is your codepush info version, you can find this on your app center, in this example is v196.
After this configuration, you have now to upload the source maps of your last codepush release on Sentry, to do this is better, to generate a new codepush version with correct CODEPUSH_DIST on sentry configuration.
To do this you have to export the source maps to a folder and upload to Sentry, I use these commands to export the source maps of codepush:
release-react -a YourOrgOnAppCenter/your-project-on-app-center -d Production — output-dir “./build”
This will generate a build folder with the code push files that the Sentry platform will need to work correctly with your code, the folder will be like this:
So to upload this to Sentry, considering that you already logged on sentry-cli, you will run the above command:
sentry-cli react-native appcenter YourOrgOnAppCenter/your-project-on-app-center android "./build/CodePush" --bundle-id "$BUNDLE_ID" --version-name "$NATIVE_VERSION" --dist "$CODEPUSH_DIST"Note that they are the same variables, used on the configuration on the react native config before, commonly this process of versioning and upload is taken on some CI service like Github Actions.
But at this time, your source maps of your react-native code push application is updated correctly to Sentry, and your errors have to being reported correctly, informing the exactly line that throws the errors, as the above example, I recommend to check this throwing an error on a Staging code-push bundle.
Thank you for the attention! See you on the next article.
