网站群建设 公司,市政道路毕业设计代做网站,joomla做类似赶集网的网站,外贸哪个行业比较好做1 背景
前端监控系统告警xx接口fetchError 问题#xff1a;前端监控系统没有更多的错误信息#xff0c;查询该fetch请求对应的接口日志返回200状态码、无请求异常记录#xff0c;且后台能查到通过该fetch请求成功发送的数据。那是前端页面的错误还是前端监控系统的问题前端监控系统没有更多的错误信息查询该fetch请求对应的接口日志返回200状态码、无请求异常记录且后台能查到通过该fetch请求成功发送的数据。那是前端页面的错误还是前端监控系统的问题如何证明
2 思考
在前端测获取页面 fetch 请求信息通过 Window.performance 访问窗口中运行的代码的性能信息Window.performance.getEntries()可以拿到 fetch 请求信息但是拿不到Axios请求信息然后通过埋点将页面性能信息上报。
3 performance相关知识 4 上代码
注意加try catch /*** returns 上报当前页面资源情况*/reportPerformance () {try {const params {resource: window.performance.getEntries(),network: deepCopy(window.navigator.connection),pagePerformance: window.performance.toJSON(),}if (window.performance?.memory) params.memory new Memory()return this.report(performance, params)// 调用埋点上报的方法} catch (e) {return this.report(fe_error, { message: e?.message, stack: e?.stack })}}上报的params结果贴出来
fetchStart返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。 domInteractive返回当前网页DOM结构结束解析、开始加载内嵌资源时即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时的Unix毫秒时间戳。 domContentLoadedEventEnd返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。
使用示例
计算某fetch请求的请求时间 performance的fetchStart performance.getEntries()的fetch请求的startTime
new Date(1728720141830 726.1000000238419)计算白屏时间用户看到页面展示出现一个元素的时间 可以直接采用performance的 domInteractive - fetchStart 获取耗时此时页面资源加载完成即将进入渲染环节。 计算首屏时间 首屏时间是指页面第一屏所有资源完整展示的时间。这是一个对用户来说非常直接的体验指标但是对于前端却是一个非常难以统计衡量的指标。可以使用performance的 domContentLoadedEventEnd - fetchStart 获取耗时此时页面DOM树已经解析完成并且显示内容
参考
MDN - Performance
