文章目录
- 常见异常类型
- 常用的一些异常监控的方法
- 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、烛龙等等,,,听说过没用过,具体用的话再去查资料吧。