vue项目配置sentry实现前端异常日志监控

1. sentry介绍

1. 随着 Web 应用越来越强大，代码越来越复杂，很多时候会遇到自己和测试的环境都OK， 客户使用时却有各种各样还复现不了的问题。因为测试永远无法做到100%覆盖，用户也不会总是按照我们所预期的进行操作，因此我们需要在系统异常时主动对其进行收集上报，以制定解决方案。当正式环境中产生了一个 bug ，做到迅速报警，找到问题原因，修复后还可以在线上进行验证，这个时候我们就需要一个高效的错误监控系统，Sentry 就是一个这样的工具。
2. Sentry的中文名是哨兵，正如其名它可以实时监控生产环境上的系统运行状态，发生异常会第一时间把报错的路由路径、错误所在文件等详细信息统计出来，并且利用错误信息的堆栈跟踪快速定位到需要处理的问题。
3. vue官方文档也进行了推荐
   
   vue有错误机制处理errorHandler（错误机制处理也有errorCaptured），而Sentry利用这个钩子函数提供了集成。
   sentry官方文档：sentry

2. sentry的使用

公司配置好了sentry服务，我们只需要用自己邮箱进行注册并联系管理员通过就行了。

1. 注册
   

2. 创建sentry项目
   注册完成可以登录之后，我们就要新建项目来进行配置。新注册的用户可能无法直接创建，需要加入Teams之后才能创建，创建项目选择类型后根据使用的技术栈选择不同的技术进行创建。
   

根据提示信息创建完成后会出现详细的步骤：
![步骤](https://img-blog.csdnimg.cn/20201203172014528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjU0MzE5OA==,size_16,color_FFFFFF,t_70

3. sentry在项目上的配置
   首先在项目中安装所需要的依赖

npm install @sentry/browser

npm install @sentry/integrations

在项目的main.js中添加：

import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import { Vue as VueIntegration } from '@sentry/integrations';

Sentry.init({
  dsn: 'http://xxx@xxx/xx',//创建项目后生成的dns
  integrations: [new VueIntegration({Vue, attachProps: true})],
});

配置完成后就可以自动上传异常报错了，但是控制台会没有报错信息，我们要在init里面加上

logErrors: true

然后在首页或者别的页面按钮里面随便加一个未定义的属性测试一下就可以了。

当然这个时候是不分线上和本地的，如果在开发过程中这个配置也是实时生效的，这样就会多很多一些没有意义的报错信息，甚至刷爆列表。我们可以在main.js加入下面判断来区分线上

process.env.NODE_ENV === "production"