1.簡介

Sentry 是一個實時事件日志記錄和匯集的平臺。它分為客戶端和服務(wù)端，客戶端(目前客戶端有Python, React，Android，IOS等多種平臺)就嵌入在你的應(yīng)用程序中間，程序出現(xiàn)異常就向服務(wù)端發(fā)送消息，服務(wù)端將消息記錄到數(shù)據(jù)庫中并提供一個web頁方便查看。Sentry由python編寫，源碼開放，性能卓越，易于擴(kuò)展。
優(yōu)點：支持眾多前端，且后端開源

2.ReactNative中引入sentry

引入相關(guān)的依賴

$ 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();

以上的相關(guān)配置，可進(jìn)入 https://sentry.io/organizations/yourorg/projects/（其中yourorg，是注冊時添加的組織名稱 ），點擊相關(guān)的項目中，即可找到相關(guān)的配置信息

引入后，即可在官網(wǎng)中查看項目的異常信息，示例如下：
異常代碼如下，點擊按鈕后會直接報錯

    _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>
    };

官網(wǎng)捕獲的異常信息如下：

異常信息截圖.PNG

異常詳細(xì)信息如下：

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)

通過以上相關(guān)信息，只知道一個onPress 事件，引發(fā)了一個ReferenceError異常，但是無法知道具體的代碼位置；這是因為源碼是經(jīng)過壓縮的，需要上傳sourcemap進(jìn)行關(guān)聯(lián)

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
  執(zhí)行sentry-cli login命令，根據(jù)操作，填寫相關(guān)的 token
  
  配置sentry.PNG
  
  執(zhí)行操作成功后，會在c:\Users\xxx目錄中生成一個.sentryclirc文件
• 修改.sentryclirc文件
  打開.sentryclirc文件，此時內(nèi)容如下：

[auth]
token=b24d7dff5eb7421682bd5c729dxxxx12a2b8734d23a7ce0e85d9

完善相關(guān)的組織服務(wù)器地址等信息，如下所示：

[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: 構(gòu)建號，如 1，在Android或iOS項目中設(shè)置

配置信息.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

上傳成功后，再次點擊引發(fā)ReferenceError異常，此時在官網(wǎng)，再次查看異常信息如下所示：

異常信息.PNG

如果相關(guān)操作后，發(fā)現(xiàn)還是沒有顯示源碼位置，可能是以下問題：

• 網(wǎng)絡(luò)延遲問題 ：因為相關(guān)的異常信息上傳和服務(wù)器響應(yīng)都需要一定的時間，可稍后刷新一下試試
• 構(gòu)建版本信息不配置問題： 此時需要檢查相關(guān)的版本是否匹配。

更多配置：
Sentry Additional Configuration