Sentry
Sentry性能监控原理
通过 window.performance.getEntries 和 performanceObserver 这两个 api，获取用户在使用应用过程中涉及的 load 相关、fcp、lcp、fid、cls 等指标数据，然后通过接口上报。监控平台拿到数据以后，通过可视化图标的方式展示性能指标数据，帮助我们分析。
性能指标捕获方式
性能指标（Performance API）
Performance API 是浏览器提供的一组接口，用于测量和分析网页的性能表现。它可以帮助开发者监控页面加载时间、资源加载效率、用户交互延迟等关键指标，从而优化用户体验
示例：使用PerformanceObserver 监听 paint 类型的性能条目
/**
* 监控首次内容绘制(FCP)性能指标 observerFCP.js
* 使用 PerformanceObserver 监听 paint 类型的性能条目
* 当检测到 first-contentful-paint 条目时收集性能数据并上报
*
* 返回值：无
*/
export default function observerFCP() {
/**
* 处理性能观察条目
* @param {PerformanceObserverEntryList} list - 性能观察条目列表
*/
const entryHandler = (list) => {
// 遍历所有性能条目寻找 FCP 指标
for (const entry of list.getEntries()) {
if (entry.name === "first-contentful-paint") {
// 停止观察避免重复上报
observerr.disconnect();
// 准备上报数据结构
// 发送数据 todo
}
}
};
/* 创建性能观察者实例，用于监听浏览器性能事件 */
const observerr = new PerformanceObserver(entryHandler);
/* 开始观察 paint 类型的性能条目，buffered 模式确保能捕获已发生的条目 */
observerr.observe({ type: "paint", buffered: true });
}
如何进行上报
上报方式
navigator.sendBeacon
原理：使用navigator.sendBeacon()发送异步POST请求
Image对象（GET请求）
原理：通过创建一个 1x1 的图片元素，将错误信息编码到图片的 URL 查询参数中，触发 GET 请求。（同样尺寸，gif格式的图最小）
前端异常及捕获方式：（juejin.cn/post/714542…
js代码执行时异常；promise类型异常；资源加载类型异常；网络请求类型异常；跨域脚本执行异常；
js 代码执行时异常
通过 try...catch 语句块来捕获这一类型异常。如果不使用 try...catch，我们也可以通过 window.onerror = callback 或者 window.addEventListener('error', callback) 的方式进行全局捕获。
promise 类异常
使用 promise 时，如果 promise 被 reject 但没有做 catch 处理时，就会抛出 promise 类异常。
需要通过 window.onrejectionhandled = callback 或者 window.addListener('rejectionhandled'， callback) 的方式去全局捕获。
静态资源加载类型异常
有的时候，如果我们页面的img、js、css 等资源链接失效，就会提示资源类型加载如异常。
通过 window.addEventListener('error', callback, true) 的方式进行全局捕获。
接口请求类型异常
不同的请求方式，异常捕获方式也不相同:
-
接口调用是通过
fetch发起的我们可以通过
fetch(url).then(callback).catch(callback)的方式去捕获异常。 -
接口调用通过
xhr实例发起如果是
xhr.open方法执行时出现异常，可以通过window.addEventListener('error', callback)或者window.onerror的方式捕获异常。
跨域脚本执行异常
通过 window.addEventListener('error', callback) 或者 window.onerror 的方式捕获异常。
