【前端鏈路監控】前端錯誤日志收集

1、為什么要處理異常？

• 增強用戶體驗；

• 遠程定位問題，未雨綢繆，及早發現問題及早處理；

• 無法復現問題，尤其是移動端，可以查找日志；

• 收集錯誤產生的系統信息，如瀏覽器，機型等；

• 完善的前端方案，前端監控系統；

• 對於 JS 而言，我們面對的僅僅只是異常，異常的出現不會直接導致 JS 引擎崩潰，最多只會使當前執行的任務終止。

2、需要處理哪些異常？

• js 語法錯誤、代碼異常；

• http 請求異常(服務問題，接口問題？)；

• 靜態資源加載異常；

• 后端返回數據格式不規范導致的 js 錯誤；

• Iframe 異常，跨域 Script error 等；

• 崩潰和卡頓

3、收集錯誤日志的方法

3.1、最簡單的錯誤處理方法

Vue 全局配置 errorHandler 可以進行全局錯誤收集,我們可以根據這個特性對前端異常做這樣的處理：業務錯誤直接寫在業務里；代碼錯誤、ajax 請求異常等錯誤可以進行全局捕獲然后拋出，不至於前端頁面掛掉。

import Vue from 'vue'
const errorHandler = (error, vm) => {
  console.error('拋出全局異常')
  console.error(error)
}
Vue.config.errorHandler = errorHandler
Vue.prototype.$throw = error => errorHandler(error, this)

// 請求攔截
axios.interceptors.response.use(
  res => {
    if (res.data.coe !== 200) {
      console.log('請求失敗')
      return Promise.reject(res)
    }
    return res
  },
  error => {
    Vue.$throw(error)
    return Promise.reject(error)
  }
)

3.2、利用 vuex 收集錯誤

// errorLog.js
import Vue from 'vue'
import store from './store'
Vue.config.errorHandler = function(err, vm, info, a) {
  Vue.nextTick(() => {
    store.dispatch('addErrorLog', {
      err,
      vm,
      info,
      url: window.location.href
    })
    console.error(err, info)
  })
}

// vuex errorLog模塊
const errorLog = {
  state: {
    logs: []
  },
  mutations: {
    ADD_ERROR_LOG: (state, log) => {
      state.logs.push(log)
    }
  },
  actions: {
    addErrorLog({ commit }, log) {
      commit('ADD_ERROR_LOG', log)
    }
  }
}
export default errorLog

3.3、通過接口捕捉——上傳——查詢錯誤

通過后台接口上傳錯誤信息，然后在后台管理系統查詢錯誤信息。通過這些信息我們可以很快定位並且解決問題。

function error(msg, url, line) {
  var REPORT_URL = 'http://xxxx.com' // 收集上報數據的信息
  // 收集錯誤信息，發生錯誤的腳本文件網絡地址，用戶代理信息，時間
  var m = [msg, url, line, navigator.userAgent, +new Date()]
  var url = REPORT_URL + m.join('||') // 組裝錯誤上報信息內容URL
  var img = new Image()
  img.onload = img.onerror = function() {
    img = null
  }
  img.src = url // 發送數據到后台cgi
}
// 監聽錯誤上報
window.onerror = function(msg, url, line) {
  error(msg, url, line)
}

3.4、Fundebug(付費，棄)

Fundebug 是專業的應用 BUG 監控平台。當線上應用出現 BUG 時，Fundebug 會通過郵件或者第三方工具立即給開發者發送報警，這樣能夠幫助開發者及時發現並且修復應用 BUG，從而提升用戶體驗。網址：https://www.fundebug.com/

使用方法

 

// 1、安裝 npm install fundebug-javascript fundebug-vue --save
// 2、配置：main.js
import * as fundebug from 'fundebug-javascript'
import fundebugVue from 'fundebug-vue'
fundebug.apikey = 'API-KEY'
fundebugVue(fundebug, Vue)

API

• test(name, message)

• notify(name, message, option)

• notifyError(error, option)

4、sentry(推薦)

Sentry 是一個開源的錯誤追蹤工具，可以幫助開發人員實時監控和修復系統中的錯誤。其專注於錯誤監控以及提取一切事后處理所需的信息;支持幾乎所有主流開發語言(JS/Java/Python/php)和平台, 並提供了 web 來展示輸出錯誤。sentry 官網：https://sentry.io

sentry的特性

• 支持多種語言和框架

• 相同錯誤合並

• 定制規則進行郵件通知

• 支持導入sourcemap自動解析和還原代碼

• 友好的可視化Web界面

4.1、注冊賬號，新建項目。

新建項目后，您將獲得一個我們稱之為 DSN 或數據源名稱的值.它看起來很像一個標准的 URL，但它實際上只是 Sentry SDK 所需的配置的標識。它由以下幾個部分組成。

1. 使用的協議: http 或 https;

2. 驗證 sdk 的公鑰和密鑰;

3. 目標 sentry 服務器;

4. 驗證用戶綁定的項目 id.

4.2、安裝依賴，引入腳本

 

import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'
Raven.config('https://[e-mail]/1516655')
  .addPlugin(RavenVue, Vue)
  .install()

常用參數

• DSN ：項目的地址，用於收集錯誤信息的 sentry 分配的地址

• debug ：是否開啟 debug 模式，開啟 debug，就會把信息打印到控制台上面

• release ： 代碼的版本號，可以確定當前的錯誤/異常屬於哪一個發布的版本

• environment : 環境名稱

• attachStacktrace ： 是否開啟堆棧跟蹤，開啟后跟着消息一起收集

• beforeSend : 發送前操作

4.3、基本使用

最簡單的方式是主動觸發：

try {
  doSomething(a[0])
} catch (e) {
  Raven.captureException(e)
}

window.onerror 捕捉異常

window.onerror = function(e) {
  Raven.captureException(e)
}

在 vue 里可以使用 Vue.config.errorHandler 鈎子來捕捉

Vue.config.errorHandler = (err, vm, info) => {
  Raven.captureException(err)
}

對於接口報錯，可以在全局攔截里實現

request.interceptors.response.use(null, error => {
  console.error(error)
  Raven.captureException(error)
  return Promise.reject(error)
})

4.4、source-map 配置

• 創建新的 token

• 安裝@sentry/webpack-plugin 插件, 一般會同時安裝@sentry/cli

• npm i @sentry/webpack-plugin --dev

• 根目錄創建.sentryclirc 文件

[defaults]
url = https://sentry.io/
org = your org
project = your project

[auth]
token = your token

• 在 config/prod.env.js 創建環境變量

 

const release = 'demo-test001' // 可以根據package.json的版本號或者Git的tag命名
process.env.RELEASE_VERSION = release
module.exports = {
  NODE_ENV: '"production"',
  RELEASE_VERSION: `"${release}"`
}

• 在 webpack.prod.conf 配置

 

const SentryPlugin = require('@sentry/webpack-plugin')
new SentryPlugin({
  release: process.env.RELEASE_VERSION, //發布的版本
  include: path.join(__dirname, '../dist/static/js/'), //需要上傳到sentry服務器的資源目錄
  ignore: ['node_modules', 'webpack.config.js'], //  忽略文件目錄
  configFile: `.sentryclirc`, //  面包含了 -o組織 -p項目 以及authtoken
  urlPrefix: '~/static/js' //  線上對應的url資源的相對路徑
})

4.5、 報警郵件發送規則

Sentry 默認會將所有采集到的異常發送警報郵件，有時我們可能希望只收到某個版本下某些規則下的警報郵件，這時候就需要刪除默認的警報規則，然后新建自定義規則。 在項目設置中找到 Alerts，左上角 “New Alert Rule”即可添加設置報警規則。

4.6、信息收集

• 錯誤類型及具體錯誤信息

• 豐富的上下文周圍的錯誤

• 用戶信息(ip, 機型, 操作系統, 瀏覽器版本, 時間)

• 錯誤代碼的定位(具體文件，具體行數)

• 同一個錯誤發生的次數和用戶數

• 區分錯誤的環境及版本