集成Sentry

1.简介

Sentry 是一个实时事件日志记录和汇集的平台。它分为客户端和服务端，客户端(目前客户端有Python, React，Android，IOS等多种平台)就嵌入在你的应用程序中间，程序出现异常就向服务端发送消息，服务端将消息记录到数据库中并提供一个web页方便查看。Sentry由python编写，源码开放，性能卓越，易于扩展。
优点：支持众多前端，且后端开源

2.ReactNative中引入sentry

引入相关的依赖

$ npm install react-native-sentry --save
# or
# yarn add react-native-sentry
# if you are using yarn
# this is for linking
$ react-native link react-native-sentry

在 index.js文件中添加以下代码：

import { Sentry } from 'react-native-sentry';
Sentry.config('https://[email protected]/1482326').install();

以上的相关配置，可进入 https://sentry.io/organizations/yourorg/projects/（其中yourorg，是注册时添加的组织名称 ），点击相关的项目中，即可找到相关的配置信息

引入后，即可在官网中查看项目的异常信息，示例如下：
异常代码如下，点击按钮后会直接报错

    _renderItem = ({item, index}) => {
        let name = item.name.replace('Screen', '');
        let color ='#'+(Math.random()*0xffffff<<0).toString(16);
        return  {
                    let eror = items.err;    //此处写了一个空引用，用于测试报错
                    this.props.navigation.navigate(item.navigateTo, {
                        otherParam: name,
                    });
                }}
            >
                {name}
            
    };

官网捕获的异常信息如下：

异常信息截图.PNG

异常详细信息如下：

ReferenceError: Can't find variable: items
  at onPress(app:///index.android.bundle:764:693)
  at touchableHandlePress(app:///index.android.bundle:213:1243)
  at _performSideEffectsForTransition(app:///index.android.bundle:197:8865)
  at _receiveSignal(app:///index.android.bundle:197:7629)
  at touchableHandleResponderRelease(app:///index.android.bundle:197:4945)
  at y(app:///index.android.bundle:88:576)
  at k(app:///index.android.bundle:88:719)
  at E(app:///index.android.bundle:88:773)
  at D(app:///index.android.bundle:88:1940)
  at F(app:///index.android.bundle:88:2699)
  at [native code] forEach(:0:0)
  at W(app:///index.android.bundle:88:2499)
  at ? (app:///index.android.bundle:88:14001)
  at Ae(app:///index.android.bundle:88:75072)
  at ze(app:///index.android.bundle:88:13671)
  at Oe(app:///index.android.bundle:88:13844)
  at receiveTouches(app:///index.android.bundle:88:14603)
  at value(app:///index.android.bundle:25:3449)
  at ? (app:///index.android.bundle:25:960)
  at value(app:///index.android.bundle:25:2703)
  at value(app:///index.android.bundle:25:932)

通过以上相关信息，只知道一个onPress 事件，引发了一个ReferenceError异常，但是无法知道具体的代码位置；这是因为源码是经过压缩的，需要上传sourcemap进行关联

3.上传sourcemap

• 生成sourcemap 文件

react-native bundle \
  --dev false \
  --platform android \
  --entry-file index.js \
  --bundle-output android.main.bundle \
  --sourcemap-output android.main.bundle.map

• 安装sentry
  npm -g install @sentry/cli
• 配置sentry
  执行sentry-cli login命令，根据操作，填写相关的 token
  
  

  配置sentry.PNG
  
  执行操作成功后，会在c:\Users\xxx目录中生成一个.sentryclirc文件
• 修改.sentryclirc文件
  打开.sentryclirc文件，此时内容如下：

[auth]
token=b24d7dff5eb7421682bd5c729dxxxx12a2b8734d23a7ce0e85d9

完善相关的组织服务器地址等信息，如下所示：

[auth]
token=b24d7dff5eb7421682bd5c729xxxa2b8734d23a7ce0e85d94345ae
[defaults]
url=https://sentry.io/
org=xzg8023
project=rnstudy

• 上传sourcemap

sentry-cli releases \
    files RELEASE_NAME \
    upload-sourcemaps \
    --dist DISTRIBUTION_NAME \
    --strip-prefix /path/to/project/root \
    --rewrite \
    path/to/index.android.bundle path/to/index.android.map

RELEASE_NAME: 包名-版本号，如 com.rnstudy-1.0.0
DISTRIBUTION_NAME: 构建号，如 1，在Android或iOS项目中设置

配置信息.PNG

sentry-cli releases files com.rnstudy-1.0.0 upload-sourcemaps --dist 1 --strip-prefix /study --rewrite index.android.bundle index.android.bundle.map

上传成功后，再次点击引发ReferenceError异常，此时在官网，再次查看异常信息如下所示：

异常信息.PNG

此时，相关异常代码一目了然了。

如果相关操作后，发现还是没有显示源码位置，可能是以下问题：

• 网络延迟问题 ：因为相关的异常信息上传和服务器响应都需要一定的时间，可稍后刷新一下试试
• 构建版本信息不配置问题： 此时需要检查相关的版本是否匹配。

更多配置：
Sentry Additional Configuration