Sentry的使用

公司項目裏需要加入,於是自己倒騰了下,就總結了下入門使用手法,哈哈,歡迎指點,希望能幫助大家~~~

Sentry 自我理解,可以更便捷的瞭解到非必現的bug、無法通過日誌追蹤的異常等。

一、Sentry介紹:

sentry 是一個實時事件日誌記錄和聚合平臺。它專門用於監視錯誤和提取執行適當的事後操作所需的所有信息, 而無需使用標準用戶反饋循環的任何麻煩。
Sentry 是一個日誌平臺,分爲客戶端和服務端,客戶端(目前客戶端有Python, PHP,C#, Ruby等多種語言)就嵌入在你的應用程序中間,程序出現異常就向服務端發送消息,服務端將消息記錄到數據庫中並提供一個web節目方便查看。Sentry由python編寫,源碼開放,性能卓越,易於擴展,目前著名的用戶有Disqus, Path, mozilla, Pinterest等

二、Sentry的註冊和使用

公司已有現成的服務了,所以我們只需要用公司郵箱進行註冊即可。

下面介紹一下簡單的使用方法:

2.1 首先註冊賬號: 分爲UAT 和線上(ONLINE)

online: https://sentry-fe... // 這裏是正式線上鏈接

uat: http://sentry... // 這裏是uat環境鏈接

(公司郵箱註冊)

TLYhFvRNXW.gif

新註冊的賬號可能無法New Project 創建,這時候需要點擊左側欄目,點擊 Project & Teams ,需要加入Teams,這是刷新頁面,則可以在Select project 下面看到你的項目,如果無項目請聯繫管理員;

YqwsIuXTtX.gif

進入後進行簡單配置,然後右上角可以點擊 New Project 創建,選擇需要項目類型,根據提示進行配置

c2CHwXF4ct.gif

選擇相對應的技術

izBwzIPLN3.gif

下面這個生成的鏈接也就是日後項目實時監聽bug的地址(項目中的sentry.ts文件中需要配置的這個)

847I23cYbJ.gif

2.2 sentry在項目中的配置

a. 首先在項目中下載依賴
$ yarn add raven-js -D
b. sentry配置文件

(目前有一套配置文件,可直接飲用,也可對裏面的錯誤警報規則做修改)
如:

Fs88JMk64A.gif

c. sentry 在項目中的引用:
import * as Raven from "raven-js"; // 首先引入
import { ravenOptions, DSN_ONLINE, DSN_UAT } from "config/sentry"; // 上面對sentry的配置文件
import { isLocalEnv, isUatEnv } from "utils/url";  // 封裝的頁面鏈接獲取

componentDidMount() {
    if (!isLocalEnv) {
            const dsn = isUatEnv ? DSN_UAT : DSN_ONLINE;
            Raven.config(
                dsn,
                Object.assign({}, ravenOptions, {
                    release: __webpack_global__.SENTRY_RELEASE
// 這裏注意了,__webpack_global__相當於是全局的,需要在tsconfig.json裏進行配置,深層的原理和關聯可以追蹤看ezpack庫
                })
            ).install();
        }
}

//  componentDidCatch 錯誤捕獲
componentDidCatch(error, errorInfo) {
        const group = errorInfo ? location.href : "default";
        Raven.captureException(error, { extra: errorInfo, fingerprint: [group] });
    }

<br/>

Xa9IoSkx10.gif
iMgsOsiP5Z.gif

以上是在項目中添加sentry最簡單的配置使用,當完成到這裏的時候,可以進行測試 比如在項目中添加
throw new Error("test error");
發佈在環境上進行測試,在自己的賬號項目中檢查是否監聽到錯誤。
以上只是簡單地配置在項目中了,當然,我們可以將它運用的更友好,比如在請求的時候加上:
const captureException = (err, option) => {
    Raven.captureException(err, {
        fingerprint: ["API", option.url],
        message: err,
        extra: option
    });
};
//  在請求時,發生錯誤處理方法中可以加入此配置,在監聽到錯誤時,詳細信息會包括fingerprint: 類型, message: 錯誤信息, extra: 請求鏈接的信息以及連接等, 都將在 sentry監聽到的詳情裏展現出來。
還有一些其他用法,待研究後更新。。。(^__^) 嘻嘻……

推薦參考資料:

【參考資料1】
【參考資料2】

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章