vue+sentry 前端異常日誌監控

敲代碼最糟心不過遇到本身和測試的環境都OK， 客戶使用有各類各樣還復現不了的問題，被逼無奈只能走到這一步：前端異常日誌監控!

 

vue官方文檔以下推薦：

就是說， vue有錯誤機制處理errorHandler（錯誤機制處理也有errorCaptured），而Sentry利用這個鉤子函數提供了集成。

那接下來就是使用了， 首先咱們點一下上圖中的官方集成四個大字，來到了sentry官方文檔（中關於VUE的文檔）：https://sentry.io/for/vue/。

Get Started！

鑑於我跟着前人各類教程走過很多的坑， 我這筆記是要多囉嗦有多囉嗦的。

1、註冊及建立項目。

註冊地址： https://sentry.io/signup/?platform=vue

選擇vue， 建立項目。

 

 

建立項目以後會出現詳細步驟：

 

按照上圖指示，在項目目錄下安裝：@sentry/browser 和 @sentry/integrations：

# Using yarn
$ yarn add @sentry/browser
 # Using npm
$ npm install @sentry/browser

 # Using yarn
yarn add @sentry/integrations
 # Using npm
npm install @sentry/integrations

而後main.js中：

import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

Sentry.init({
  dsn: 'https://xxxxx@sentry.io/154xxxx', // 上面生成的dns
  integrations: [new Integrations.Vue({Vue, attachProps: true})],
});

這時候， 就能夠美滋滋的在開發環境和生產環境等各類環境上傳異常報告了。

不過你會發現，開發環境的控制檯沒有報錯信息了， 只須要配置： logErrors: true就能夠了。

而後， 咱們可能須要一個版本信息， 以便肯定問題是哪一個版本的問題，例如：release: test@1.0.1。

固然，你會以爲開發環境徹底不須要上傳日誌啊，那就加個判斷吧。

綜上所述，main.js代碼變成了這樣：

process.env.NODE_ENV === "production" && Sentry.init({
  dsn: 'https://xxxxxx@sentry.io/15xxxxx',
  integrations: [new Integrations.Vue({Vue, attachProps: true})],
  release: 'test@1.0.2',
  logErrors: true
});

本身隨便寫個按鈕打印個未定義的屬性， 好比console.log(abcd.efg)

效果以下：

 點進去：

 

 

 看着一大堆的東西，不過看不懂定位不到問題沒啥用！由於上傳的都是壓縮文件！

 

2、上傳Map文件

我踩得坑都在這一步了，有些教程坑爹啊，配置文件名均可以寫錯的，填坑填了八百年，強烈譴責！

1. 首先，咱們須要安裝@sentry/webpack-plugin

# Using yarn
$ yarn add @sentry/webpack-plugin --dev

# Using npm
$ npm install @sentry/webpack-plugin -D

2. 在引用插件前， 先找到config/prod.env.js幹一件別的事：

// config/prod.env.js

'use strict'
const release = "test@1.0.1";
process.env.RELEASE_VERSION = release;
module.exports = {
  NODE_ENV: '"production"',
  RELEASE_VERSION: `"${release}"`
}

這裏是爲了統一一下上傳的版本， 由於Sentry.init 和 上傳sourceMap的配置須要統一的版本號。

3. 而後在項目根目錄下新建.sentryclirc文件夾，必定不要寫錯文件名！！否則你就哭吧。

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

[auth]
token=token

防止某些寶寶照抄混亂，再解釋下其中參數具體是什麼：

url：上傳的服務器根目錄，本身不搭建服務器不用改。

org：這個可不是瞎寫的，還記得註冊的時候填的組織嗎？不記得？不要緊，看下圖： 

        

 再或者：

        

project：看上圖，就是你的項目名字。

token：這個須要生成， 點擊下圖右上角的Creat New Token：

而後勾選project：write， 生成Token

 

 生成後粘貼過來就好了。

4. 引入並配置插件:

build/webpack.prod.conf.js

const SentryCliPlugin = require("@sentry/webpack-plugin");

 plugins: [
    new SentryCliPlugin({
      include: "./dist", // 做用的文件夾
      release: process.env.RELEASE_VERSION, // 一致的版本號
      configFile: "sentry.properties", // 不用改
      ignore: ['node_modules', 'webpack.config.js'],
      urlPrefix: "~/claimform/"  // 注意這個，解釋往下看。
    })
]

urlPrefix： 關於這個，是要看你線上項目的資源地址，好比

好比， 你前端訪問頁面是http://test.com.cn/test1/#/login, 同時你的資源地址是http://test.com.cn/test/static/js/app.xxxxxx.js，

那麼， 你的urlPrefix: "~/test/"（注意：非ip地址test1）

怎麼看資源地址呢， 例如谷歌瀏覽器， F12控制檯， 或者去Application裏面找到對應資源打開。

 

 

再或者， 打開你的項目config/index.js, 看看build下打的的assetsPublicPath是什麼，若是是: assetsPublicPath: '/test/', 那你的urlPrefix: "~/test/"就是這個， 若是是‘/’那恭喜你的urlPrefix能夠不用配置了。

而後yarn build / npm run build。

怎麼查看上傳的效果呢：

 點進去：

 

效果：

 

 　　或者：

 再看咱們的報錯信息， 清楚的看見代碼了：

 4、build報錯解決:

1. ERROR in Sentry CLI Plugin: Command failed: E:\project\claimform\node_modules\@sentry\cli\sentry-cli.exe releases new claimform@1.0.3

error: project not found

Add --log-level=[info|debug] or export SENTRY_LOG_LEVEL=[info|debug] to see more output.
Please attach the full debug log to all bug reports.

 

 這個錯誤， 多是你的org或者project配置錯誤，因此找不到項目， 參照第二點的配置。

2. ERROR in Sentry CLI Plugin: Command failed: E:\project\claimform\node_modules\@sentry\cli\sentry-cli.exe releases new claimform@1.0.3

error: project not found

Add --log-level=[info|debug] or export SENTRY_LOG_LEVEL=[info|debug] to see more output.
Please attach the full debug log to all bug reports.

 這個， 多是由於你的配置文件名.sentryclirc寫錯了！

3. 

~/static/js/app.xxxxxxxxxxx.js (no sourcemap ref)
- warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/static/js/app.xxxxxxxxx.js.)

 你項目打包時候關閉了生成map文件： config/index.js 

build {

　　productionSourceMap: true, // true表示生成map文件

}