reactnative 集成 sentry sourcemap

写于 2020年8月7日，
版本

  "dependencies": {
    "@sentry/react-native": "^1.7.1",
    "react": "16.13.1",
    "react-native": "0.63.2"
  }
sentry-cli 1.55.1

sentry 使用官方 非私服

1. 当前在 rn 项目根目录。
   项目添加完 sentry

npm install @sentry/react-native --save

在 sentry 网站内创建完项目。且本地代码内已经引入 sentry

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

Sentry.init({
  dsn: 'dsn',
});

全局安装 sentry 命令行工具，用于上传 sourcemap。

npm -g install @sentry/cli

1. 打包

cd android & ./gradlew assembleRelease

2. 创建 sourcemap 存取目录

cd -
mkdir -p path/to

3. 创建 sourcemap

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

4. 登录 sentry 官网 创建令牌 用于本地和 sentry 通信。

点击

image.png

创建令牌

image.png

复制创建的令牌

5. 使用令牌 登录 sentry 网站

 sentry-cli --url https://sentry.io login

根据提示操作
Sentry server: sentry.io
Open browser now? [y/n] n
Enter your token: xxxxxxxxxxxxxxxxxxxxxxxxxxxx
Valid token for user sunhaokk@qq.com

// 会存一份配置到 用户目录
Stored token in /Users/sunhao/.sentryclirc

5. 上传sourcemap 一旦上传 sourcemap 会自动缓存。 即使删除 sourcemap 。缓存也会存在。所以下回还是会看到 sourcemap 映射 的代码。

以下配置提前在sentry 内获取。或者在构建的配置中查询

App Build 3

Build ID com.reactnative_sentry_demo

版本 test

对应命令

sentry-cli releases -o pika -p react-native files Build ID@版本+App Build  upload-sourcemaps \
--dist App Build \

也可以进这里直接复制版本信息。

image.png

sentry-cli releases -o pika -p react-native files com.reactnative_sentry_demo@test+3  upload-sourcemaps \
--dist 3 \
--url-prefix "app:///" \
--rewrite path/to/index.android.bundle path/to/index.android.bundle.map

6. 此时可以完美的看到 sourcemap 映射。

image.png

7. 注意 在上传完 sourcemap 且对应的 dist 和 版本信息， 新触发的错才会映射。