前端异常日志监控 - Sentry使用

使用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使用教程