使用Sentry进行错误日志的捕捉，以便在前端运行发生错误的时候，可以直接定位到错误的位置。
初步配置
在Vue 2.x中， Vue官方加入了errorHandler用来捕捉产生的错误并进行处理。Sentry的Vue集成便使用了这种方式进行官方集成，这里针对Webpack的配置进行讲解。
安装
npm install raven-js --save
使用
import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
Raven
.config('your DSN')
.addPlugin(RavenVue, Vue)
.install();
DSN 指的是Sentry为每个项目配置的用来接入服务的链接。我们可以在项目设置中找到它。
DSN
效果
然后打包运行项目并将dist文件夹放在服务器上就可以捕获错误信息了。捕捉到的错误信息如下所示。其中会包含用户的IP信息，浏览器信息和系统信息，方便进行错误的复现。同时会展示错误所在的具体行数，方便定位错误。
错误信息
在上图中，我们可以看见错误，这个和我们的源代码的异常信息是一致的，但是在下方的JS调用堆栈中，对应的是压缩后JS文件位置，和我们的源代码无法对应上，无法直接的帮助我们排查和定位问题。如果想要错误对应上我们源代码的位置，sentry要求我们上传JS压缩时的Sourcemaps。
Sentry Webpack Plugin
使用Sentry Webpack Plugin配合Webpack完成构建时上传SourceMaps。文档
获取API TOKEN
API
Token
创建Token，并确保勾选了project:write
安装插件
npm install @sentry/webpack-plugin --dev-save
添加配置文件.sentryclirc
在项目的根目录下，添加配置文件.sentryclirc
[defaults]
url = https://sentry.io/
org = test-mb
project = myblog
[auth]
token =xxxxxxx
更新webpack.prod.conf.js
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
plugins : [
new SentryWebpackPlugin ({
release: process.env.RELEASE,
include: './dist',
ignore : ['node_modules']
})
]
以上步骤更新完后，重新打包编译文件并运行。
Sourcemap上传后的错误显示效果
效果
此时的错误提示，看起来和我们的源代码是一样的，在这种方式下，可以直观，高效的定位排查问题。
参考：前端错误日志监控——Sentry使用教程
网友评论