react-native之异常监控平台sentry接入指南

2年前 (2022) 程序员胖胖胖虎阿

308 0 0

前言

sentry介绍

sentry是国外出的一款异常监控平台，支持市面上大多数的语言和框架。

就 react-native 来说:

能自动捕获包括 native 错误和 js 错误。
上报的信息包括机型，系统版本号、app版本号、consolex.log 信息、错误栈信息、异常源码位置、commit记录等。
功能包括错误信息看板、监控预警、性能监控等。

优点：

免费
上报信息丰富

缺点：

需要科学上网
还没有汉化版

接入步骤

创建项目

创建组织

点击后输入组织名称，确认即可。我创建了一个叫 test 的组织。

react-native之异常监控平台sentry接入指南

创建项目

选择 react-native，可以修改项目名称和组织，这里我就不改了，点创建项目。

react-native之异常监控平台sentry接入指南

配置sentry

安装

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

修改原生配置

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

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

这个时候，命令行会打开浏览器（如果没打开，手动点击命令行出现的链接），然后你选择一个项目，这里选择test / react-native 项目。代表 test 组织下面的 react-native 项目。

react-native之异常监控平台sentry接入指南

选择完成后会自动配置四个文件（本文编写的时候 sentry 版本为 4.2.4，以后新版本也许会不一样）。

修改内容

iOS 和 android

都多了一个 sentry.properties 文件。

react-native之异常监控平台sentry接入指南

sentry.properties 里面的内容是一样的：

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

url：官网地址
org：组织名称
project：项目名称
token：鉴权令牌

注意，不要试图在 sentry.properties 文件加注释，不然上传sourcemap的时候会报错，上传的时候会用到 url 参数。

android

android还修改了android/app/build.gradle文件。

react-native之异常监控平台sentry接入指南

iOS

ios修改了 ios/rn_demo.xcodeproj/project.pbxproj 文件。

其中加入了一个构建阶段任务。任务内容大概就是打包的时候上传一些内容到sentry平台，方便定位异常。估计是为了定位 native 异常。

react-native之异常监控平台sentry接入指南

然后还改了一下 react-native 原来的打包任务：

react-native之异常监控平台sentry接入指南

这里格式化一下脚本内容：

原脚本

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"

修改后的脚本

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"

大概变化就是加一个 sentry 的 cli 命令，然后上传 sourcemap 便于定位 js 异常位置。

初始化SDK

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

Sentry.init({
  dsn: 'https://04c9544cd0104f97ad0a9c2599f9cd49@o1379748.ingest.sentry.io/6692866', // 这里替换成你项目的dsn
  tracesSampleRate: 1.0, // 上传异常的比例，1.0代表百分之百上传
});

包裹你的App

修改 App.tsx ：

export default Sentry.wrap(App);

验证

js错误

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

在后台查看：

react-native之异常监控平台sentry接入指南

native错误

Sentry.nativeCrash();

在后台查看：

react-native之异常监控平台sentry接入指南

踩坑记录

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

新版本rn会出现下列问题，版本>0.69的。

react-native之异常监控平台sentry接入指南

解决方案

需要手动修改一下打包脚本，将下列代码复制到图片所示的地方：

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\""

react-native之异常监控平台sentry接入指南