sentry是開源的應(yīng)用程序監(jiān)控平臺(tái),這里就不多做介紹,基本的簡介可以在官網(wǎng)看到https://docs.sentry.io/
我們直接介紹在React-Native項(xiàng)目中的使用
各種程序監(jiān)控平臺(tái)工作流程都是分為四步:
第一步:程序報(bào)錯(cuò),捕獲代碼中的錯(cuò)誤異常?
第二步:發(fā)送錯(cuò)誤異常信息到服務(wù)端
第三步:服務(wù)端展示錯(cuò)誤信息,根據(jù)錯(cuò)誤信息查找對(duì)用的Sourcemap文件
第四步:服務(wù)端根據(jù)Sourcemap信息,定位到源碼位置
Sentry安裝:(官網(wǎng)上都有這里在復(fù)制一下)
安裝 npm install@sentry/react-native--save # or yarn add @sentry/react-native
link如果 react-native >= 0.60 執(zhí)行
npx sentry-wizard-ireactNative-pios android
yarn sentry-wizard-ireactNative-pios android
cd ios?
pod install
如果react-native < 0.60
react-nativelink@sentry/react-native
然后在項(xiàng)目中的引入和初始化

在init的時(shí)候根據(jù)需要可以設(shè)置不同的參數(shù)設(shè)置版本信息和dist值,這里一會(huì)再說
init中DSN是你應(yīng)用報(bào)錯(cuò)上傳的地址信息,每個(gè)項(xiàng)目都有自己的DSN
獲取DSN:
Sentry我們這里使用官方提供的服務(wù)端https://sentry.io/welcome/
登錄之后我們創(chuàng)建我們的項(xiàng)目


創(chuàng)建項(xiàng)目之后我們可以在settings中找到該項(xiàng)目的DSN了

這時(shí)候我們在RN項(xiàng)目中注入監(jiān)控代碼就可以完成基本的信息上報(bào),使用Sentry.captureException(err);捕獲錯(cuò)誤信息

我們都知道React-Native錯(cuò)誤有兩種,React Error Boundaries (異常邊界組件)和React Native ErrorUtils 模塊
所以在監(jiān)控錯(cuò)誤,上報(bào)錯(cuò)誤信息的時(shí)候,這兩種情況都要處理


然后寫一個(gè)錯(cuò)誤代碼,我們就可以在服務(wù)端看到有相關(guān)錯(cuò)誤信息,但是點(diǎn)開信息我們只能看到報(bào)錯(cuò)信息和手機(jī)上紅屏錯(cuò)誤一樣的信息,無法看到具體的出錯(cuò)代碼,這時(shí)候我們就要用到Sourcemap了,上傳SourceMap到服務(wù)端,就能解析出源碼了

Sourcemap上傳:
? ? ? ? 為了方便管理也為了上傳sourcemap之后服務(wù)端能找到對(duì)應(yīng)的Sourcemap我們需要?jiǎng)?chuàng)建不同的版本信息和Dist值,所以在初始化的時(shí)候我們創(chuàng)建版本和dist值

我們把項(xiàng)目打包
node node_modules/react-native/local-cli/cli.js? bundle --platform android --dev false--entry-file index.js? --bundle-output./src/pic/index.android.bundle?--assets-dest ./src/pic/?? --sourcemap-output./src/pic/index.android.bundle.map
然后使用sentry-cli上傳sourcemap到服務(wù)端
sentry-cli releases files RELEASE_NAME
upload-sourcemaps --dist DIST_NAME
--strip-prefix?/path/to/project/root
--rewrite? path/to/index.android.bundlepath/to/index.android.map
RELEASE_NAME是版本名稱,DIST_NAME是構(gòu)建號(hào),在init的時(shí)候我們已經(jīng)設(shè)置
本地測試的時(shí)候/path/to/project/root就是你本地項(xiàng)目所在位置,Sentry會(huì)根據(jù)Sourcemap信息找到源碼
生產(chǎn)中就是你項(xiàng)目所在的目錄
Sourcemap上傳成功之后我們可以查看上傳的bundle和bundle.map文件

然后當(dāng)有報(bào)錯(cuò)的時(shí)候我們在查看錯(cuò)誤信息就能看到源碼錯(cuò)誤位置了
