当前位置: 首页 > Web前端 > JavaScript

前端异常监控实战-哨兵篇

时间:2023-03-26 20:15:49 JavaScript

一、简介什么是哨兵?Sentry是一个开源的非常强大的实时异常收集系统,可以为开发人员提供帮助、诊断、修复和优化其代码性能的能力。可以用来监控在线服务的健康状态,实时收集异常堆栈信息,可以帮助我们快速发现、定位和修复问题。为什么选择哨兵?Sentry的优点是开源,免费版可以私有化部署,安全错误信息和告警机制完善,简单易用,开发成本低,错误跟踪和状态流及时,方便,丰富的SDK社区活跃官网:https://docs.sentry.io/vue简介:https://docs.sentry.io/platforms/javascript/guides/vue/本地化部署:https://develop.sentry.dev/self-hosted/2.使用官方Saas版本使用说明直接官网注册账号使用私有化部署(采用)服务器部署先决条件Docker19.0.0+docker-compose1.28.0+2GBRAM+第一步:安装docker环境#1.安装docker//官方安装脚本curl-fsSLhttps://get.docker.com|bash-sdocker--mirrorAliyun#2.安装python3,pip3yuminstall-ypython3#3.安装docker-composepip3install-Udocker-composesecond步骤:安装sentry#1.拉源码onpremisegitclonehttps://github.com/getsentry/onpremise.git#2.执行安装脚本./install.sh>这个过程需要输入管理员账号和密码#3.启动docker-composeup-d#4.测试//访问http://localhost:9000确认安装是否成功过程中没有创建账号密码,使用以下命令创建docker-composerun--rmwebcreateuser配置邮箱(列为qq邮箱)登录qq邮箱,开启IMAP/SMTP服务,记录授权码官方文档说明:https://service.mail.qq.com/cgi-bin/help?subtype=1&&id=28&&no=1001256修改sentry/config.yml文件#################MailServer################mail.backend:'smtp'#如果要完全禁用电子邮件,请使用dummymail.host:'smtp.qq.com'mail.port:25mail.username:'1475022262@qq.com'#你用来发邮件的qq邮箱mail.password:'xxxxxxxxxxxxxx'#开启SMTP服务后得到的授权码mail.use-tls:false#邮箱mail.from:'1475022262@qq.com'重启docker集群在安装目录执行:docker-composerestart回到Sentry后台发送测试邮件最后在warningClient中配置邮件告警规则介绍以vue为例,其他技术可以查看官方文档安装依赖yarnadd@sentry/vue@sentry/tracing//importsentry相关库import*asSentryfrom'@sentry/vue'import{BrowserTracing}from'@sentry/tracing'//具体环境importsentryconst{host,hostname}=window.location//根据具体情况配置导入sentryif的环境(Config.sentryUrlList.includes(hostname)){sentry.init({app,//需要自己配置转发,处理跨域上报接口跨域问题dsn:`http://9307aa2c038946a2bf9aee60003a01b6@${host}//3`,release:process.env.VUE_APP_RELEASE,autoSessionTracking:false,//logErrors:true,integrations:[newBrowserTracing({routingInstrumentation:Sentry.vueRouterinstrument:['localhost','my-site-url.com',/^\//],}),],})}按步骤上传sourcemap,可能有本地开发,无法准确定位错误位置,部署到development/test环境正常后,通常本地开发不需要通过sentry-cli开启sentry(自动化部署会很麻烦)#第一步:全局安装npminstallsentry-cli-binary-g#第二步:登录到哨兵服务终端sentry-cli--url[servicePath]login>示例:sentry-cli--urlhttp://192.168.10.207:9000/login根据提示,打开浏览器,复制token验证身份,最后生成一个.sentrylrc文件#Step3:完成.sentrylrc文件>.sentrylrc文件如下[auth]token=64a7c07f585744cd8c60ec04e976cea48ddcb069e7794322a8c6759f3aac6edf#APItoken[defaults]url=http://192.168.10.207:9000org/name=vue#ProjectName#Step4:Uploadsourcemap(确保sourcemap文件已经构建)sentry-releasenamereleasesfiles<>upload-sourcemaps<打包后的js文件所在目录>--url-prefix<在线资源URI>>例子:sentry-clireleasesfiles1.0.0upload-sourcemaps'./dist/static/js'--url-prefix'~/static/js'>列出要上传的文件Files:sentry-clireleasesfiles1.0.0list>删除上传的文件:sentry-clireleasesfiles1.0.0delete--allBuildviawebpackplugin-@sentry/webpack-plugin(optional)由于网络问题,安装依赖很容易Report报错,使用梯子正常安装#第一步:项目安装@sentry/webpack-pluginpluginyarnadd@sentry/webpack-plugin-D#第二步:新建.sentrylrc文件>.sentrylrc文件如下[auth]token=64a7c07f585744cd8c60ec04e976cea48ddcb069e7794322a8c6759f#APItoken[defaults]url=http://192.168.10.207:9000/#服务器地址org=sentry#组织名称project=vue#项目名称#第三步:修改文件vue.config.jsvarSentryCliPlugin=require('@sentry/webpack-plugin')if(process.env.NODE_ENV==='production'){config.plugin('SentryCliPlugin').use(SentryCliPlugin,[{include:'./dist',//指定上传目录release:process.env.VUE_APP_RELEASE,//指定发布版本ignore:['node_modules'],configFile:'./.sentryclirc',//指定哨兵上传配置},])}#Step4:Type包上传后删除map文件>buildvue-cli-servicebuild&&rm-rf./dist/static/js/*.mapnpmrunbuild清除postgres数据,释放磁盘空间手动清除#使用sentry的清除工具清除dockerexec-itonpremise_web_1sentrycleanup--days7#再次运行df-h,发现还是很满。这是因为cleanup使用delete命令删除了postgresql的数据,而postgrdsql只是将相应的行标记为DEAD进行删除和更新操作,并没有真正释放磁盘空间。#清除postgres中的无效数据dockerexec-itonpremise_postgres_1vacuumdb-Upostgres-dpostgres-v-f--analyze每天定时清除超过7天的数据crontab-e#在linux中使用crontab实现定时任务#在里面输入00***dockerexec-itonpremise_web_1sentrycleanup--days7&&dockerexec-itonpremise_postgres_1vacuumdb-Upostgres-dpostgres-v-f--analyze访问githubSSO单点登录官方文档:https://develop.sentry.dev/self-hosted/sso/#github-authgithub创建应用教程:https://docs.github.com/en/developers/apps/building-github-apps/creating-a-github-app3.问题记录报告接口跨域问题使用devServer本地转发//3',dsn:`http://9307aa2c038946a2bf9aee60003a01b6@${host}//3`,#第二步配置devServer//上报接口默认以/api开头'/api/3':{target:'http://192.168.10.207:9000',changeOrigin:true,},开发/测试环境nginx转发位置/api/3/{proxy_passhttp://192.168.10.207:9000/api/3/;}sentrydisabledqq邮箱问题描述邀请会员时,qq邮箱无法使用,界面提示邮箱格式不正确。问题原因是s入口正式,由于滥用qq.com邮箱,直接写在代码中,避免使用qq.com问题解决1.查看docker容器,进入web容器查看docker容器iddockerps--filter"name=web”-结果如下进入web容器dockerexec-it59d1d644e39abash2,修改配置文件vi显示行号-:setnumbervi跳转到某行-:linenumbervisearchstring-:g/stringvi/usr/local/lib/python3.8/site-packages/sentry/conf/server.py//默认容器中没有安装vi,需要手动安装//安装过程如下apt-getupdateapt-getinstallvim-y//输入:2195,修改邮箱判断规则INVALID_EMAIL_ADDRESS_PATTERN=re.compile(r"\@qq\.com$",re.I)//改为INVALID_EMAIL_ADDRESS_PATTERN=re.compile(r"\@xxxxx\.com$",re.I):wqsave,然后exit输入exit退出容器3.重启容器注意:执行docker-composer启动两次