前端異常日誌監控 – 使用Sentry

xakoy發表於2018-09-12
前端

背景

現在的前端專案越來越複雜，在不同的客戶端會產生各種在開發人員機器上不會出現的問題。當使用者報告一個問題給開發人員的時候，開發人員無法直接定位問題。在此前，聽過一次鵝廠的前端人員，他們對QQ裡面的網頁監控的一個講座，深有感觸。但是鵝廠是自己開發了一系統，從開發到運維到錯誤分析，是一整套的體系。對於我們的專案，我們不可能選擇自己開發，在網上找到一個開源的產品 [ Sentry ]，基本體現了鵝廠的那套思路。

關於 Sentry

Sentry 官網
以下是官網首頁關於Sentry的介紹
Stop hoping your users will report errors
停止期待您的使用者反饋錯誤
Open-source error tracking that helps developers monitor and fix crashes in real time. Iterate continuously. Boost efficiency. Improve user experience
幫助開發人員實時監控和修復錯誤，快速迭代，提高效率。提升使用者體驗。

不過多解釋sentry產品，直接開始接入sentry, 非常簡單。 sentry本身是有云服務的，可以讓開發者快速體驗，接入。雲服務如果長期使用，是需要收費的，如果是體驗就註冊體驗下即可，如果要專案用，可以自己搭建一個sentry 服務，參考 搭建自己的 sentry 服務。

接入Sentry

本專案是使用webpack打包的工程，如不使用webpack的，參考官方文件，非常簡單。

  1. 安裝sentry的javascript的客戶端npm包 npm install raven-js –save ; 參考 Installation
  2. 在JS中呼叫和配置; 參考Configuration
import Raven from `raven-js`;

Raven
    .config(`http://f3da1a4f401c434cba447be865d2bd41@sentry.io/10`)
    .install();


window.onload = function(){
    document.getElementById(`container`).addEventListener(`click`,e => {
        console.log(window[`aaa`].aaa) //此處window[`aaa`]為undifine，所以這裡一定會報錯
    }, false)
}

Raven.config中的值，叫做dsn(客戶端密匙)，可在專案的設定介面找到。如果看不到專案的設定選單，可能是你賬號許可權不夠。

檢視效果

訪問網頁，點選按鈕後，會產生JS異常，很快會收到來自sentry郵件通知,點開即能看到詳細的錯誤，包括：

  1. 客戶IP地址
  2. 瀏覽器和作業系統
  3. 訪問的地址
  4. 錯誤的資訊和呼叫堆疊
    image

在上圖中，可以看見錯誤。這個和我們原始碼的異常資訊是一致的。但是在下方的JS呼叫堆疊中，對應的是壓縮後JS檔案位置，和我們原始碼無法對應上，無法直接的幫助我們排查和定位問題。
要錯誤對應上我們原始碼的位置，sentry要求我們上傳JS壓縮時的sourcemaps。

上傳 SourceMaps 對錯誤進行定位

如何產生SourceMap, 如果不熟悉的話，可以參考Sentry Generating Source Maps 文件，有各類框架如何產生source maps.
Sentry 有多種方式上傳SourceMaps，release API、Sentry CLI、sentry-webpack-plugin，詳情參考Uploading Source Maps to Sentry, 我的工程中用的是webpack包，同時打包編譯釋出的過程是在CI中完成的，所以首先 sentry-webpack-plugin。

使用 Sentry Webpack Plugin 配合Webpack完成構建時上傳SourceMaps

外掛的使用方式，參考官方文件，以下擷取文中內容的步驟：

  1. Start by creating a new authentication token under [Account] > API.
  2. Ensure you have project:write selected under scopes.
  3. Install @sentry/webpack-plugin using npm
  4. Create .sentryclirc file with necessary config (see Sentry Webpack Plugin docs below)
  5. Update your webpack.config.json

獲取API Token

登入sentry，在賬號 -> API 中，

  1. mage

  2. image

  3. 請確保勾選了 project:write

安裝sentry-webpack-plugin外掛

npm install @sentry/webpack-plugin @sentry/cli --dev-save

建立.sentryclirc檔案並配置

在專案的根目錄下，建立一個檔案.sentryclirc，並配置sentry cli需要的內容，以下是我的配置檔案

[defaults]
url = http://sentry.io/
<!-- 此處可以從你的sentry.io的全路徑看出，如：https://sentry.io/此處是你的org/此處是你的project/ -->
org = yunxun
project = qrcode

[auth]
token = cbf0ec5f33fa478184194ad32701b06ccb92451b7c5742d6b1f1c70f95e511d2

更新webpack.config.json

const SentryPlugin = require(`@sentry/webpack-plugin`);

module.exports = {
    // ... other config above ...
    plugins: [
      new SentryPlugin({
        release: process.env.RELEASE,
        include: `./dist`,
        ignore: [`node_modules`, `webpack.config.js`],
      })
    ]
};

以上步驟編譯完成後，可以在Sentry的專案裡面看到我們上傳的原始檔和SourceMap檔案

image
根據上圖可以看到，版本號，這個對於的在webpack外掛中的release。也是說，sentry可以幫你管理多個版本的sourceMaps。
同時在這個版本上，可以看到有多少個問題，最後一個問題的時間。

Sourmap 上傳後的錯誤效果

上述步驟完成後，在回到我們的頁面，重現一次錯誤，然後看看在sentry有什麼不同。
image

看圖中比之前多出了幾個功能：

  1. 多出版本資訊
  2. 多出原始、最小化的標籤
  3. 這次的錯誤提示，不是壓縮後JS的提示，而是看起來和原始碼一樣

在這種方式下，可以直觀，高效的定位排查問題。

參考

  1. Sentry 官網 Javascript 整合
  2. 前端錯誤日誌監控——Sentry使用教程
  3. SPA專案實現前端錯誤監控及定位錯誤
  4. vue中如何使用sentry對錯誤日誌進行監控
  5. 搭建自己的 sentry 服務

相關文章