如何使用 Sentry 监控 Vue 项目的错误日志

  • A+
所属分类:前端开发

Sentry 是一个开源的错误追踪工具,可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误。官方支持两种安装和运行 sentry 服务器的方法,Docker 和 Python ,推荐使用 Docker ,当然对于刚开始接触 sentry 的同学,也可以直接使用官方提供的免费服务,但是有一些限制。下面先来介绍一下利用官方的免费服务,在前端项目中如何使用 Sentry 。

一、在项目中使用 Sentry

1、首先需要在 sentry 的官网注册一个账号,注册完选择新建一个项目, sentry 支持多种框架,在其中选择 Vue 创建项目。(官网地址

2、创建项目页面会自动跳转到如何配置 vue 项目页面,接下来就按照指引在代码里引入 sentry ,可以通过  npm 方式直接引入。

  1. npm install @sentry/browser
  2. npm install @sentry/integrations

3、在 main.js 文件里面添加下面一段代码,dsn 的参数是我们刚才在创建项目的时候系统会自动生成。如果不传这个参数, sentry 不会发送错误。

  1. // main.js
  2. import * as Sentry from '@sentry/browser';
  3. import * as Integrations from '@sentry/integrations';
  4. Sentry.init({
  5.     dsn: 'https://69a9b3684e0149aa95478420c7377b97@sentry.io/1487920',
  6.     integrations: [new Integrations.Vue({Vue, attachProps: true})],
  7. });

4、添加完毕后,随便在代码中故意写一个异常错误,然后 npm run dev ,打开控制台 --> Network 来看下

发现产生了一个请求,然后我们来打开看下有没有收集到这个错误日志,成功的话应该像如下图片

表明我们刚才触发的错误已经被 sentry 成功捕获到了,可以点击进去查看详情

可以看到错误了  this.sentry is not a function ,这样我们已经初步成功的将 vue 和 sentry 结合上了

二、定位错误信息方法(@sentry-cli)

上面我们已经成功的在 vue 中集成了 sentry 并捕获到了错误,但是发现了一个问题,虽然知道错误内容,可是我们不知道具体在哪个组件的哪一行。这是因为用 webpack 打包过程中会将js文件进行压缩混淆等,因此要准确定位到错误,需要我们将 sourcemap 也上传一份供 sentry 解析,这里提供了两种方式(@sentry-cli@sentry/webpack-plugin),可以在 官网 中查看资料。

1、你可以全局安装或者只在当前项目中安装 @sentry/cli

  1. // 全局安装
  2. npm install @sentry/cli -g

2、安装完毕后,进入网站生成 auth token,具体步骤如下:点击 账号 --> API keys,点击 Create New Token

3、按照下图,记得 project:releasesproject:write 要勾选上

4、生成完成 token 后可以进行下一步,进入项目的根目录,执行

  1. sentry-cli --url https://sentry.io login

这里因为我们上面已经成功生成了 auth token,所以输入 n 后会提示你输入刚才那个 token,这样就配置完成了。

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

  1. # sentry-cli releases -o 组织名 -p 项目名 new 版本号
  2. sentry-cli releases -o zhuqiming -p sentry-for-vue new pro@1.0.0

组织名和项目名可以在自己账户的基本信息中找到,版本号可以自己自定义。

6、然后我们需要在 main.js 文件当中修改下我们的配置

  1. process.env.NODE_ENV === 'production' && Sentry.init({
  2.     dsn: 'https://69a9b3684e0149aa95478420c7377b97@sentry.io/1487920',
  3.     release: 'pro@1.0.0',
  4.     integrations: [new Integrations.Vue({Vue, attachProps: true})],
  5. });

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

  1. # sentry-cli releases -o 组织名 -p 项目名 files 版本号 upload-sourcemaps 打包后js的目录 --url-prefix 线上js访问地址
  2. sentry-cli releases -o zhuqiming -p sentry-for-vue files pro@1.0.0 upload-sourcemaps dist/static/js --url-prefix http://172.28.62.21:9089/static/js/

注意:这个 --url-prefix 是你线上访问到js文件的路径,~ 就是你网站的根目录,比如我网站的静态文件是这样 http://172.28.62.21:9089/static/js/xxxx.js,那么按照上面例子填就是正确的,因为我网站根目录就是 http://172.28.62.21:9089,上传成功后可以在 Releases -> Artifacts 中看到刚才上传的文件

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

这样我们就可以成功定位到问题具体出现在哪个文件的哪一行,要删除map文件的话可以执行

  1. # sentry-cli releases -o 组织名 -p 项目名 files 版本号 delete --all
  2. sentry-cli releases -o zhuqiming -p sentry-for-vue files pro@1.0.0 delete --all

现在基本就完成了 vue 与sentry 的结合了,美中不足的可能就是每次发布版本的话可能需要手动上传一次 sourcemap 文件。

三、定位错误信息方法(@sentry/webpack-plugin)

sentry 官方同样提供了 webpack 插件可以实现在 npm run build 的时候自行上传相应的文件,避免每次都需要输入sentry-cli 命令的麻烦。

1、安装 sentry-webpack-plugin 插件

  1. npm install @sentry/webpack-plugin --save-dev

2、在项目的根目录下创建一个文件 .sentryclirc 并配置

  1. [defaults]
  2. url=https://sentry.io/
  3. org=组织名称
  4. project=项目名称
  5. [auth]
  6. token=你的sentry账号下生成的API Token

3、创建项目的版本号

  1. # sentry-cli releases -o 组织名 -p 项目名 new 版本号
  2. sentry-cli releases -o zhuqiming -p sentry-for-vue new pro@1.0.0

4、修改 main.js 文件的配置

  1. process.env.NODE_ENV === 'production' && Sentry.init({
  2. dsn: 'https://69a9b3684e0149aa95478420c7377b97@sentry.io/1487920',
  3. release: 'pro@1.0.0',
  4. integrations: [new Integrations.Vue({Vue, attachProps: true})],
  5. });

5、更新 webpack.prod.conf.js 打包配置文件

  1. // webpack.prod.conf.js
  2. const SentryPlugin = require('@sentry/webpack-plugin');
  3. // 在plugins:[]里面加入此代码
  4. new SentryPlugin({
  5.             release: 'pro@1.0.0',                           //发布的版本
  6.             include: path.join(__dirname, '../dist/static/js/'), //需要上传到sentry服务器的资源目录,会自动匹配js 以及map文件
  7.             ignore: ['node_modules', 'webpack.config.js'],  //  忽略文件目录,当然我们在inlcude中制定了文件路径,这个忽略目录可以不加
  8.             configFile: '.sentryclirc',   //  使用了类似于java的properties配置文件,里面包含了 -o组织 -p项目 以及authtoken
  9.             urlPrefix: '~/static/js'           //  线上对应的url资源的相对路径 比如我的域名是 http://mydomin.com/,静态资源都在 static文件夹里面,
  10.         })

配置完成后,执行 npm run build 打包,webpack 会把 sourcemap 上传到 sentry 中,这样也是可以成功定位到问题具体出现在哪个文件的哪一行。

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: