前端监控平台解决了哪些问题：
前端监控平台为开发者提供了一套完整的工具来保障Web应用程序的稳定性、性能和用户体验
相比sentry等监控方案，自研监控的优势有哪些？
安全问题、高度定制化、适配成本
前端监控的区域方向
1、性能监控：前端监控平台可以实时追踪和分析Web应用程序的性能，包括页面加载时间、资源加载时间、API响应时间等关键性能指标。这些数据帮助开发者识别和解决性能瓶颈，优化用户体验。
2、错误收集与诊断：平台能够主动收集并报告前端JavaScript错误、资源加载异常、Promise异常等，提供详细的错误信息和堆栈跟踪，便于开发者快速定位和修复问题。
常规运行错误 try catch
常规运行错误、异步错误 wndow.onerror
资源加载错误 window.addEventListener("error",()=>{})
promist 错误 window.addEventListener("unhandelrejection",()=>{})
vue 错误 Vue.config.errorHandler = () =>{}
react 错误 componentDidcatch
跳转页面错误：路由拦截
Api 错误：统一拦截
3、用户行为数据采集：通过监控用户与页面的交互，如点击、滚动和表单提交，以及用户会话信息，开发者可以了解用户行为，优化用户界面和交互设计。
// 通过检测所有事件、路由、api请求记录用户行为
function domReplace() {
document.addEventListener("click",({ target }) => {
const tagName = target.tagName.toLowerCase();
if (tagName === "body") {
return null;
}
let classNames = target.classList.value;
classNames = classNames !== "" ? ` class="${classNames}"` : "";
const id = target.id ? ` id="${target.id}"` : "";
const innerText = target.innerText;
// 获取包含id、class、innerTextde字符串的标签
let dom = `<${tagName}${id}${
classNames !== "" ? classNames : ""
}>${innerText}</${tagName}>`;
// 上报
reportData({
type: 'Click',
dom
});
},
true
);
}
用户行为包括：页面路由变化、鼠标点击、资源加载、接口调用、代码报错等行为
4、资源监控：监控静态资源（如CSS、图片和字体）的加载情况，确保资源加载的成功率和效率，减少因资源加载问题导致的用户体验下降。
5、API请求监控：追踪与后端API的通信，包括请求成功率、响应时间和返回数据，确保API的稳定性和性能。
6、实时告警：结合腾讯云可观测平台告警能力，提供错误、页面耗时、性能数据等异常告警，当指标超过设定阈值时，实时通知开发者。
7、前后端一体化监控：通过联动后端监控，实现对前端页面加载性能、运行时异常以及API调用状态和耗时的全面监控。
8、自定义监控：允许开发者根据特定需求编写自定义监控脚本，灵活地追踪和分析特定的性能指标或用户行为。
9、数据可视化：提供直观的数据报表和图表，帮助开发者和项目管理者快速了解应用的性能状况和用户行为趋势。
10、安全与隐私保护：确保在处理监控数据时遵守相关隐私法规，保护用户数据不被泄露
错误定位
通过合理配置sourcemap进行定位
该代码可以使map文件打包，存放在一个特定的文件夹中，需要使用的时候进行加载
浏览器只有在开发者工具打开时才会加载 Source Map
Source Map 文件的加载是异步
map文件之所以不能正式环境打包有两方面，
生产环境并不进行映射，但需要上传map文件，即使打开开发者工具，也不会进行加载map文件，避免泄漏敏感信息，避免影响性能，只有需要的时候，开发人员通过地址去手动绑定映射文件，达到定位源码需要
性能监控
dns查询、建立tcp连接、发送http请求、返回html文档、html文档解析等阶段
可以通过 window.performance.timing 来获取加载过程模型中各个阶段的耗时数据
// window.performance.timing 各字段说明
{
navigationStart, // 同一个浏览器上下文中，上一个文档结束时的时间戳。如果没有上一个文档，这个值会和 fetchStart 相同。
unloadEventStart, // 上一个文档 unload 事件触发时的时间戳。如果没有上一个文档，为 0。
unloadEventEnd, // 上一个文档 unload 事件结束时的时间戳。如果没有上一个文档，为 0。
redirectStart, // 表示第一个 http 重定向开始时的时间戳。如果没有重定向或者有一个非同源的重定向，为 0。
redirectEnd, // 表示最后一个 http 重定向结束时的时间戳。如果没有重定向或者有一个非同源的重定向，为 0。
fetchStart, // 表示浏览器准备好使用 http 请求来获取文档的时间戳。这个时间点会在检查任何缓存之前。
domainLookupStart, // 域名查询开始的时间戳。如果使用了持久连接或者本地有缓存，这个值会和 fetchStart 相同。
domainLookupEnd, // 域名查询结束的时间戳。如果使用了持久连接或者本地有缓存，这个值会和 fetchStart 相同。
connectStart, // http 请求向服务器发送连接请求时的时间戳。如果使用了持久连接，这个值会和 fetchStart 相同。
connectEnd, // 浏览器和服务器之前建立连接的时间戳，所有握手和认证过程全部结束。如果使用了持久连接，这个值会和 fetchStart 相同。
secureConnectionStart, // 浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接，返回 0。
requestStart, // 浏览器向服务器发起 http 请求(或者读取本地缓存)时的时间戳，即获取 html 文档。
responseStart, // 浏览器从服务器接收到第一个字节时的时间戳。
responseEnd, // 浏览器从服务器接受到最后一个字节时的时间戳。
domLoading, // dom 结构开始解析的时间戳，document.readyState 的值为 loading。
domInteractive, // dom 结构解析结束，开始加载内嵌资源的时间戳，document.readyState 的状态为 interactive。
domContentLoadedEventStart, // DOMContentLoaded 事件触发时的时间戳，所有需要执行的脚本执行完毕。
domContentLoadedEventEnd, // DOMContentLoaded 事件结束时的时间戳
domComplete, // dom 文档完成解析的时间戳， document.readyState 的值为 complete。
loadEventStart, // load 事件触发的时间。
loadEventEnd // load 时间结束时的时间。
}
播放录屏
多数场景下，定位到具体的源码，就可以定位bug，但如果是用户做了异常操作，或者是在某些复杂操作下才出现的bug，仅仅通过定位源码，还是不能还原错误
要是能把用户的操作都录制下来，然后通过回放来还原错误就好了
监控平台通过 rrweb[3] 可以实现该功能
rrweb不需要用户同意，且视频文件是json对象，方便存储
记录用户行为
通过 定位源码 + 播放录屏 这套组合，还原错误应该够用了，同时监控平台也提供了 记录用户行为 这种方式
假如用户做了很多操作，操作的间隔超过了单次录屏时长，录制的视频可能是不完整的，此时可以借助用户行为来分析用户的操作，帮助复现bug
最终效果：
