前端性能监控、异常监控的一些记录

文章目录

    • 常见异常类型
    • 常用的一些异常监控的方法
      • window.error
      • window.addEventListener('error')
      • window.addEventListener('load')
      • window.addEventListener('DOMContentLoaded')
      • window.performance
      • navigator.sendBeacon
      • 1*1像素gif
      • axios 请求/响应拦截器
      • Vue的errorHandler
      • React的ErrorBoundary
      • try...catch
      • Sentry

在前端开发中,异常监控是一个重要的环节,它可以帮助开发者及时发现和修复应用中的问题,提升用户体验。

常见异常类型

  • 请求异常: 请求异常通常发生在客户端与服务器进行数据交互时,比如网络问题、服务器错误、API请求异常、资源请求异常等
  • JS异常: JS异常是指在JavaScript代码执行过程中出现的异常,这可能包括语法错误、运行时错误、类型错误等。
  • 环境异常 : 环境异常是指由于客户端环境的不同(如不同的浏览器、设备、操作系统)导致的异常,这可能包括兼容性问题、性能问题、小程序、容器等。
  • 业务异常 : 业务异常是指在执行特定业务逻辑时出现的错误,这可能包括用户输入错误、数据处理错误、业务流程错误等等。

常用的一些异常监控的方法

window.error

window.error 用于捕获和处理JavaScript运行时错误,提供更详细的错误堆栈信息,例如脚本执行报错,
但需要注意的是,它可能无法捕获所有类型的资源加载错误,比如某些跨域资源的错误。

window.onerror = function(message, source, lineno, colno, error) {// 构建错误信息对象const errorInfo = {message: message, // 错误消息source: source, // 错误发生的URLlineno: lineno, // 出错的行号colno: colno, // 列号error: error // 错误对象};// 上报错误信息到服务器或错误监控系统reportError(errorInfo);
};

window.addEventListener(‘error’)

window.addEventListener(‘error’)也可以用来捕获错误,但它只能捕获资源加载错误,例如<img><script>标签加载失败

window.addEventListener('error', function(event) {// 过滤出非JavaScript错误if (event.target instanceof HTMLScriptElement ||event.target instanceof HTMLLinkElement ||event.target instanceof HTMLImageElement) {// 构建错误信息对象const errorInfo = {target: event.target,message: event.message,// 其他需要的信息};// 上报错误信息到服务器或错误监控系统reportError(errorInfo);}
});

window.addEventListener(‘load’)

用来监听页面的加载状态。load事件在页面所有资源(如图片、样式表等)加载完成后触发

// 监听页面加载完成
window.addEventListener('load', function() {// 页面所有资源加载完成console.log('Page fully loaded.');
});

看到这个可能很多人会想到window.onload,他们还是有一些区别的:

  • 触发时间: window.onload 事件是在页面及其所有资源(如图像和脚本)加载完毕后才触发,而 window.addEventListener(‘load’)则是在页面加载完毕后触发。
  • 多次绑定: window.onload 只能绑定一个处理程序,而 window.addEventListener(‘load’) 可以绑定多个处理程序。
  • 兼容性: window.onload 在 IE8 及以下版本的浏览器中不支持,而 window.addEventListener(‘load’) 兼容性更好

window.addEventListener(‘DOMContentLoaded’)

用于监听 DOMContentLoaded 事件的代码片段。当 HTML 文档已经被完全解析,并且所有延迟的脚本(例如 <script defer>)都已经加载和执行后,DOMContentLoaded 事件就会被触发,不等待样式表、图片和子框架的加载。

注意:由于 DOMContentLoaded 事件可能会在运行脚本之前就被触发,所以在添加监听器之前可以通过检查 document.readyState 是否为 “loading” 检查文档的状态,来判断是否应该添加监听器

function doSomething() {console.info("DOM loaded");
}if (document.readyState === "loading") {document.addEventListener("DOMContentLoaded", doSomething);
} else {doSomething();
}

window.performance

window.performance是一个全局属性,用于获取关于浏览器性能的信息。它返回一个Performance对象,你可以通过这个对象来收集有关当前上下文(例如 window 或 worker)的性能信息。可以用来监控页面加载性能,包括资源加载时间等。

window.performance很强大,api很多, 随便说几个

  • performance.memory: 获取 JavaScript 对内存的占用情况,包括已使用的 JS 堆大小、总 JS 堆大小以及内存大小限制。

  • performance.navigation: 提供有关网页导航的信息,例如重定向数量、页面是如何加载的等信息。

  • performance.timing: 包含了一系列关于页面加载时间的详细信息,例如起始时间、DNS 查询开始时间、TCP 连接建立时间等

// 获取页面加载总耗时
var duration = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
console.log('页面加载总耗时: ' + duration + 'ms');// 获取DNS查询耗时
const dnsQueryTime = window.performance.timing.domainLookupEnd - window.performance.timing.domainLookupStart;
console.log('DNS查询耗时: ' + dnsQueryTime + 'ms');// 获取TCP连接耗时
const tcpConnectionTime = window.performance.timing.connectEnd - window.performance.timing.connectStart;
console.log('TCP连接耗时: ' + tcpConnectionTime + 'ms');// 获取页面重定向耗时
const redirectTime = window.performance.timing.redirectEnd - window.performance.timing.redirectStart;
console.log('页面重定向耗时: ' + redirectTime + 'ms');// 获取首次渲染时间
const renderTime = window.performance.timing.responseStart - window.performance.timing.fetchStart;
console.log('首次渲染时间: ' + renderTime + 'ms');// 获取下载服务端返回数据的时间
const downloadTime = window.performance.timing.responseEnd - window.performance.timing.responseStart;
console.log('下载服务端返回数据的时间: ' + downloadTime + 'ms');// 获取解析DOM树耗时
const domParseTime = window.performance.timing.domComplete - window.performance.timing.domInteractive;
console.log('解析DOM树耗时: ' + domParseTime + 'ms');

navigator.sendBeacon

navigator.sendBeacon() 是一个在Web API中用于异步发送HTTP POST请求的方法,通常用于向服务器发送小量数据,它允许你在页面卸载时发送异步请求,这对于上报错误或性能数据非常有用,因为它不会阻塞页面的卸载过程。

特性

  • 发出的是异步请求,并且是POST请求,后端解析参数时,需要注意处理方式;
  • 发出的请求,是放到浏览器任务队列执行的,脱离了当前页面,所以不会阻塞当前页面的卸载和后面页面的加载过程,用户体验较好;
  • 只能判断出是否放入浏览器任务队列,不能判断是否发送成功

注意

  • 发送的数据大小有限制,具体数值可能因浏览器不同而有所差异。当数据长度达到一定值时,异步请求可能会进入浏览器发送队列失败。
  • 存在兼容性问题,除了IE,大部分浏览器都已经支持。如果不支持,可以用同步的xhr来替代
// 上报错误信息
function reportError(error) {const url = 'https://your-error-reporting-endpoint.com';const data = new URLSearchParams({error: error.message,stack: error.stack});navigator.sendBeacon(url, data);
}// 在捕获到错误时调用
reportError(error);

1*1像素gif

在前端监控中,1x1像素的GIF图像通常被用作跟踪像素或Web Beacon。这种技术通过在页面中嵌入一个极小的透明GIF图像,来记录用户的访问行为和页面性能数据。当用户访问页面时,这个小图像会向服务器发送一个请求,从而收集用户行为数据或页面性能指标。

1x1像素的GIF图像有几个优点:

  • 体积小: 1x1像素的GIF图像文件体积非常小,通常只需要几十个字节,这有助于减少网络传输数据量,提高数据上报的效率。

  • 透明性: GIF图像可以设置为完全透明,这样即使在页面上显示,也不会对用户体验造成干扰。

  • 兼容性: GIF格式支持动画和透明,且被所有主流浏览器支持,因此可以确保监控数据的准确上报。

  • 不阻塞页面加载: 由于文件体积小,1x1像素的GIF图像不会对页面加载速度产生影响。

  • 易于隐藏: 由于尺寸极小,这种图像可以轻松地隐藏在页面的角落或边缘,用户几乎无法察觉。

axios 请求/响应拦截器

// 设置请求拦截器
axios.interceptors.request.use(config => {// 请求前的异常检查return config;
}, error => {// 请求错误处理return Promise.reject(error);
});// 设置响应拦截器
axios.interceptors.response.use(response => {// 响应成功的处理return response;
}, error => {// 响应错误处理// 这里可以将错误信息上报给异常监控系统console.error('Axios Response Error:', error);return Promise.reject(error);
});

Vue的errorHandler

在Vue 2中,使用Vue.config.errorHandler来自定义错误处理。

// main.js
Vue.config.errorHandler = (err, vm, info) => {// 错误处理逻辑console.error('Vue 2 Error:', err, info);// 上报错误到监控系统
};// 组件中使用
try {// 可能会抛出错误的代码
} catch (error) {// 捕获异常并调用全局错误处理函数Vue.config.errorHandler(error, this, 'Error in Component');
}

Vue 3中,你可以使用app.config.errorHandler来处理异常

// main.js
import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);app.config.errorHandler = (err, instance, info) => {// 错误处理逻辑console.error('Vue 3 Error:', err, info);// 上报错误到监控系统
};app.mount('#app');

React的ErrorBoundary

import React, { Component } from 'react';class MyComponent extends Component {state = { hasError: false };static getDerivedStateFromError(error) {// 更新state使下一次渲染能够显示降级后的UIreturn { hasError: true };}componentDidCatch(error, info) {// 你也可以将错误日志上报给服务器console.error('React Error:', error, info);}render() {if (this.state.hasError) {// 你可以渲染任何自定义的降级UIreturn <h1>Something went wrong.</h1>;}return this.props.children;}
}export default MyComponent;

try…catch

try…catch语句只能捕获同步错误,对于异步错误(如Promise和setTimeout)则无法捕获

try {// 这里放置可能会引发错误的代码
} catch (error) {// 这里是错误被捕获的地方,你可以在这里处理错误console.log('Error caught:', error);
}

Sentry

Sentry是一个开源的监控系统,能支持服务端与客户端的监控,还有个强大的后台错误分析、报警平台。主要用于如何快速的发现故障。支持几乎所有主流开发语言和平台,并提供了现代化UI,它专门用于监视错误和提取执行适当的事后操作所需的所有信息,官方提供了多个语言的SDK。让开发者第一时间获悉错误信息,并方便的整合进自己和团队的工作流中。

在vue项目里的使用大概步骤,具体可能会有些出入,根据实际应用看吧:
1、安装 Sentry
通过 npm 或 yarn 来安装 Sentry SDK

npm install --save @sentry/vue

2、配置 Sentry
在你的 Vue 项目的入口文件(通常是 main.js 或 main.ts)中,引入 Sentry 并使用你的 DSN 进行初始化:

import { createApp } from 'vue';
import App from './App.vue';
import * as Sentry from '@sentry/vue';
import { Integrations } from '@sentry/tracing';const app = createApp(App);Sentry.init({app,dsn: '你的DSN',integrations: [new Integrations.BrowserTracing()],tracesSampleRate: 1.0,
});app.mount('#app');

3、环境配置
在开发环境中,你可能不希望将错误报告发送到 Sentry,以避免泄露敏感信息。你可以通过环境变量来控制 Sentry 的行为:

const isProduction = import.meta.env.MODE === 'production';if (isProduction) {Sentry.init({app,dsn: '你的DSN',integrations: [new Integrations.BrowserTracing()],tracesSampleRate: 1.0,});
}

4、上传 SourceMap
为了能够更准确地定位到错误发生的源头,你需要配置SourceMap。你可以使用vite-plugin-sentry插件来自动上传SourceMap文件

yarn add @sentry/tracing vite-plugin-sentry
import viteSentry from 'vite-plugin-sentry';export default defineConfig({plugins: [viteSentry({// 你的Sentry DSNurl: 'https://publickey@hostname/1234567890abcdef',authToken: 'yourAuthToken',org: 'yourOrgName',project: 'yourProjectName',release: 'yourReleaseVersion',deploy: {env: 'production',},setCommits: {auto: true,},sourceMaps: {include: ['./src'],ignore: ['node_modules'],urlPrefix: '~/',},}),],build: {sourcemap: true,},
});

5、错误处理
在 Vue 3 中,你可以使用 ErrorHandler 来捕获应用程序中的错误:

import { createApp } from 'vue';
import App from './App.vue';
import { createErrorHandler } from '@sentry/vue';const app = createApp(App);app.config.errorHandler = createErrorHandler({Vue,dsn: '你的DSN',development: false
});app.mount('#app');

6、Sentry 还提供了性能监控功能,你可以使用 BrowserTracing 集成来追踪页面加载和用户交互的性能数据等等


还有一些其他的Fundebug、FrontJS、New Relic、Bugsnag、TrackJS、烛龙等等,,,听说过没用过,具体用的话再去查资料吧。

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

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

相关文章

C#网站系统如何监控登录过期

原理 网站系统监控登录过期通常涉及多个层面的技术和策略。以下是一些建议的方法来实现这一功能&#xff1a; 会话管理 会话超时设置 为每个用户会话设置一个超时时间。一旦用户在这个时间段内没有与系统进行任何交互&#xff0c;会话将被视为过期&#xff0c;用户需要重新…

[QOpenGLWidget+QMouseEvent]实时绘制长方形

复现moho-打卡第1天 - 20240402 1.1--QOpenGLWidget中显示长方形 实现方法&#xff1a;顶点着色器中给定长方形的四个顶点数据&#xff0c;代码如下&#xff1a; // 顶点位置 GLfloat vertics[1][4][3] { {{mousePressPosX,mousePressPosY,0.0},{mousePressPosX,mouseMoveP…

网络爬虫:爬取假数据

网络爬虫&#xff1a;爬取假数据 文章目录 网络爬虫&#xff1a;爬取假数据前言一、项目介绍&#xff1a;二、项目来源&#xff1a;三、架构图&#xff1a;&#xff08;流程图&#xff09;四、使用了什么技术&#xff1a;&#xff08;知识点&#xff09;五、结果示意图&#xf…

Qt使用opencv,进行视频录制,功能打开、关闭摄像头,开始、结束录制视频,暂停、继续录制,并保存视频文件

1.效果图 2 代码实现 2.1 .h文件 #ifndef VIDEORECORDWIDGET_H #define VIDEORECORDWIDGET_H#include <QWidget>#include<QFileDialog>#include <QImage> #include <QLabel> #include <QTimer> #include <opencv2/opencv.hpp>using name…

Linux实验过程

答案截图获取&#xff0c;代写&#xff1a; https://laowangall.oss-cn-beijing.aliyuncs.com/studentall.pdf 基本任务&#xff1a; 1.Linux操作系统安装 2.vi文本编辑 3. Linux用户及文件管理命令 4. Linux权限管理命令 5. Linux网络服务 提高任务&#xff1a; 1、Li…

DIY蓝牙键盘(1) - 理解 键盘报文(免费)

DIY蓝牙键盘(1) - 理解键盘报文 1. 键盘报文体验 一个键盘对于用户的体验是&#xff0c;用户按按键A他能看到字母A会在主机上显示出来。那这是如何实现的&#xff1f; 其实很简单&#xff0c;只要键盘发送下面的两个报文给主机&#xff0c;字母A就能在主机上显示出来。 (1)…

数据结构——图的应用(最小生成树,最短路径,拓扑排序,关键路径)

目录 1.最小生成树 1.概念回顾——生成树 2.最小生成树概念 2.构造最小生成树 1.MST性质 2.Prim算法 3.Kruskal 算法 4.两种算法比较 3.最短路径 1.两点间最短路径 2.某源点到其它各点最短路径 3.单源最短路径——用Dijkstra算法 4.所有顶点间的最短路径…

Flask Python:模糊查询filter和filter_by,数据库多条件查询

数据库&#xff08;sqlalchemy&#xff09;多条件查询 前言一、filter、filter_by实现过滤查询1、filter_by()基础查询并且查询&#xff08;多条件查询&#xff09; 2、filter()like&#xff1a;模糊查询and&#xff1a;并且查询or&#xff1a;或者查询 二、all(),first(),get(…

【一站式学会Kotlin】第一节 kotlin 介绍

作者介绍&#xff1a; 百度资深Android工程师T6&#xff0c;在百度任职7年半。 目前&#xff1a;成立赵小灰代码工作室&#xff0c;欢迎大家找我开发Android、微信小程序、鸿蒙项目。 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默。给大家…

嵌入式系统基础知识(二):什么是实时系统?

实时系统越来越广泛地应用于各个领域&#xff0c;也越来越受到人们的重视。那什么是实时系统呢&#xff1f; 一.定义 实时系统&#xff0c;英文全称为Real-time Operating System&#xff0c;简称RTOS&#xff0c;它的正确性不仅依赖于系统计算的逻辑结果&#xff0c;还依赖于…

中文Mistral模型介绍(Chinese-Mistral)——中文大语言模型

中文Mistral简介 Chinese-Mistral由清华大学地学系地球空间信息科学实验室开发。 该模型基于Mistral发布的Mistral-7B-v0.1训练得到。首先进行中文词表扩充&#xff0c;然后采用实验室提出的PREPARED训练框架&#xff08;under review&#xff09;在中英双语语料上进行增量预训…

RUST语言基本数据类型认识

1.RUST的基本数据类型参考: 2.使用RUST数据类型声明变量并赋值: let a:i81;//8位有符号整数let a1:u82;//8位无符号整数let b:i161;//16位有符号整数let b1:u162;//16位无符号整数let c:i321;//32位有符号整数let c1:u322;//32位无符号整数let d:i641;//64位有符号整数let d1:u…

C#编写MQTT客户端软件

主要参考C#MQTT编程06--MQTT服务器和客户端(winform版)_c#mqttserver-CSDN博客 但由于使用的.NET版本和MQTT库版本存在差异&#xff0c;因此有些不同。 MQTT协议内容在此不做描述&#xff0c;仅介绍VS使用C#的实现过程。本次使用VS2015&#xff0c;.netframwork4.6。 C#语言本身…

SQL server 查询数据库中所有的表名及行数

SQL server 查询数据库中所有的表名及行数 select a.name,b.rows from sysobjects as ainner join sysindexes as bon a.id b.id where (a.type u)and (b.indid in (0, 1)) and b.rows<50 and b.rows>20 order by a.name, b.rows desc;

Express框架搭建项目 node.js

文章目录 引言Express框架介绍express安装环境准备写一个简单的项目展示 文章总结 引言 Express是一个基于Node.js平台的轻量级Web应用框架&#xff0c;它提供了简洁的API和丰富的功能&#xff0c;使得开发者能够快速地构建Web服务器和API。本文将带领大家从零开始&#xff0c…

GDAL源码剖析(六)之GDAL开发及其调试

GDAL源码剖析&#xff08;六&#xff09;之GDAL开发及其调试-CSDN博客 一、简单的调用 关于GDAL的使用&#xff0c;网上的资料都很多&#xff0c;主要还是要熟悉GDAL的组织结构&#xff0c;类以及类的函数等&#xff0c;熟悉了&#xff0c;使用GDAL就不在话下了。最常用的就是…

苹果手表Apple Watch录了两个半小时的录音,却只能播放4秒,同步到手机也一样,还能修复好吗?

好多人遇到这个情况&#xff0c;用苹果手表Apple Watch录音&#xff0c;有的录1个多小时&#xff0c;有的录了3、4小时&#xff0c;甚至更长时间&#xff0c;因为手表没电&#xff0c;忘记保存等原因造成录音损坏&#xff0c;都是只能播放4秒&#xff0c;同步到手机也一样&…

ESTAN:用于乳腺超声图像分割的增强型小肿瘤感知网络

ESTAN&#xff1a;用于乳腺超声图像分割的增强型小肿瘤感知网络 摘要引言 ESTAN Enhanced Small Tumor-Aware Network for Breast Ultrasound Image Segmentation 摘要 乳腺肿瘤分割是用于乳腺癌检测的计算机辅助诊断&#xff08;CAD&#xff09;系统中的关键任务&#xff0c;…

让php开发更优雅-Laravel篇

前言 随着开发经验的增加&#xff0c;也伴随团队开发的积累&#xff0c;规范开发显得越来越重要&#xff0c;本文给大家提供一些laravel开发的进阶思路和经验&#xff0c;让大家开发更加统一规范&#xff0c;代码看起来更加优雅。 1.更多使用第三方库。团队开发的时候&#xf…

Claude-3全解析:图片问答,专业写作能力显著领先GPT-4

人工智能技术的飞速发展正在深刻改变着我们的工作和生活方式。作为一名资深的技术爱好者&#xff0c;我最近有幸体验了备受瞩目的AI助手Claude-3。这款由Anthropic公司推出的新一代智能工具展现出了非凡的实力&#xff0c;尤其在图像识别和专业写作领域的表现更是让人眼前一亮&…