Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误。官方支持两种安装和运行 sentry 服务器的方法，Docker 和 Python ，推荐使用 Docker ，当然对于刚开始接触 sentry 的同学，也可以直接使用官方提供的免费服务，但是有一些限制。下面先来介绍一下利用官方的免费服务，在前端项目中如何使用 Sentry 。
一、在项目中使用 Sentry
1、首先需要在 sentry 的官网注册一个账号，注册完选择新建一个项目， sentry 支持多种框架，在其中选择 Vue 创建项目。（官网地址）
2、创建项目页面会自动跳转到如何配置 vue 项目页面，接下来就按照指引在代码里引入 sentry ，可以通过 npm 方式直接引入。
- npm install @sentry/browser
- npm install @sentry/integrations
3、在 main.js 文件里面添加下面一段代码，dsn 的参数是我们刚才在创建项目的时候系统会自动生成。如果不传这个参数， sentry 不会发送错误。
- // main.js
- import * as Sentry from '@sentry/browser';
- import * as Integrations from '@sentry/integrations';
- Sentry.init({
- dsn: 'https://69a9b3684e0149aa95478420c7377b97@sentry.io/1487920',
- integrations: [new Integrations.Vue({Vue, attachProps: true})],
- });
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
- // 全局安装
- npm install @sentry/cli -g
2、安装完毕后，进入网站生成 auth token，具体步骤如下：点击 账号 --> API keys，点击 Create New Token
3、按照下图，记得 project:releases 和 project:write 要勾选上
4、生成完成 token 后可以进行下一步，进入项目的根目录，执行
- sentry-cli --url https://sentry.io login
这里因为我们上面已经成功生成了 auth token，所以输入 n 后会提示你输入刚才那个 token，这样就配置完成了。
5、下一步我们在 sentry 要给你的项目先设置一个版本号，这样它才知道要对应去找哪里的 sourcemap 进行解析
- # sentry-cli releases -o 组织名 -p 项目名 new 版本号
- sentry-cli releases -o zhuqiming -p sentry-for-vue new pro@1.0.0
组织名和项目名可以在自己账户的基本信息中找到，版本号可以自己自定义。
6、然后我们需要在 main.js 文件当中修改下我们的配置
- process.env.NODE_ENV === 'production' && Sentry.init({
- dsn: 'https://69a9b3684e0149aa95478420c7377b97@sentry.io/1487920',
- release: 'pro@1.0.0',
- 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 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文件的话可以执行
- # sentry-cli releases -o 组织名 -p 项目名 files 版本号 delete --all
- 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 插件
- npm install @sentry/webpack-plugin --save-dev
2、在项目的根目录下创建一个文件 .sentryclirc 并配置
- [defaults]
- url=https://sentry.io/
- org=组织名称
- project=项目名称
- [auth]
- token=你的sentry账号下生成的API Token
3、创建项目的版本号
- # sentry-cli releases -o 组织名 -p 项目名 new 版本号
- sentry-cli releases -o zhuqiming -p sentry-for-vue new pro@1.0.0
4、修改 main.js 文件的配置
- process.env.NODE_ENV === 'production' && Sentry.init({
- dsn: 'https://69a9b3684e0149aa95478420c7377b97@sentry.io/1487920',
- release: 'pro@1.0.0',
- integrations: [new Integrations.Vue({Vue, attachProps: true})],
- });
5、更新 webpack.prod.conf.js 打包配置文件
- // webpack.prod.conf.js
- const SentryPlugin = require('@sentry/webpack-plugin');
- // 在plugins:[]里面加入此代码
- new SentryPlugin({
- release: 'pro@1.0.0', //发布的版本
- include: path.join(__dirname, '../dist/static/js/'), //需要上传到sentry服务器的资源目录,会自动匹配js 以及map文件
- ignore: ['node_modules', 'webpack.config.js'], // 忽略文件目录,当然我们在inlcude中制定了文件路径,这个忽略目录可以不加
- configFile: '.sentryclirc', // 使用了类似于java的properties配置文件,里面包含了 -o组织 -p项目 以及authtoken
- urlPrefix: '~/static/js' // 线上对应的url资源的相对路径 比如我的域名是 http://mydomin.com/,静态资源都在 static文件夹里面,
- })
配置完成后，执行 npm run build 打包，webpack 会把 sourcemap 上传到 sentry 中，这样也是可以成功定位到问题具体出现在哪个文件的哪一行。
博主只是一名前端的小白，只是把自己用到的知识分享一下，要是有什么不对的地方，欢迎大家提出~~
评论