前言
前端开发时有没有遇见这种情况?
客户:为什么我这个页面看不到数据??
我:(急忙打开网站),我这边数据显示正常!
客户:没有啊!我这边看不到!
我:(语无伦次),可我...我这边正常的呀
客户:BALABALA
我能怎么办?我也很绝望啊。。我也不知道客户咋玩出来的啊。。一脸蒙圈。。
现在你们的救星来了。。。sentry。。简单几步就能让你快速定位到用户报错位置 本文结合vue-cli3一步一步教你配置属于你的项目的sentry
官网
学习一个框架,最好的就是先收藏他的官网链接(全是英文。。。脑袋疼)
官网链接:sentry
注册账户
- 首先注册一个账户(测试玩玩可以用自己的,公司项目还是用公司邮箱吧),注册时组织千万别乱填,这玩意很重要,后面很多地方都需要
- 注册账户完成后注册项目
注册完项目后你就做好了前置准备了
引入项目
简单引入的话
然后进入项目页面,继续选语言(其实这里可以改的,比如你项目从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
准备工作:
- 打包文件中首先需要用.map文件 vue-cli3中是在vue.config.js中
module.exports{
XXXXX:XXXX,
configureWebpack:{
XXX:XXX
},
productionSourceMap: true//正式环境开启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, attachProps: true})],
release: process.env.RELEASE_VERSION
});
这时候再打正式包。。有点小慢。。抽根烟。。因为文件要穿服务器,速度也和网速挂钩,加上有.map文件所以很慢,如果实在太慢的同学,请移步我另一篇文章vue-webapck打包优化,就会秒秒钟解决问题
这就是打包上传成功了,美滋滋,实在心里没底可以登录我们管理平台看看到底有没有 这里我们看到这就是我们之前定义的项目名称,点击项目名称 点这里。没错就是点这里,屠龙宝刀点击就送,我们就看到了我们需要打.map文件,这时候我们部署上去(这里测试可以在本地跑个服务,做个简单的报错比如abdc(),就会报abcd不是方法),报个错看看 妈妈再也不用担心我找不到错了 好好开心!!!!留在后面
现在服务器所有报错我们都可以搜集了,但是还有许多问题,比如我开发调试的时候,我的报错也会发出来,那么多错,我看的岂不是头都大了?正式服务器开启了.map,别人拷贝我的网站不要太简单。。。。