内容简介:作为一个前端,你是不是经常遇到这样情况:客户:为什么我这个页面看不到数据??相信各位前端er经常遇到这样的问题,明明自己本机打开一切正常,到了客户那边问题却一大堆,还根本定位不到问题,总不能叫客户打开
作为一个前端,你是不是经常遇到这样情况:
客户:为什么我这个页面看不到数据?? 我:(急忙打开网站),我这边数据显示正常! 客户:没有啊!我这边看不到! 我:(语无伦次),可我...我这边正常的呀 客户: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
能做到的只是查找你代码上发生的问题,对于业务上的错误还是要通过其他一些方法记录啦!
有问题的欢迎在下方留言,尽量解答。文中有错误的也欢迎指出!
以上所述就是小编给大家介绍的《前端错误监控 -【Vue】与【Sentry】的结合》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。