React-native exception monitoring platform sentry access guide

foreword

Introduction to sentry

Sentry is an exception monitoring platform out of the country that supports most languages and frameworks on the market.

For react-native:

• Can automatically capture including native errors and js errors.
• The reported information includes model, system version number, app version number, console.log information, error stack information, abnormal source code location, commit record, etc.
• Features include error message kanban, monitoring and warning, performance monitoring, etc.

advantage:

• free
• Rich reporting information

shortcoming:

• need scientific internet
• No Chinese version yet

Access steps

Create project

Log in

Register and log in to your sentry account.

Create an organization

Click and enter the organization name and confirm. I created an organization called test.

Create project

Select react-native, you can modify the project name and organization, I will not change it here, click Create Project.

Configure sentry

Install

 npm install --save @sentry/react-native
# or
yarn add @sentry/react-native

Modify native configuration

 npx @sentry/wizard -i reactNative -p ios android
# or
yarn sentry-wizard -i reactNative -p ios android

# 上面命令完成后记得更新ios依赖
npx pod-install

At this time, the command line will open the browser (if not open, manually click the link that appears on the command line), and then you select a project, here select test / react-native project. Represents the react-native project under the test organization.

After the selection is completed, four files will be automatically configured (sentry version is 4.2.4 at the time of writing this article, and new versions may be different in the future).

Modify the content

iOS and android

There is one more sentry.properties file.

sentry.properties the content inside is the same:

 defaults.url=https://sentry.io/
defaults.org=test-5yn
defaults.project=react-native
auth.token=4824f7eb99fc06e55d01ad794dd9743fdxxxxxxxxxxx

• url: official website address
• org: organization name
• project: project name
• token: authentication token

Note, do not try to add comments to the sentry.properties file, otherwise an error will be reported when uploading the sourcemap, and the url parameter will be used when uploading.

android

android also modified the android/app/build.gradle file.

iOS

ios modified the ios/rn_demo.xcodeproj/project.pbxproj file.

A build phase task is added to it. The content of the task is probably to upload some content to the sentry platform when packaging, so as to locate the abnormality. It is estimated that it is to locate native exceptions.

Then I changed the original packaging task of react-native:

Format the content of the script here:

• original script

   set -e
  
  WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
  REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"
  
  /bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"

• modified script

   export SENTRY_PROPERTIES=sentry.properties
  export EXTRA_PACKAGER_ARGS="--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map"
  set -e
  
  WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
  ../node_modules/@sentry/cli/bin/sentry-cli react-native xcode REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"
  
  /bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"

Probably the change is to add a sentry cli command, and then upload the sourcemap to locate the js abnormal location.

Initialize SDK

 import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: 'https://[e-mail]/6692866', // 这里替换成你项目的dsn
  tracesSampleRate: 1.0, // 上传异常的比例，1.0代表百分之百上传
});

wrap your app

Modified App.tsx :

 export default Sentry.wrap(App);

verify

js error

 throw new Error("My first Sentry error!");

View in the background:

native error

 Sentry.nativeCrash();

View in the background:

Stepping on the pit record

error: No such file or directory (os error 2)

The new version rn will have the following problems, the version > 0.69.

solution

You need to manually modify the packaging script and copy the following code to the place shown in the picture:

 set -e
export SENTRY_PROPERTIES=sentry.properties
export EXTRA_PACKAGER_ARGS="--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map"
WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"
SENTRY_CLI_PATH="../node_modules/@sentry/cli/bin/sentry-cli"
/bin/sh -c "$WITH_ENVIRONMENT \"$SENTRY_CLI_PATH react-native xcode $REACT_NATIVE_XCODE\""

env: node: No such file or directory

If you use nvm to manage node, the following problems will occur at runtime:

solution

Create a soft connection to a node:

 ln -s $(which node) /usr/local/bin/node

postscript

For the problem of being walled, you can consider privatized deployment. For details, you can check: https://github.com/getsentry/self-hosted .

Reference: sentry official documentation