静态网站做一单多少钱,网站没询盘怎么做推广,深圳航空网上值机选座,自己做的网站加载速度慢能不能让用户录个屏过来呀#xff1f; 用户使用的是什么机型的手机#xff1f; 用户使用的什么浏览器呀#xff1f; 用户的网络是什么情况#xff1f; … … 线上出现问题时#xff0c;技术部和业务部同学之间的对话诸如此类…业务同学也很栓Q呀#xff0c;硬着头皮去问客…能不能让用户录个屏过来呀 用户使用的是什么机型的手机 用户使用的什么浏览器呀 用户的网络是什么情况 … … 线上出现问题时技术部和业务部同学之间的对话诸如此类…业务同学也很栓Q呀硬着头皮去问客户信息 客户配合还算好的如果遇到不配合的客户还真的是一个头两个大
那么这时候接入一套监控系统真真是有必要极了
Sentry 横空出世 Sentry 是一款软件监控工具可帮助开发人员识别和修复与代码相关的问题。从错误跟踪到性能监控Sentry 提供代码级可观察性可以轻松诊断问题并持续了解应用程序代码的运行状况。 Sentry 可以为我们提供的帮助有什么
错误监控自动捕获错误重播用户操作行为等等 性能监控 发布健康监控 …
功能多多其他不多说了我们直接开整
写在前边
sentry 分为 sass 版 和 私有化部署。
sass版 是最方便的使用方式 只需进入 官方注册 激活邮箱并创建项目就可以使用了但是会有使用数量限制等 私有化部署 需要开发者自己使用Python或者Docker进行安装但胜在数据更加安全限制少
最终选择哪种方式可以根据实际的应用场景进行选择基于我司业务最终选择了“私有化部署”这种方式求助了运维同学帮我们搭建了自己的sentry监控平台然后登录上去随后有关前端方面的真正的配置就开始了
一基础搭建
创建项目 成功之后会生成一个搭建指南
根据指南执行以下操作具体如下
安装依赖
yarn add sentry/vueSDK配置
import * as Sentry from sentry/vueSentry.init({Vue,debug: false, // 调试模式environment: development, // 可以调整为一个变量dsn: https://xxxx,integrations: [new Sentry.BrowserTracing({tracePropagationTargets: [], // 设置哪些url应该被“分布式跟踪”错误请求routingInstrumentation: Sentry.vueRouterInstrumentation(router),}),new Sentry.Replay(),],tracesSampleRate: 1.0, // 错误上报率replaysSessionSampleRate: 0.1, // 重播会话采样率replaysOnErrorSampleRate: 1.0, // 重播错误采样率release: import.meta.env.VITE_SOURCEMAP_RELEASE, // 建议从env环境变量中读取
})下边详细说下重要的几个参数
environment实践的时候可以根据具体项目情况将该参数置为变量这样子的话在sentry后台监控系统里边就能根据这个参数去区分具体是哪个环境发生的错误也可以进行快速定位和分析
dsn即项目向哪个url发送通知那么就来源于此
release 这个至关重要是上传SourceMap时要用到的参数是错误代码分析时的统称版本号 一般到这来说错误预警功能算是完成了。 我们可以尝试更改前端页面代码随便加入一行错误代码试试看~~
this.abcdef() // 实则abcdef这个方法是不存在的运行之后控制台报错这时候sentry会监控到这个错误然后sentry后台也会受到相关通知如下
我们会发现虽然能看到这个错误了但是依旧不知道是在哪一行而接下来的一步上传SourceMap 就能帮我们定位到是哪一行代码出错了
二上传SourceMap
上传方式
使用 sentry/cli 手动上传 其实就是上边指南中尚未截取的部分使用npx按照提示语一步一步进行 另外一种方式是使用 插件 sentry/webpack-plugin 或者 sentry/vite-plugin 上传
具体需要看项目里使用的打包方式是 webpack 还是 vite两种大同小异这里结合我们自己的项目特别介绍一下sentry/vite-plugin的使用方法
安装依赖
yarn add sentry/vite-pluginSDK配置
import { sentryVitePlugin } from sentry/vite-pluginexport default defineConfig(({ mode }) {const envDir fileURLToPath(new URL(./environments, import.meta.url))const envParams loadEnv(mode, envDir)return {envDir,plugins: [sentryVitePlugin({org: xxx,project: xxxx,url: https://xxxxx.com/,include: ./dist/js, // 只上传jsignore: [node_modules, vite.config.ts],cleanArtifacts: true, // 先清理再上传urlPrefix: ~/js, // 线上对应的url资源的相对路径authToken: envParams.VITE_SENTRY_AUTH_TOKEN,release: envParams.VITE_SOURCEMAP_RELEASE,}),],}
})下边详细说下重要的几个参数
org即组织名称是唯一ID
project即要接入监控系统的项目
url即sentry管理后台平台地址与dsn相呼应 include上传SourceMap的路径代码一般我们只会分析js文件代码 cleanArtifacts尤其重要一定要先清洗再上传否则资源越积越多 urlPrefix具体路径可查看你的网页控制台打开后的路径是怎样的 authToken生成的方式有两种取决你是采用哪种方式上传的SourceMap。 如果是手动上传使用sentry/cli那么会在执行完所有的提示输入后在根目录自动生成一个文件.env.sentry-build-plugin文件内容如下
如果使用插件sentry/vite-plugin那么可在sentry管理后台手动生成使用具体操作如下 release上边提到过的这决定了SourceMap的版本记录
至此我们点进错误通知后就能直接定位到发生错误的代码了 由此我们可以看到是第17行代码发生了错误
发生了错误之后肯定是立马解决呀那么接入通知也是必不可少的官方提供的是邮件通知但是在国内办公大环境里邮件查看后并立马回复普及必然是比不上社交软件的回复速度我司办公常用的沟通软件是“企业微信”所以接下来就展开说说如何将错误消息通过企业微信通知到处理人
三接入企业微信进行预警通知
方案
WebHooks 首先我们先查看项目中是否已经集成WebHooks如果暂未集成需要开启WebHooks~ 然后再进行预警规则配置
企微文档
接下来就是找WebHooks 要配置的 CallBackUrl填入到上边的图片中。
首先在企业微信群里边引入一个机器人然后右键查看机器人配置 在查看机器人配置说明的时候查看到 官方文档群机器人配置说明 有对发送的消息格式有要求 而那边Sentry管理后台配置完这个WebHook 地址后也并未生效于是意识到是报文格式不正确随后进行验证发现sentry 发送的错误预警的格式如下
{id: 22,project: xxx,project_name: xxx,project_slug: xxx,logger: null,level: error,culprit: s.created(src/views/aaaaa),message: ,url: https://sentry.xxx.com/xxxxx,triggering_rules: [xxx \u6d4b\u8bd5\u73af\u58831],event: {event_id: 6f76509exxxxxxxxxx2668492f0,level: error,version: 7,type: error,fingerprint: [{{ default }}],culprit: s.created(src/views/aaaaa),logger: ,platform: javascript,timestamp: 1706084260.74,received: 1706084260.906766,release: test20240124,environment: test1,user: { ip_address: 100.1.1.1 },request: {url: http://192.168.1.1:1111/aaaaa,headers: [[User-Agent,Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1]]},contexts: {browser: {name: Mobile Safari,version: 13.0.3,type: browser},device: {family: iPhone,model: iPhone,brand: Apple,type: device},os: { name: iOS, version: 13.2.3, type: os },replay: {replay_id: 844078ccccccccc3e486e63d1e31,type: replay},............查看后发现接收到的报文显然与企微文档中要求的四种格式不符那么最快的方法是让后端协助提供一个接口把上边的这个报文转成企微要求的通知格式
随后当…当…当…当…,我们便成功接收到了错误预警通知具体如下 Happy Ending
