前端部署到线上环境后,异常信息,报错情况,不是必现的情况这就很麻烦了,这里推荐一个sentry监控系统,这个还是挺牛逼的!
看看使用效果,以WEB项目的VUE为例
这是人为的两个报错,浏览器上的调试工具上打印的,
这是sentry监控到的异常信息!!!我这里也就只简单介绍,因为详细的我不会!!!
环境准备!
- linux系统
- docker
- vue项目
系统搭建
1 docker拉取redis postsql 和sentry
docker pull redis
docker pull postgres
docker pull sentry
2.启动redis postsql 和sentry
docker run -d --name sentry-redis redis
docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=secret -e POSTGRES_USER=sentry postgres
docker run --rm sentry config generate-secret-key//这个命令运行后会生成一串密钥
docker run -it --rm -e SENTRY_SECRET_KEY='密钥' --link sentry-postgres:postgres --link sentry-redis:redis sentry upgrade
//(这一步会提示输入邮箱和密码,当然后又确认密码咯)
docker run -d -p 9000:9000 --name my-sentry -e SENTRY_SECRET_KEY='密钥' --link sentry-redis:redis --link sentry-postgres:postgres sentry
docker run -d --name sentry-cron -e SENTRY_SECRET_KEY='密钥' --link sentry-postgres:postgres --link sentry-redis:redis sentry run cron
docker run -d --name sentry-worker-1 -e SENTRY_SECRET_KEY='密钥' --link sentry-postgres:postgres --link sentry-redis:redis sentry run worker
走到这里监控端就安装完毕了
访问这个控制台http://服务器地址:9000/回车即可
创建监控项目
使用刚才的邮箱密码登入
创建监控项目,右上角Add new…选择Project
选择你要监控的项目类型,我这里是WEB项目所以选择Browser的vue
然后点击Create Project,然后就会出现在Projects界面
点击进入到这个界面,这几个红框框是关键
VUE项目配置
打开事先准备好的vue项目,命令行输入上图中第一个红框中的命令
npm install @sentry/browser
然后等待安装完成后输入第二个框中的命令
npm install @sentry/integrations
打开main.js将第三个红框中的代码复制粘贴一下
import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';
Sentry.init({
dsn: 'http://af7165b961fc44ec857be0c3234b4e34@192.168.0.177:9000/1',
integrations: [new Integrations.Vue({Vue, attachProps: true})],
});
这里注意如果main中有import Vue from ‘vue’,请不要重复导入
这里需要在第三个红框代码中加入这行代码
logError:true,
release:'pro@1.0.0'
然后随便编写错误,启动即可!!!
然后就能在监控端看到详细的错误信息
线上环境区分
创建.sentryclirc文件,对没错就是一个这个.sentryclirc,
核心配置文件
[defaults]
url=http://服务器地址:9000/
org=组织名
project=监控端项目名
[auth]
token=...........................
token的获取
粘贴出来即可!!!,这里为了更好的区分,将版本改一下
也就是main中的release的上报版本切换成1.0.1,打包放到服务器中运行
完美!!!
大框中是报错的代码,小的是监控的版本号
这两个分别对应触发错误的个数,和触发个数的人数
设置中文
注意
前端项目启动访问后出现如下报错需要切换版本
我用之前刚整合SENTRY的时候就直接使用上面的命令安装相关依赖
npm install @sentry/browser
npm install @sentry/integrations
结果导致我下载的依赖版本过高,但是我拉的镜像也是最新的版本,但是还是出了如上问题,然后我就找到之前的项目查看了相关依赖的版本,然后更改版本后从新启动就好了!有点坑!
我的版本关系如下
sentry服务端:Sentry 9.1.2
package.json
"@sentry/browser": "^5.15.5",
"@sentry/integrations": "^5.15.5",
package-lock.json
"@sentry/browser": {
"version": "5.30.0",
"resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-5.30.0.tgz",
"integrity": "sha512-rOb58ZNVJWh1VuMuBG1mL9r54nZqKeaIlwSlvzJfc89vyfd7n6tQ1UXMN383QBz/MS5H5z44Hy5eE+7pCrYAfw==",
"requires": {
"@sentry/core": "5.30.0",
"@sentry/types": "5.30.0",
"@sentry/utils": "5.30.0",
"tslib": "^1.9.3"
}
},
"@sentry/core": {
"version": "5.30.0",
"resolved": "https://registry.npmjs.org/@sentry/core/-/core-5.30.0.tgz",
"integrity": "sha512-TmfrII8w1PQZSZgPpUESqjB+jC6MvZJZdLtE/0hZ+SrnKhW3x5WlYLvTXZpcWePYBku7rl2wn1RZu6uT0qCTeg==",
"requires": {
"@sentry/hub": "5.30.0",
"@sentry/minimal": "5.30.0",
"@sentry/types": "5.30.0",
"@sentry/utils": "5.30.0",
"tslib": "^1.9.3"
}
},
"@sentry/hub": {
"version": "5.30.0",
"resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-5.30.0.tgz",
"integrity": "sha512-2tYrGnzb1gKz2EkMDQcfLrDTvmGcQPuWxLnJKXJvYTQDGLlEvi2tWz1VIHjunmOvJrB5aIQLhm+dcMRwFZDCqQ==",
"requires": {
"@sentry/types": "5.30.0",
"@sentry/utils": "5.30.0",
"tslib": "^1.9.3"
}
},
"@sentry/integrations": {
"version": "5.30.0",
"resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-5.30.0.tgz",
"integrity": "sha512-Fqh4ALLoQWdd+1ih0iBduANWFyNmFWMxwvBu3V/wLDRi8OcquI0lEzWai1InzTJTiNhRHPnhuU++l/vkO0OCww==",
"requires": {
"@sentry/types": "5.30.0",
"@sentry/utils": "5.30.0",
"localforage": "1.8.1",
"tslib": "^1.9.3"
}
},
"@sentry/minimal": {
"version": "5.30.0",
"resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-5.30.0.tgz",
"integrity": "sha512-BwWb/owZKtkDX+Sc4zCSTNcvZUq7YcH3uAVlmh/gtR9rmUvbzAA3ewLuB3myi4wWRAMEtny6+J/FN/x+2wn9Xw==",
"requires": {
"@sentry/hub": "5.30.0",
"@sentry/types": "5.30.0",
"tslib": "^1.9.3"
}
},
"@sentry/types": {
"version": "5.30.0",
"resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.30.0.tgz",
"integrity": "sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw=="
},
"@sentry/utils": {
"version": "5.30.0",
"resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.30.0.tgz",
"integrity": "sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==",
"requires": {
"@sentry/types": "5.30.0",
"tslib": "^1.9.3"
}
},
如有以上问题,可以参考我的解决方案!