Sentry + Vue3 实现前端代码监控

914 阅读1分钟

介绍

Sentry官网
Sentry可以自己搭建自己的一套后台,也可以使用Sentry自己的后台
自己搭建需要花钱购买,适用于公司。
注册个人免费账号,使用Sentry后台,有免费的数量使用。
这里以个人账号为例演示
sentry在vue中使用,官网教程

注册

注册自己的账号和密码 image.png
点击链接,跳转到注册的页面。

image.png
注册成功后会有自己账号和密码
登录Sentry的管理页面,这里会收集你代码的报错并且展示

项目接入

有账号和密码之后,会自动创建一个Sentry项目,然后在Vue项目里面配置Sentry
首先需要安装插件

npm install --save @sentry/vue

其次按照如下配置在项目里面配置

image.png
配置成功之后,运行你的项目,会收到一个报错的消息,可以在Sentry的web端看到,这个是官方例子给的一个报错提示

image.png 这样基本就配置成功了,后面如果需要在生产中看到具体的报错在哪一行,需要借助sourcemap,将代码包的sourcemap文件上传到Sentry

其余基本配置可以参数官网的文档