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

佩子發表於2018-11-28
前端WebPlugin

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,點選建立專案

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

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

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

選擇確定，進入專案，預設頁面如下，注意位址列用紅色圈出的部分，在上傳sourcemap的時候將用到，右上角圈出來的Environment可以在初始化的時候進行設定，檢視錯誤的時候我們可以選擇測試或者生產的資料：

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

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

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

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

確認，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

前端日誌監控平臺sentry使用 @sentry/browser @sentry/webpack-plugin
進入專案後我們可以直接在位址列讀取伺服器地址， [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檔案一同上傳，應當剔除。

相關文章