前端错误监控 -【Vue】与【Sentry】的结合

前言

做为一个前端，你是否是常常遇到这样状况：

客户：为何我这个页面看不到数据？？
我：（急忙打开网站），我这边数据显示正常！
客户：没有啊！我这边看不到！
我：（语无伦次），可我...我这边正常的呀
客户：BALABALA

相信各位前端er常常遇到这样的问题，明明本身本机打开一切正常，到了客户那边问题却一大堆，还根本定位不到问题，总不能叫客户打开 F12 查看控制台看下什么错误吧！所以本文主要介绍如何将 vue 与 sentry 结合，达到实时监控并收集错误日志的效果。

不知道 sentry ？赶忙看我上一篇文章 记一次Sentry部署过程

Vue与Sentry初步结合

搭建好 Sentry 后，点击建立项目，选 Browser -> Vue，建立完成后，能够按照里面的提示或者 官网 的教程来操做，步骤以下：

// 安装官方提供的库
yarn add @sentry/browser
yarn add @sentry/integrations
复制代码

在 main.js 文件里面添加下面一段代码

import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'

Sentry.init({
    dsn: 'http://<publickey>:<secretkey>@xxx.xxx.xxx.xxx:9000/<project id>',
    integrations: [
    new Integrations.Vue({
        Vue,
        attachProps: true
    })
    ]
})
// 关于 DSN 我在上一篇有介绍到
复制代码

添加完毕后，咱们 npm run dev 来看下吧，随便在某个组件地方制造一个错误

而后让咱们来打开看下有没有收集到这个错误日志，成功的话应该像以下图片

代表咱们刚才触发的错误已经被 sentry 成功捕获到了，能够点击进去查看详情

能够看到错误了 this.aa is not a function，这样咱们已经初步成功的将 vue 和 sentry 结合上了

Sourcemap结合

上面咱们已经成功的在 vue 中集成了 sentry 并捕获到了错误，可是不是发现了一个问题，虽然知道错误内容，但是咱们不知道具体在哪一个组件的哪一行。这是由于用 webpack 打包过程当中会将js文件进行压缩混淆等，所以要准肯定位到错误，须要咱们将 sourcemap 也上传一份供 sentry 解析，这里提供了两种方式，能够在 官网 中查看资料

sentry-cli
@sentry/webpack-plugin

这里我选择 sentry-cli 来完成，@sentry/webpack-plugin 主要是用来webpack打包时候同时上传一份 sourcemap 到 sentry

全局安装 @sentry/cli

npm i -g @sentry/cli
复制代码

安装完毕后，进入网站生成 auth token，具体步骤以下：

点击 帐号->API keys，点击 Create New Token

按照下图，记得 project:releases 和 project:write 要勾选上

生成完成 token 后能够进行下一步，进入项目的根目录，执行

sentry-cli --url http://xxx.xxx.xxx.xxx:9000 login
复制代码

这里由于咱们上面已经成功生成了 auth token，因此输入 n 后会提示你输入刚才那个token，这样就配置完成了

下一步咱们在 sentry 要给你的项目先设置一个版本号，这样它才知道要对应去找哪里的 sourcemap 进行解析

# sentry-cli releases -o 组织名 -p 项目名 new 版本号
sentry-cli releases -o sentry -p vue new pro@1.0.1
# Created release pro@1.0.1.
复制代码

组织名 能够在你帐号里面看到，这样已经建立完成一个新的版本，咱们能够打开网站看下，已经有咱们刚建立的版本号了

而后咱们须要在 main.js 文件当中修改下咱们的配置

Sentry.init({
    dsn: 'http://<publickey>:<secretkey>@xxx.xxx.xxx.xxx:9000/<project id>',
    release: 'pro@1.0.1', // 新增长的+
    integrations: [
    new Integrations.Vue({
        Vue,
        attachProps: true
    })
    ]
})
复制代码

配置完成后，执行 npm run build 打包，接下来就是把 sourcemap 上传到 sentry

sentry-cli releases -o 组织名 -p 项目名 files 版本号 upload-sourcemaps 打包后js的目录 --url-prefix 线上js访问地址

sentry-cli releases -o sentry -p vue files dev@1.0.1 upload-sourcemaps dist\static\js --url-prefix ~/static/js
复制代码

特别注意！！，这个 --url-prefix 是你线上访问到js文件的路径，~ 就是你网站的根目录，好比我网站的静态文件是这样 http://192.168.144.163:8080/static/js/xxxx.js，那么按照上面例子填就是正确的，由于我网站根目录就是 http://192.168.144.163:8080，上传成功后能够在 Releases -> Artifacts 中看到刚才上传的文件

在本地简单起一个 nginx 配置下，由于在 dev 环境下是访问不到 sourcemap，因此必须在 prod 环境下才能测试，继续简单触发一个错误，在网站上查看，会发现多了查看源码的选项

这样咱们就能够成功定位到问题具体出如今哪一个文件的哪一行，要删除map文件的话能够执行

sentry-cli releases -o 组织名 -p 项目名 files 版本号 delete --all

sentry-cli releases -o sentry -p vue files dev@1.0.1 delete --all
复制代码

综上，基本就完成了 vue 与sentry 的结合了，美中不足的可能就是每次发布版本的话可能须要手动上传一次 sourcemap 文件，有兴趣的能够研究下 webpack 插件 @sentry/webpack-plugin ，在打包的同时上传到 sentry 去。

可能遇到的问题

其中花费时间比较久的一个问题是在上传 sourcemap 文件的操做中，这个 --url-prefix 的值必定要准确，而且不须要用引号包裹，要注意，通常若是文件确实上传成功了，但仍是没显示具体在哪一行的话，大部分缘由仍是可能 sourcemap 文件地址不正确，致使访问不到，因此解析不了，这点要注意！

小结

搭建完成后，一旦有错误时咱们就能够实时收集到，并能够看到错误的具体详情，分析而后排查问题，对于一些偶现的BUG颇有做用，固然，sentry 能作到的只是查找你代码上发生的问题，对于业务上的错误仍是要经过其余一些方法记录啦！

有问题的欢迎在下方留言，尽可能解答。文中有错误的也欢迎指出！