sentry系統監控前端異常

簡介

  前端異常監控系統，市面上有好多。爲何咱們選擇sentry呢？由於其較多的支持目前主流語言及框架的項目，比較成熟和穩定。並且開源，而且github上還有docker集成好的sentry安裝環境。目前，多數公司在作前端異常監控時，都選擇了開源的sentry。

vue項目實踐

配置

基於vue的前端項目，咱們按照一下步驟：

• 1.首先在搭建的sentry系統上新建一個vue的項目。
• 2.以後咱們須要引入vue框架的sentry SDK。
    @sentry/browser：經過包含和配置Sentry，SDK將自動附加全局處理程序以捕獲未捕獲的異常和未處理的拒絕。
    @sentry/integrations：將捕獲引起錯誤的Vue活動組件的名稱和props狀態。這是經過Vue的config.errorHandler鉤子報告的。

npm install @sentry/browser.
npm install @sentry/integrations.

• 3.在vue項目的main.js中導入插件及相關配置

import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
// sentry config
  Sentry.init({
    dsn: 'https://<key>@sentry.io/<project>', // 項目的dns
    integrations: [ new Integrations.Vue({ Vue, attachProps: true }) ] // 
  })

複製代碼

sourcemap

  上面的配置已經能使咱們的異常上報到sentry系統，但異常報錯的位置是被webpack壓縮過的js文件，咱們很難識別究竟是項目中的哪個組件哪一行代碼。爲了使上報異常能快速定位到代碼位置，咱們引入sourcemap的解析。
  咱們須要引入一個組件@sentry/webpack-plugin，在vue項目的vue.config.js的配置以下

// 這裏使用commonJS模式引入組件
const SentryPlugin = require('@sentry/webpack-plugin')
module.exports = { 
	configureWebpack: config => {
	    config.plugins.push(
	      new SentryPlugin({
	        project: 'project-name', // 項目名稱
	        apiKey: token, // sentry的API TOKEN
	        suppressErrors: true, // 上傳失敗時不阻礙webpack繼續執行
	        release: 'version', // sentry項目上的release版本
	        include: '.', // 須要上傳的文件包含哪些
	        filenameTransform: filename => {
	          return `~/${filename}` // 上傳文件的對應web頁面引入資源的目錄接口
	        }
	      })
	    )
	  },
	productionSourceMap: true
}
複製代碼

main.js要添加release的配置與vue.config.js中一致

Sentry.init({
    dsn: 'https://<key>@sentry.io/<project>', // 項目的dns
    integrations: [ new Integrations.Vue({ Vue, attachProps: true }) ]，
    release: 'version' // sentry項目上的release版本
  })
}
複製代碼

  以上配置完成後，咱們就能夠在sentry系統上看到報錯匹配到source.map.js，具體到vue組件的哪一行代碼報錯。

  注意：這裏引入webpack-plugin，開啓了項目的sourcemap。webpack構建時，壓縮的js chunk文件會生成對應的map.js文件，爲了防止項目源碼泄漏，咱們生產環境，構建完成後手動刪除map.js文件。

find . -name "*.js.map" | xargs rm -rf

  還有一種不經過插件的方式，上傳項目的map.js文件。項目build完成後，遍歷js下的文件，調用sentry提供的上傳接口，將文件上傳到對應的release下。新建項目release也是經過調用sentry提供的api完成。這裏就不詳細說明了。