ReactNative中Sentry的集成使用

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)目



選擇React-native

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

查看DSN

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


捕獲錯(cuò)誤信息

我們都知道React-Native錯(cuò)誤有兩種,React Error Boundaries (異常邊界組件)和React Native ErrorUtils 模塊

所以在監(jiān)控錯(cuò)誤,上報(bào)錯(cuò)誤信息的時(shí)候,這兩種情況都要處理


ErrorUtils監(jiān)控錯(cuò)誤


DIdCatch監(jiān)控錯(cuò)誤

然后寫一個(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ò)誤位置了


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容