敲代碼最糟心不過遇到自己和測試的環境都OK， 客戶使用有各種各樣還復現不了的問題，被逼無奈只能走到這一步：前端異常日志監控!
vue官方文檔如下推薦：
就是說， vue有錯誤機制處理errorHandler（錯誤機制處理也有errorCaptured），而Sentry利用這個鈎子函數提供了集成。
那接下來就是使用了， 首先我們點一下上圖中的官方集成四個大字，來到了sentry官方文檔（中關於VUE的文檔）：https://sentry.io/for/vue/。
Get Started！
鑒於我跟着前人各種教程走過不少的坑， 我這筆記是要多啰嗦有多啰嗦的。
一、注冊及創建項目。
注冊地址： 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)
效果如下：
點進去：
看着一大堆的東西，不過看不懂定位不到問題沒啥用！因為上傳的都是壓縮文件！
二、上傳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。
怎么查看上傳的效果呢：
點進去：
效果：
或者：
再看我們的報錯信息， 清楚的看見代碼了：
四、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 {
}