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://fc6d6b877f164030a58120c5ca2f2abb@sentry.io/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 <TouchableOpacity
activeOpacity={0.6}
style={[styles.itemContainer, {backgroundColor: color}]}
onPress={() => {
let eror = items.err; //此处写了一个空引用，用于测试报错
this.props.navigation.navigate(item.navigateTo, {
otherParam: name,
});
}}
>
<Text style={styles.itemName}>{name}</Text>
</TouchableOpacity>
};
官网捕获的异常信息如下：
异常信息截图.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
此时，相关异常代码一目了然了。
如果相关操作后，发现还是没有显示源码位置，可能是以下问题：
- 网络延迟问题 ：因为相关的异常信息上传和服务器响应都需要一定的时间，可稍后刷新一下试试
- 构建版本信息不配置问题： 此时需要检查相关的版本是否匹配。
