如何在前端项目里接入Sentry监控系统并通过企业微信通知

能不能让用户录个屏过来呀?
用户使用的是什么机型的手机?
用户使用的什么浏览器呀?
用户的网络是什么情况?


线上出现问题时,技术部和业务部同学之间的对话诸如此类…业务同学也很栓Q呀,硬着头皮去问客户信息
客户配合还算好的,如果遇到不配合的客户,还真的是一个头两个大!
黑人问号脸

那么,这时候,接入一套监控系统,真真是有必要极了!!

Sentry 横空出世

Sentry 是一款软件监控工具,可帮助开发人员识别和修复与代码相关的问题。从错误跟踪到性能监控,Sentry 提供代码级可观察性,可以轻松诊断问题并持续了解应用程序代码的运行状况。

Sentry 可以为我们提供的帮助有什么?

错误监控(自动捕获错误,重播用户操作行为等等)
性能监控
发布健康监控

功能多多,其他不多说了,我们直接开整!

写在前边

sentry 分为 sass 版 和 私有化部署。

sass版
是最方便的使用方式, 只需进入 官方注册 激活邮箱并创建项目就可以使用了,但是会有使用数量限制等
0
私有化部署
需要开发者自己使用Python或者Docker进行安装,但胜在数据更加安全,限制少

最终选择哪种方式,可以根据实际的应用场景进行选择,基于我司业务,最终选择了“私有化部署”这种方式,求助了运维同学帮我们搭建了自己的sentry监控平台,然后登录上去,随后有关前端方面的真正的配置就开始了!

一:基础搭建

创建项目

create
成功之后会生成一个搭建指南
指南

根据指南,执行以下操作,具体如下:

安装依赖

yarn add @sentry/vue

SDK配置

import * as Sentry from '@sentry/vue'
Sentry.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后台监控系统里边就能根据这个参数去区分具体是哪个环境发生的错误,也可以进行快速定位和分析
env

dsn:即项目向哪个url发送通知,那么就来源于此
dsn

release :这个至关重要,是上传SourceMap时要用到的参数,是错误代码分析时的统称版本号
release
一般到这来说,错误预警功能算是完成了。
我们可以尝试更改前端页面代码,随便加入一行错误代码,试试看~~

this.abcdef()   // 实则abcdef这个方法是不存在的

运行之后,控制台报错,这时候sentry会监控到这个错误,然后sentry后台也会受到相关通知,如下:
error

我们会发现,虽然能看到这个错误了,但是依旧不知道是在哪一行,而接下来的一步,上传SourceMap 就能帮我们定位到是哪一行代码出错了

二:上传SourceMap

上传方式

使用 @sentry/cli 手动上传 ;
其实就是上边指南中尚未截取的部分,使用npx,按照提示语一步一步进行
sentry/cli
另外一种方式是使用
插件 @sentry/webpack-plugin 或者 @sentry/vite-plugin 上传;

具体需要看项目里使用的打包方式是 webpack 还是 vite,两种大同小异,这里结合我们自己的项目特别介绍一下@sentry/vite-plugin的使用方法

安装依赖

yarn add @sentry/vite-plugin

SDK配置

import { sentryVitePlugin } from '@sentry/vite-plugin'
export 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
org

project:即要接入监控系统的项目
project

url:即sentry管理后台平台地址,与dsn相呼应
include:上传SourceMap的路径代码,一般我们只会分析js文件代码
cleanArtifacts:尤其重要,一定要先清洗再上传,否则资源越积越多
urlPrefix:具体路径可查看你的网页控制台打开后的路径是怎样的
urlPrefix
authToken:生成的方式有两种,取决你是采用哪种方式上传的SourceMap。
如果是手动上传使用@sentry/cli,那么会在执行完所有的提示输入后在根目录自动生成一个文件.env.sentry-build-plugin,文件内容如下
token

如果使用插件@sentry/vite-plugin,那么可在sentry管理后台手动生成使用,具体操作如下
authToken
release:上边提到过的,这决定了SourceMap的版本记录

至此,我们点进错误通知后就能直接定位到发生错误的代码了
17
由此我们可以看到是第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!!
end

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/650574.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

element-UI上传文件后valid提示不消失

问题描述&#xff1a;上传文件完成后&#xff0c;必填信息提示不消失 解决方法&#xff1a;在<el-form-item>标签添加show-message属性&#xff0c;字段为空时才显示提示信息 <el-form-item :prop"fileList" :show-message"!form.fileList || !form.f…

OPEN NT 4.5 编译方法和源代码下载

OPEN NT 4.5&#xff08;源代码编译方法&#xff09; 编译Windows NT 4.0到操作系统的详细方法 OPEN 4.5 ​​​​​​下载 &#xff1a;https://download.csdn.net/download/MYMOTOE6/88786570 ISO https://download.csdn.net/download/MYMOTOE6/88786572 OPEN NT 4.5&#…

LeetCode:1701. 平均等待时间(Java 模拟)

目录 1701. 平均等待时间 题目描述&#xff1a; 实现代码与解析&#xff1a; 简单模拟 原理思路&#xff1a; 1701. 平均等待时间 题目描述&#xff1a; 有一个餐厅&#xff0c;只有一位厨师。你有一个顾客数组 customers &#xff0c;其中 customers[i] [arrivali, time…

为什么网页打开慢?是服务器的问题吗?

当我们遇到网页加载缓慢时&#xff0c;首先想到的可能是服务器的问题。的确&#xff0c;服务器是影响网页加载速度的一个重要因素。然而&#xff0c;这并非是唯一的原因。实际上&#xff0c;网页加载速度受多种因素影响&#xff0c;包括但不限于服务器、网络带宽、DNS解析时间、…

c# cad2016选择封闭多段线获取多段线面积

在C#中&#xff0c;如果你想要通过AutoCAD .NET API来选择封闭多段线内部的其他闭合多段线并计算它们各自的面积&#xff0c;可以遵循以下基本步骤&#xff1a; 1、加载AutoCAD库&#xff1a; 确保你的C#项目引用了Autodesk.AutoCAD.Interop和Autodesk.AutoCAD.Interop.Common…

短视频批量抽帧怎么做

随着短视频的流行&#xff0c;越来越多的创作者需要处理大量的视频素材。其中&#xff0c;批量抽帧是一项常见的需求&#xff0c;它可以帮助我们快速提取视频中的关键帧&#xff0c;以便进行后续的处理或分析。那么&#xff0c;如何高效地进行短视频批量抽帧呢&#xff1f;接下…

微信开发者工具 git 拉取 failed invalid authentication scheme

微信开发者工具 git 拉取 failed invalid authentication scheme 拉取代码时报错,无效身份认证 解决方案: 1.检查git地址是否正常 2.检查git用户名密码是否正确

什么工具能将视频转成gif?分享一个在线制作gif网站

Gif动图看起来效果非常的炫酷&#xff0c;也很复杂。这种gif动图制作起来是不是也很麻烦呢&#xff1f;其实制作gif动画的方法非常的简单&#xff0c;不用下载软件&#xff0c;小白也能操作。只需要使用在线制作gif&#xff08;https://www.gif.cn/&#xff09;工具-GIF中文网&…

代码随想录算法训练营第十六天 |104.二叉树的最大深度,111.二叉树的最小深度,222.完全二叉树的节点个数(待补充)

104.二叉树的最大深度 1、题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 2、文章讲解&#xff1a;代码随想录 3、题目&#xff1a; 给定一个二叉树&#xff0c;找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长…

《30天自制操作系统》 第一周(D1-D7) 笔记

前言&#xff1a;这是我2023年5月份做的一个小项目&#xff0c;最终是完成了整个OS。笔记的话&#xff0c;只记录了第一周。想完善&#xff0c;却扔在草稿箱里许久。最终决定&#xff0c;还是发出来存个档吧。 一、汇编语言 基础指令 MOV: move赋值&#xff0c;数据传送指令…

【传记】-综述

写在前面 “我就是想告诉你们&#xff0c; 别废了自己在部队的日子&#xff0c;做人要有目标感。” “别混日子了&#xff0c;小心日子把你们给混了。”—— 老马 影视来源于生活&#xff0c;借用《士兵突击》中老马的话开篇&#xff0c;回到现实&#xff0c;我们也确实需要时时…

C语言常见面试题:什么是内存管理,C语言中如何进行内存管理?

内存管理是计算机科学中的一个重要概念&#xff0c;它涉及到如何有效地分配、使用和释放计算机内存。内存管理是操作系统和编程语言实现中的一项关键任务&#xff0c;它确保了程序能够安全、有效地运行。 在C语言中&#xff0c;内存管理主要通过以下方式进行&#xff1a; 静态…

提升养殖场效益,从饲料粉碎机开始

为了提高养殖效益&#xff0c;养殖户可以从很多方面着手&#xff0c;其中饲料成本是一个重要的因素。为了降低饲料成本&#xff0c;养殖户可以考虑从饲料粉碎环节入手。通过购买和采用高效、低成本的饲料粉碎机&#xff0c;养殖户可以更好地控制饲料成本&#xff0c;提高饲料的…

互动直播项目 梳理 自定义视频帧控件 BitmapControl

目录 一、自定义控件 lib静态库引用 1、控件源文件位置 2、ui_kit 静态lib库项目

ElementName与RelativeSource局限性

引言 xaml代码中属性的绑定主要是通过元素名或类型进行查找绑定和解析的&#xff0c;但是当在后台生成控件或面对popup、menuitem时&#xff0c;发现他们都查找不到这时为什么呢&#xff1f; 局限性 1、无法绑定后台生成控件 xaml中声明的元素会自动被添加进可视化树中&…

Linux 驱动开发基础知识—— LED 驱动程序框架(四)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;V…

win10通过ssh链接deepin23并开启x11转发

前提 主机环境&#xff1a;win10 lstc 虚拟机环境&#xff1a;deepin23beta2 终端&#xff1a;tabby x11服务器: vcxsrv 安装ssh sudo apt install ssh开启root登录(看你需求&#xff09; 首先你要给root账号设置密码 sudo passwd root修改配置文件 sudo vim /etc/ssh/ss…

windows安装PostgreSQL后进行远程连接,发生SSL错误

1. 报错情况 SSL 关闭 的 pg_hba.conf 记录 (pgjdbc: autodetected server-encoding to be GB2312, if the message is not readable, please check database logs and/or host, port, dbname, user, password, pg_hba.conf) 或是乱码提示&#xff0c;提示中有SSL、 pg_hba.con…

Go语言grpc服务开发——Protocol Buffer

文章目录 一、Protocol Buffer简介二、Protocol Buffer编译器安装三、proto3语言指南四、序列化与反序列化五、引入grpc-gateway1、插件安装2、定义proto文件3、生成go文件4、实现Service服务5、gRPC服务启动方法6、gateway服务启动方法7、main函数启动8、验证 相关参考链接&am…