前端日誌監控平臺sentry使用 @sentry/browser @sentry/webpack-plugin

1.新舊SDK對比

sentry前不久更新了js-jdk,之前使用的raven-js與webpack-sentry-plugin更新成了@sentry/browser @sentry/webpack-plugin

舊                          新
raven-js                    @sentry/browser        前端錯誤日誌上報SDK
webpack-sentry-plugin       @sentry/webpack-plugin webpack項目sourcemap上傳插件

目前兩套插件均可以正常使用，可是隨着根據官方的腳步，新的必將慢慢替代舊的，因此有空有閒的程序猿／媛們動起來吧。

2.@sentry/browser用法

2.1 sentry帳號註冊

以VUE項目爲例，咱們在sentry官網https://sentry.io先註冊一個帳號。

建立一個項目,選擇Browser分類下的vue,而後起一個項目名vuexxx,點擊建立項目

建立成功會出現項目注意事項簡介，說明基本用法

選擇肯定，進入項目，默認頁面以下，注意地址欄用紅色圈出的部分，在上傳sourcemap的時候將用到，右上角圈出來的Environment能夠在初始化的時候進行設置，查看錯誤的時候咱們能夠選擇測試或者生產的數據：

2.2 安裝

npm install @sentry/browser --save

2.3 使用

在main.js文件中引入並初始化

    import * as Sentry from '@sentry/browser'
    Sentry.init({
    dsn: '上報地址',
    integrations: [new Sentry.Integrations.Vue({ Vue })],
    release: '版本號',
    environment:'環境，好比生產或者測試'
  })

3.@sentry/webpack-plugin用法

構建項目時，咱們會將代碼進行壓縮混淆，爲了在進行日誌分析的時候更清楚看到錯誤發生的緣由，咱們要對代碼進行還原，所以須要sourcemap文件，使用插件在項目構建時會自動上傳sourcemap文件，須要身份認證，咱們生成一下API tokens，點開左邊API keys選項,點擊右上角 create new token，勾選project:write

確認，create token，生成的auth token就是咱們須要的。

3.2 安裝

npm install @sentry/webpack-plugin -D

3.3 使用

在build/webpack.prod.conf.js文件中引入並使用

    const SentryPlugin = require('@sentry/webpack-plugin');
    new SentryPlugin({
      release: '版本號',
      include: './dist',
      urlPrefix: '~/vueDemo/',
      ignore: ['node_modules', 'webpack.config.js'],
    })

此時還差一步，在工程根目錄下新建.sentryclirc文件，sentry_cli會默認讀取.sentryclirc文件，配置以下：

    [defaults]
    url = https://sentry.io/
    org = foresea
    project = vuexxxx
    
    [auth]
    token = 填寫咱們生成的auth token

進入項目後咱們能夠直接在地址欄讀取服務器地址， [defaults]配置按照地址欄進行配置就能夠了，token是咱們生成的auth token。

3.4 補充說明

關於SentryPlugin的配置項能夠在官網找到更詳細的說明，github.com/getsentry/s…
強調一下urlPrefix: '~/vueDemo/'這個設置，若是你的項目地址爲https://xxxx.com/vue/dist/index.html,那麼你應該設置

urlPrefix: '~/vueDemo/dist/'

要與上傳的sourcemap文件目錄保持一致，能夠在項目中的Releases目錄查看上傳的文件。爲了安全，在發佈項目的時候記得不要將sourcemap文件一同上傳，應當剔除。