敲代碼最糟心不過(guò)遇到自己和測(cè)試的環(huán)境都OK邦泄， 客戶使用有各種各樣還復(fù)現(xiàn)不了的問(wèn)題蠢琳，被逼無(wú)奈只能走到這一步：前端異常日志監(jiān)控!
vue官方文檔如下推薦：
就是說(shuō)在旱， vue有錯(cuò)誤機(jī)制處理errorHandler（錯(cuò)誤機(jī)制處理也有errorCaptured）关斜，而Sentry利用這個(gè)鉤子函數(shù)提供了集成冀值。
那接下來(lái)就是使用了伟端， 首先我們點(diǎn)一下上圖中的官方集成四個(gè)大字，來(lái)到了sentry官方文檔（中關(guān)于VUE的文檔）：https://sentry.io/for/vue/夹厌。
Get Started豹爹！
鑒于我跟著前人各種教程走過(guò)不少的坑， 我這筆記是要多啰嗦有多啰嗦的矛纹。
一臂聋、注冊(cè)及創(chuàng)建項(xiàng)目。
注冊(cè)地址： https://sentry.io/signup/?platform=vue
選擇vue或南， 創(chuàng)建項(xiàng)目孩等。
創(chuàng)建項(xiàng)目之后會(huì)出現(xiàn)詳細(xì)步驟：
按照上圖指示，在項(xiàng)目目錄下安裝：@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})],
});
這時(shí)候采够， 就可以美滋滋的在開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境等各種環(huán)境上傳異常報(bào)告了肄方。
不過(guò)你會(huì)發(fā)現(xiàn)，開(kāi)發(fā)環(huán)境的控制臺(tái)沒(méi)有報(bào)錯(cuò)信息了蹬癌， 只需要配置： logErrors: true就可以了权她。
然后， 我們可能需要一個(gè)版本信息冀瓦， 以便確定問(wèn)題是哪個(gè)版本的問(wèn)題伴奥，例如：release: test@1.0.1。
當(dāng)然翼闽，你會(huì)覺(jué)得開(kāi)發(fā)環(huán)境完全不需要上傳日志啊拾徙，那就加個(gè)判斷吧。
綜上所述感局，main.js代碼變成了這樣：
<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">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 });</pre>
自己隨便寫(xiě)個(gè)按鈕打印個(gè)未定義的屬性尼啡， 比如console.log(abcd.efg)
效果如下：
點(diǎn)進(jìn)去：
看著一大堆的東西，不過(guò)看不懂定位不到問(wèn)題沒(méi)啥用询微！因?yàn)樯蟼鞯亩际菈嚎s文件崖瞭！
二、上傳Map文件
我踩得坑都在這一步了撑毛，有些教程坑爹啊书聚，配置文件名都可以寫(xiě)錯(cuò)的，填坑填了八百年藻雌，強(qiáng)烈譴責(zé)雌续！
1. 首先，我們需要安裝@sentry/webpack-plugin
<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"># Using yarn
$ yarn add @sentry/webpack-plugin --dev
Using npm
$ npm install @sentry/webpack-plugin -D</pre>
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}"`
}
這里是為了統(tǒng)一一下上傳的版本驯杜， 因?yàn)镾entry.init 和 上傳sourceMap的配置需要統(tǒng)一的版本號(hào)。
3. 然后在項(xiàng)目根目錄下新建.sentryclirc文件夾做个，一定不要寫(xiě)錯(cuò)文件名８胄摹滚局！不然你就哭吧。
[defaults]
url=https://sentry.io/
org=org
project=project
[auth]
token=token
防止某些寶寶照抄混亂顽频，再解釋下其中參數(shù)具體是什么：
url：上傳的服務(wù)器根目錄藤肢，自己不搭建服務(wù)器不用改。
org：這個(gè)可不是瞎寫(xiě)的冲九，還記得注冊(cè)的時(shí)候填的組織嗎谤草？不記得跟束？沒(méi)關(guān)系莺奸，看下圖：
再或者：
project：看上圖，就是你的項(xiàng)目名字冀宴。
token：這個(gè)需要生成灭贷， 點(diǎn)擊下圖右上角的Creat New Token：
然后勾選project：write， 生成Token
生成后粘貼過(guò)來(lái)就行了略贮。
4. 引入并配置插件:
build/webpack.prod.conf.js
const SentryCliPlugin = require("@sentry/webpack-plugin");
plugins: [ new SentryCliPlugin({
include: "./dist", // 作用的文件夾
release: process.env.RELEASE_VERSION, // 一致的版本號(hào)
configFile: "sentry.properties", // 不用改
ignore: ['node_modules', 'webpack.config.js'],
urlPrefix: "~/claimform/" // 注意這個(gè)甚疟，解釋往下看。 })
]</pre>
<pre style="margin: 0px; padding: 0px; overflow: auto; color: rgb(0, 0, 0); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(254, 254, 242); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">urlPrefix： 關(guān)于這個(gè)逃延，是要看你線上項(xiàng)目的資源地址览妖，比如</pre>
比如， 你前端訪問(wèn)頁(yè)面是http://test.com.cn/test1/#/login, 同時(shí)你的資源地址是http://test.com.cn/test/static/js/app.xxxxxx.js揽祥，
那么讽膏， 你的urlPrefix: "~/test/"（注意：非ip地址test1）
怎么看資源地址呢， 例如谷歌瀏覽器拄丰， F12控制臺(tái)府树， 或者去Application里面找到對(duì)應(yīng)資源打開(kāi)。
再或者料按， 打開(kāi)你的項(xiàng)目config/index.js, 看看build下打的的assetsPublicPath是什么奄侠，如果是: assetsPublicPath: '/test/', 那你的urlPrefix: "~/test/"就是這個(gè)， 如果是‘/’那恭喜你的urlPrefix可以不用配置了载矿。
然后yarn build / npm run build垄潮。
怎么查看上傳的效果呢：
點(diǎn)進(jìn)去：
效果：
或者：
再看我們的報(bào)錯(cuò)信息， 清楚的看見(jiàn)代碼了：
四闷盔、build報(bào)錯(cuò)解決:
- 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.
這個(gè)錯(cuò)誤弯洗， 可能是你的org或者project配置錯(cuò)誤，所以找不到項(xiàng)目馁筐， 參照第二點(diǎn)的配置涂召。
- 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.
這個(gè)， 可能是因?yàn)槟愕呐渲梦募?strong>.sentryclirc寫(xiě)錯(cuò)了敏沉！
~/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.)
你項(xiàng)目打包時(shí)候關(guān)閉了生成map文件： config/index.js
build {
productionSourceMap: true, // true表示生成map文件
}
