手摸手教你搭建前端报错收集系统Sentry(上)

3,986

前言

前端开发时有没有遇见这种情况?

客户:为什么我这个页面看不到数据??
我:(急忙打开网站),我这边数据显示正常!
客户:没有啊!我这边看不到!
我:(语无伦次),可我...我这边正常的呀
客户:BALABALA

我能怎么办?我也很绝望啊。。我也不知道客户咋玩出来的啊。。一脸蒙圈。。

现在你们的救星来了。。。sentry。。简单几步就能让你快速定位到用户报错位置 本文结合vue-cli3一步一步教你配置属于你的项目的sentry

官网

学习一个框架,最好的就是先收藏他的官网链接(全是英文。。。脑袋疼)

官网链接:sentry

注册账户

  • 首先注册一个账户(测试玩玩可以用自己的,公司项目还是用公司邮箱吧),注册时组织千万别乱填,这玩意很重要,后面很多地方都需要
  • 注册账户完成后注册项目

项目名称也不能乱写后面也有用的,选择自己的语言(vue居然还要搜索,我大VUE为何沦落至此?)

注册完项目后你就做好了前置准备了

引入项目

简单引入的话

然后进入项目页面,继续选语言(其实这里可以改的,比如你项目从vue-react)

然后引入简单引入方式就出来了这时,为了某些童鞋懒我再整理了一下

cnpm install @sentry/browser

cnpm 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: 'https://32ad19d9b80448f593f1df2833256d23@o406425.ingest.sentry.io/5273959',
    integrations: [new VueIntegration({Vue, attachProps: true})],
 })

  地址最后的是项目编码,如果你一个账户有多个项目,每个是不同的,不清楚的话就按这个顺序走一遍就出来。   这时简单的错误收集机制就已经完成了,当你项目中前端报错时,你在请求里就会看到有一个请求将错误发向服务器,然后你能在项目中看到报错信息了,是不是非常简单?

  高兴之余仔细一看,这特瞄的都报的啥错?完全看不懂啊?因为正式环境的代码都是进行了丑化,没有.map文件就是报错了你也不知道具体位置。这知道和没知道简直没有区别啊

这时候我们就要进入第二步,将.map文件上传到服务器

上传sourceMap

准备工作:

  1. 打包文件中首先需要用.map文件 vue-cli3中是在vue.config.js中
module.exports{
    XXXXX:XXXX,
    configureWebpack:{
        XXX:XXX
    },
    productionSourceMaptrue//正式环境开启sourseMap
}

这时候打包看是否有.map文件了?如果有了,第一步就完成了

2.准备上传 这时候我们需要一个webpack插件@sentry/webpack-plugin 首先就是安装插件

cnpm i @sentry/webpack-plugin --save-dev

然后在根节点处创建文件.sentryclirc(标准配置文件的命名方式)

[auth]
token="你的token"

[defaults]
url = https://sentry.io
org = 前面提到的组织名
project = 前面提到的项目名

token获取方式

如果没有token就注册一个

3.在全局环境变量中加入上传代码的版本号RELEASE_VERSION vue-cli3是在根目录下创建.env.production , .env.production文件(这里不知道的童鞋自己百度vue-cli3多环境配置这里不再赘述) .env.production 文件内容

NODE_ENV='production'
RELEASE_VERSION ="test002"//这里的版本号命名你开心就好,专业一点就v1.0.0这是测试

4.在vue.config.js中weapack的配置项plugins加入插件

const SentryCliPlugin = require('@sentry/webpack-plugin')

configureWebpack:{
    plugins:[
        new SentryCliPlugin({
            include"./dist/"// 作用的文件夹,如果只想js报错就./dist/js
            release: process.env.RELEASE_VERSION, // 一致的版本号
            configFile: "sentry.properties"// 不用改
            ignore: ['node_modules''webpack.config.js'],
            urlPrefix"~/",//这里指的你项目需要观测的文件如果你的项目有publicPath这里加上就对了
         })
    ]
}

在插件初始化的地方也要加上版本号 所以main.js也要改成

Sentry.init({
  dsn'XXX',
  integrations: [new VueIntegration({Vue, attachPropstrue})],
  release: process.env.RELEASE_VERSION
});

这时候再打正式包。。有点小慢。。抽根烟。。因为文件要穿服务器,速度也和网速挂钩,加上有.map文件所以很慢,如果实在太慢的同学,请移步我另一篇文章vue-webapck打包优化,就会秒秒钟解决问题

这就是打包上传成功了,美滋滋,实在心里没底可以登录我们管理平台看看到底有没有

这里我们看到这就是我们之前定义的项目名称,点击项目名称

点这里。没错就是点这里,屠龙宝刀点击就送,我们就看到了我们需要打.map文件,这时候我们部署上去(这里测试可以在本地跑个服务,做个简单的报错比如abdc(),就会报abcd不是方法),报个错看看

妈妈再也不用担心我找不到错了 好好开心!!!!

留在后面

  现在服务器所有报错我们都可以搜集了,但是还有许多问题,比如我开发调试的时候,我的报错也会发出来,那么多错,我看的岂不是头都大了?正式服务器开启了.map,别人拷贝我的网站不要太简单。。。。

预知后事如何,请听下回分解

手摸手教你搭建前端异常处理系统(下)