フロント例外ログ監視：コード最悪の心をノックが、自らの経験とテスト環境はOKです、顧客の多種多様な、まだ問題を再現することはできませんがあり、それだけでこのステップを取るように強制することができます！
VUE公式文書には、次のことをお勧めします。
すなわち、機構処理VUE誤差でのErrorHandler（また、エラー処理機構errorCapturedをセントリーこの機能が統合されたフックを提供して使用しながら、）。
次のステップはそれを使用することで、最初に我々は4文字以上の公式統合画像を指して、私たちは歩哨公式文書（VUEに関する文書）となりました：https://sentry.io/for/vue/。
はじめよう！
私の前任者の見解で、私はもっと長いったらしいの長ったらしいする方法であることに注意ピット、多くの経様々なチュートリアルが続きます。
まず、登録して、プロジェクトを作成します。
登録住所：https://sentry.io/signup/?platform=vue
VUEを選択して、プロジェクトを作成します。
プロジェクトを作成した後、詳細なステップがあります：
歩哨/ブラウザと@歩哨/統合@：プロジェクトディレクトリのインストールに示されている図によると：
糸の使用＃ $糸は@sentry追加 /ブラウザ NPM使用して＃ $ NPM @sentryインストール /ブラウザの
糸の使用＃を 糸を@sentry追加 /統合の NPMの使用＃ @sentryインストールNPMを /統合を
その後にmain.js：
import Vue from 'vue' import * as Sentry from '@sentry/browser'; import * as Integrations from '@sentry/integrations'; Sentry.init({ dsn: 'https://[email protected]/154xxxx', // 上面生成的dns integrations: [new Integrations.Vue({Vue, attachProps: true})], });
这时候， 就可以美滋滋的在开发环境和生产环境等各种环境上传异常报告了。
不过你会发现，开发环境的控制台没有报错信息了， 只需要配置： logErrors: true就可以了。
然后， 我们可能需要一个版本信息， 以便确定问题是哪个版本的问题，例如：release: [email protected]。
当然，你会觉得开发环境完全不需要上传日志啊，那就加个判断吧。
综上所述，main.js代码变成了这样：
process.env.NODE_ENV === "production" && Sentry.init({ dsn: 'https://[email protected]/15xxxxx', integrations: [new Integrations.Vue({Vue, attachProps: true})], release: '[email protected]', 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 = "[email protected]"; 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 [email protected]
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. 歩哨CLIプラグインでERROR：コマンドが失敗しました：E：\プロジェクト\ claimform \ node_modules \ @sentry \ CLI \歩哨-cli.exeリリース新しい[email protected]
エラー：プロジェクトが見つかりません。
--log-レベル=を追加[情報|デバッグ]またはエクスポートSENTRY_LOG_LEVEL = |より多くの出力を参照するには、[情報デバッグ]。
すべてのバグレポートに完全なデバッグログを添付してください。
自分のプロファイル名がこれはかもしれ.sentryclirc間違っています！
3。
〜/静的/のJS / app.xxxxxxxxxxx.js（NO sourcemapのREF）
-警告：ソースマップ参照を決定することができなかった（〜/静的/のJS / app.xxxxxxxxx.jsために参照sourcemapを自動検出できませんでした。）
あなたがプロジェクトパッケージ生成されたマップファイルを閉じるときます。config / index.js
{構築
}