线上问题监控 Sentry 接入全过程

背景：
线上偶发问题出现后 ，测试人员仅通过接口信息无法复现错误场景；并且线上环境的监控，对于提高系统的稳定性 （降低脱发率） 至关重要；现在线上监控工具这个多，为什么选择Sentry? 因为它能够回放（录屏） ，自动收集报错，用户多，免费且改造成本低等各种优点。为什么写这篇文章？ 因为其他文章都没啥参考性，要么过时了，要么太短了。下面这些内容都已经正式上线了，刚写完，新鲜的！

环境参数：
node version is 14.16.1
“vue”: “^2.5.2”,
“@sentry/vue”: “^7.98.0”,
@sentry/webpack-plugin": "^2.10.3

一、接入步骤

1、修改配置文件
配置DSN、AUTH_TOKEN、RELEASE、CURRENTENV
DSN 是服务端与客户端通信的密钥，发送事务的目的地；AUTH_TOKEN 是用户token，用于权限控制；
RELEASE 是版本号，用于判断修改后的效果；CURRENTENV当前的环境，非必须。
示例（在 .env.test 环境文件中写入）：

VUE_APP_SENTRY_AUTH_TOKEN = 25a7bcf607c19c72af0f30fae9...VUE_APP_SENTRY_DSN = DSN...VUE_APP_CURRENTENV = TESTVUE_APP_RELEASE=staging@1.0.1

2、下载依赖@sentry/vue 和 @sentry/webpack-plugin

npm install --save @sentry/vue  @sentry/webpack-plugin

3、初始化 Sentry，并配置相关选项，在main.js同级新增 sentry.js 文件。

import * as Sentry from "@sentry/vue";// 导出一个对象，其中包含 `install` 和其他方法
export default {// `install` 方法用于将插件安装到 Vueinstall (Vue, options) {this.init(Vue, options);// 在 Vue 实例上挂载 Sentry 对象Vue.prototype.$sentry = Sentry;// 在 Vue 实例上挂载自定义的错误捕获方法Vue.prototype.$httpSentryCaptureMessage = this.httpSentryCaptureMessage;Vue.prototype.$captureMessage = this.captureMessage;},// 初始化 Sentry，并配置相关选项init (Vue, {router}) {// 初始化 Sentry，配置 DSN、环境、调试模式等Sentry.init({Vue,dsn: process.env.VUE_APP_SENTRY_DSN,release: process.env.VUE_APP_RELEASE, // 与 vue.config 中的保持一致environment: process.env.VUE_APP_CURRENTENV,debug: true,// http:{"verify_ssl": false},integrations: [// 启用浏览器性能追踪Sentry.browserTracingIntegration({ router }),// 设置会话回放的配置Sentry.replayIntegration({maskAllText: true, // 是否屏蔽所有文本内容blockAllMedia: true, // 是否阻止所有媒体内容的回放networkDetailAllowUrls: [window.location.origin], // 请求和响应标头或正文的允许 URL 列表}),],initialScope: {// 可以在这里设置初始的 Scope 信息// level: "info",},// 在每次发送 event 前触发的钩子函数beforeSend(event) {// event.level = "warning"event.tags.location = window.location.href;return event;},// 设置分布式追踪的目标 URLtracePropagationTargets: [],// 性能监控配置tracesSampleRate: 1.0, // 采集 100% 的事务// 会话回放配置replaysSessionSampleRate: 0.1, // 设置采样率为 10%。在开发时可能希望设置为 100%，然后在生产中采样率更低。replaysOnErrorSampleRate: 1.0, // 如果你不是已经采样了整个会话，在错误发生时改变采样率到 100%。});},/*** 主动上报捕获的异常。* @param { string } title 异常标识* @param { object } params 额外参数* @param { object } stack 错误对象或微信返回对象*/async captureMessage(title, params, stack = {}) {try {// 判断错误类型并上报const isError = typeof stack === 'object' && !!stack.stack;const errorName = (isError ? stack.message : stack.errMsg) || 'unknown';const extra = {params,errMsg: isError ? stack : stack.errMsg || '',href: location.href,};// 使用 Sentry 上报错误Sentry.withScope((scope) => {scope.setFingerprint([title, errorName]);const errMessage = new Error(errorName);errMessage.name = `前端异常上报:${title}`;console.log('前端异常：', title);Sentry.captureException(errMessage, {extra,level: 'error',});});} catch (error) {console.log('sentry:', error);}},/*** 上报服务请求异常。* @param {*} stack 错误信息对象*/async httpSentryCaptureMessage(stack) {try {// 处理服务请求异常，决定是否上报const errorMsg = stack.message;const errorCode = (stack.response && stack.response.status) || 0;if ([401, 403, 40301].includes(errorCode)) {// 过滤特定的凭证错误return;}// 根据错误信息和状态码设置错误名称let errorName;if (/timeout/i.test(errorMsg) || errorCode===504) {errorName = '接口超时';} else if (/^4\d{2}$/.test(errorCode) || /^5\d{2}$/.test(errorCode)) {errorName = `服务端${errorCode}错误`;} else {errorName = '调用异常';}const extra = {...(stack.config || {}),errMsg: stack,href: location.href,};// 如果是接口超时，上报接口的参数errorName === '接口超时' && (extra.networkInfo = await this.getResourceLoad('xmlhttprequest', extra.url));// 使用 Sentry 上报异常Sentry.withScope((scope) => {scope.setFingerprint([extra.method, extra.url, errorName]);const errMessage = new Error(`异常接口地址: ${extra.url}`);errMessage.name = errorName;Sentry.captureException(errMessage, {extra,level: 'error',});});} catch (error) {console.log('sentry:', error);}},/*** 获取资源加载信息。* @param { string } type 资源类型* @param { string } name 资源名称匹配* @returns { Promise<Object> } 返回资源信息的 Promise 对象*/getResourceLoad(type = 'xmlhttprequest', name = '') {return new Promise((resolve) => {if (!window.performance) {resolve({});return;}setTimeout(() => {// 获取并过滤性能监测中的资源信息const list = window.performance.getEntries().filter((item) => item.initiatorType === type) || [];if (!name) {resolve(list);return;}// 查找匹配资源信息let result = {};for (let i = list.length - 1; i >= 0; i -= 1) {if (list[i].name && list[i].name.indexOf(name) >= 0) {result = list[i];break;}}resolve(result);}, 50);});}}
在这里插入代码片

4、作为插件挂载到Vue上，在main.js中引入 ；

  import SentryReport from './sentry.js';if(process.env.VUE_APP_CURRENTENV!='DEV'){// 开发时引入，会导致控制台输出内容不能指定到所在行，所以打包时才引入Vue.use(SentryReport, {router})}

5、通过webpack打包时上传sourcemap，用于映射线上错误代码的具体位置。
在vue.config.js中加入configureWebpack的配置；

configureWebpack: (config) => {//产生map文件config.devtool='source-map';if(process.env.VUE_APP_CURRENTENV !='DEV'){Object.assign(config, {plugins: [...config.plugins,sentryWebpackPlugin({url: "https://test-sentry.scxljs.cn/", // Sentry 后台地址release: process.env.VUE_APP_RELEASE, // 和 Sentry.init 中的保持一致include: path.join(process.cwd(), "/dist"), // 需要上传到 sentry 服务器的资源目录ignore: ["node_modules", "vue.config.js"], // 忽略文件目录，如果在 inlcude 中已经定义了具体路径，这个参数可以不加authToken: process.env.VUE_APP_SENTRY_AUTH_TOKEN, // 上文中的 User auth tokensorg: 'sentry', // 上文中的组织名称project: 'environment-assistant', // 上文中的项目名称urlPrefix: "./", // 上传资源的路径前缀，路径通常是 /static/js, 如有变化自行更改cleanArtifacts: true, // 先清理再上传debug: true,sourcemaps: {// assets: ['./dist'],//上传后删除映射文件filesToDeleteAfterUpload: ['./dist/js/**/*.map', ]},errorHandler: (error) => {console.log('upload SourceMap error', error)},}),],});}},

6、在首次拿到用户信息的地方设置用户信息

let userInfo = {username:  res.data.userName || '-1',id: res.data.userId || '-1',email: res.data.userName,  //为方便辨识用户，将email设置为userName
}
// 给issue传递用户信息
this.$sentry.setUser(userInfo);

7、主动上报异常
axios的请求响应拦截中：
Vue.prototype.$httpSentryCaptureMessage(err)
业务场景中：
this.$sentry.httpSentryCaptureMessage(err);

二、异常自动推送
1、在Sentry服务端，配置Alert规则，即可通知相关人员；
2、还可通过webhook借助飞书捷径+飞书机器人 通知到相应的责任人（见参考资料），配置alert时，一定要检查发送途径是否选了webhook。

三、私有化部署
私有化部署部署前，先看好硬件配置要求（https://develop.sentry.dev/self-hosted/），下包前，先把梯子搭好，下外面的官方版本，不然会爆发很多奇怪的问题。

四、遇到的问题
1、在技术预研时，没有私有化部署，直接用了官方的平台，但因为国内墙的原因（翻墙也不行），上传sourcemap时，控制台会报错 API request failed ，研究了一段，进行了私有化部署后就能解决；
2、慎用 Sentry.close ，会出现sentry中issue与replay不对应的情况；
3、sentry-cli对node版本有要求，14.16及以下无法使用。

参考资料及其他：
使用 Sentry 做异常监控 - 借助飞书捷径

不明白的欢迎交流！
感谢美帝~
提了个issue，以为会石沉大海，没想到一直都有回应，ღ( ´･ᴗ･` )比心！
记录下这个关闭的issue
https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/470

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

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

相关文章

Java并发（1）--线程，进程，以及缓存

Java并发（1）--线程，进程，以及缓存

线程和进程是什么&#xff1f; 进程 进程是程序的一次执行过程&#xff0c;系统程序的基本单位。有自己的main方法&#xff0c;并且主要由主方法运行起来的基本上就是进程。 线程 线程与进程相似&#xff0c;但线程是一个比进程更小的执行单位。一个进程在其执行的过程中可以…
阅读更多...
vb.net textbox滚动显示到最后一行

vb.net textbox滚动显示到最后一行

调用&#xff1a; Private Sub TextBox18_TextChanged(sender As Object, e As System.EventArgs) Handles TextBox18.TextChanged show_textbox_endline(TextBox18) End Sub 函数&#xff1a; 显示textbox最后一行 Public Sub show_textbox_endline(Tbx As TextB…
阅读更多...
MVCC（解决MySql中的并发事务的隔离性）

MVCC（解决MySql中的并发事务的隔离性）

MVCC 如何保证事务的隔离性&#xff1f; 1.排他锁&#xff1a;如一个事务获取了一个数据行的排他锁&#xff0c;其他事务就不能再获取改行的其他锁。 2.MVCC&#xff1a;多版本并发控制。 MVCC&#xff1a; 1.隐藏字段 1.DB_TRX_ID&#xff1a;最近修改事务的id。默认值从0开…
阅读更多...
Selenium自动填写验证码（偏小白版本OCR）

Selenium自动填写验证码（偏小白版本OCR）

OCR基础示例 我直接 上代码 from PIL import Image import pytesseract# 0 Orientation and script detection (OSD) only. # 1 Automatic page segmentation with OSD. # 2 Automatic page segmentation, but no OSD, or OCR. # 3 Fully automatic page segmentation, but n…
阅读更多...
【MYSQL】索引机制概述

【MYSQL】索引机制概述

由于MySQL是作为存储层部署在业务系统的最后端&#xff0c;所有的业务数据最终都要入库落盘&#xff0c;但随着一个项目在线上运行的时间越来越久&#xff0c;数据库中的数据量自然会越来越多&#xff0c;而数据体积出现增长后&#xff0c;当需要从表查询一些数据时&#xff0c…
阅读更多...
symfony框架

symfony框架

Symfony框架是一种流行的PHP框架&#xff0c;用于快速开发高质量的Web应用程序。它是一个开源框架&#xff0c;遵循MVC&#xff08;模型-视图-控制器&#xff09;设计模式&#xff0c;提供了一套强大的工具和组件&#xff0c;帮助开发人员更轻松地构建复杂的Web应用程序。 Sym…
阅读更多...
Apache Storm的详细配置

Apache Storm的详细配置

Apache Storm的详细配置主要涉及以下几个方面： Zookeeper配置：Apache Storm使用Zookeeper来进行协调和配置管理。你需要配置Zookeeper集群的连接信息，包括Zookeeper服务器的主机和端口。 Storm Nimbus配置：Nimbus是Storm的主节点，负责分配任务给各个工作节点。你需要配置N…
阅读更多...
javaScript设计模式之简单工厂模式

javaScript设计模式之简单工厂模式

简单工厂模式(Simple Factory):又叫静态工厂方法&#xff0c;由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类对象。 场景一 假设我们需要计算圆形和矩形的面积 function Circle(radius) {this.radius radius;}Circle.prototype.getArea function() {re…
阅读更多...
C++猫和老鼠有多重（友元函数初步）

C++猫和老鼠有多重（友元函数初步）

定义猫和老鼠&#xff1a;Cat与Mouse两个类&#xff0c;二者都有weight属性&#xff0c;定义二者的一个友元函数totalweight()&#xff0c;计算二者的重量和。 裁判测试程序样例&#xff1a; #include <iostream> using namespace std;/* 请在这里填写答案 */int main(…
阅读更多...
第六周学习笔记DAY.4-方法与方法重载

第六周学习笔记DAY.4-方法与方法重载

如何创建和使用对象 创建对象 类名 对象名 new 类名(); 引用对象成员&#xff1a;使用“.”进行以下操作 引用类的属性&#xff1a;对象名.属性 用类的方法&#xff1a;对象名.方法名() 学完本次课程后&#xff0c;要求能够&#xff1a; 方法的参数传递 会使用构造方法…
阅读更多...
总结SQL相对常用的几个字符函数

总结SQL相对常用的几个字符函数

目录 字符的截取 substr() trim()、ltrim()、rtrim() 字符串的拼接 ||、 字符的大小写转换 upper(column_name):大写 lower(column_name):小写 字符替换 replace() 搜索字符 instr(column_name, substring_to_find,start,n_appearence) charindex(substring_to_fi…
阅读更多...
【问题解决】ubuntu安装新版vscode报code-insiders相关错误

【问题解决】ubuntu安装新版vscode报code-insiders相关错误

问题 目前 vscode官网 最新的包为 insiders_1.89.0-1712297812_amd64.deb &#xff0c;双击或者使用sudo dpkg -i code-insiders_1.89.0-1712297812_amd64.deb安装后报错&#xff0c;执行其他命令也报错。 安装环境&#xff1a;ubuntu18.04 dpkg: 处理软件包 code-insiders (…
阅读更多...
火绒安全软件：程序员的网络守护天使

火绒安全软件：程序员的网络守护天使

目录 前言 系统防护 网络防护 隐私保护 高级设置 软件安全 响应速度 持续更新 总结 前言 在这个充满机遇与挑战的数字时代&#xff0c;程序员们如同探险家&#xff0c;不断探索着代码的新大陆。然而&#xff0c;网络世界也充斥着各种未知的风险和威胁。火绒安全软件&a…
阅读更多...
riscv-gnu-toolchain 交叉编译器如何构建？

riscv-gnu-toolchain 交叉编译器如何构建？

安装依赖工具 sudo apt-get install git autoconf automake autotools-dev curl python3 libmpc-dev libmpfr-dev libgmp-dev gawk build-essential bison flex texinfo gperf patchutils bc libexpat-dev libglib2.0-dev ninja-build zlib1g-dev pkg-config libboost-all-dev…
阅读更多...
基于java+springboot+vue实现的药品管理系统（文末源码+Lw）23-297

基于java+springboot+vue实现的药品管理系统（文末源码+Lw）23-297

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;药品信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广…
阅读更多...
Linux命令-dpkg-query命令（Debian Linux中软件包的查询工具）

Linux命令-dpkg-query命令（Debian Linux中软件包的查询工具）

说明 dpkg-query命令 是Debian Linux中软件包的查询工具&#xff0c;它从dpkg软件包数据库中查询并辨识软件包的信息。 语法 dpkg-query(选项)(参数)选项 -l&#xff1a;列出符合匹配模式的软件包&#xff1b; -s&#xff1a;查询软件包的状态信息&#xff1b; -L&#xff1…
阅读更多...
llama-factory SFT系列教程 (二)，大模型在自定义数据集 lora 训练与部署

llama-factory SFT系列教程 (二)，大模型在自定义数据集 lora 训练与部署

文章目录 简介支持的模型列表2. 添加自定义数据集3. lora 微调4. 大模型 lora 权重&#xff0c;部署问题 参考资料 简介 llama-factory SFT系列教程 (一)&#xff0c;大模型 API 部署与使用本文为 llama-factory SFT系列教程的第二篇&#xff1b; 支持的模型列表 模型名模型…
阅读更多...
Composer安装与配置

Composer安装与配置

Composer&#xff0c;作为PHP的依赖管理工具&#xff0c;极大地简化了PHP项目中第三方库的安装、更新与管理过程。本文将详细介绍Composer的安装步骤、基本配置方法&#xff0c;以及一些实用的操作示例&#xff0c;帮助读者快速上手并熟练运用Composer。 一、Composer安装 环…
阅读更多...
C++内存分布

C++内存分布

C代码编译过程 预处理 宏定义展开、头文件展开、条件编译&#xff0c;这里并不会检查语法编译检查语法&#xff0c;将预处理后文件编译生成汇编文件汇编将汇编文件生成目标文件(二进制文件)链接将目标文件链接为可执行程序 进程的内存分布 程序运行起来(没有结束前)就是一个…
阅读更多...
mysql开启慢日志mysqld: File ‘xxx‘ not found (Errcode: 13 - Permission denied)

mysql开启慢日志mysqld: File ‘xxx‘ not found (Errcode: 13 - Permission denied)

问题描述: mysql版本:5.74 开启mysql慢日志 一直报错 慢日志文件手动创建 并把慢日志文件权限给mysql:mysql 还是不行,于是找方案,找了几个都不行,后来发现是系统安全设置 解决方案 前提是日志文件存在且授权给用户mysql以及组mysql 具体如何关闭selinux&#xff1a; v…
阅读更多...
最新文章

Copyright @ 2022~2023