day12 前端监控|青训营笔记

草莓味的海绵宝宝
92 阅读6分钟

这是我参与「第五届青训营 」笔记创作活动的第12天 在浏览器里，从输入URL到页面展示，这中间发生了什么？

输入url 后，首先需要找到这个 url 域名的服务器ip,为了寻找这个ip，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存-》系统缓存-》路由器缓存，缓存中没有则查找系统的 hosts 文件中是否有记录，如果没有则查询 DNS 服务器，得到服务器的ip 地址后，浏览器根据这个ip 以及相应的端口号，构造一个 http 请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个http 请求封装在一个tcp 包中，这个tcp 包会依次经过传输层，网络层， 数据链路层，物理层到达服务器，服务器解析这个请求来作出响应，返回相应的html 给浏览器，因为 html 是一个树形结构，浏览器根据这个 html 来构建 DOM 树，在dom 树的构建过程中如果遇到JS 脚本和外部JS 连接，则会停止构建 DOM 树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐 JS 代码应该放在html 代码的后面，之后根据外部样式，内部样式，内联样式构建一个 CSS 对象模型树CSSOM 树，构建完成后和DOM 树合并为渲染树。

image-20230207200442826.png

1、前端监控到底监控了什么

1.性能指标

2.异常事件

3.用户行为

image-20230207200848471.png

2.前端监控之常用性能指标

传统的性能指标

传统的性能指标主要依赖Navigation Timing 或者Navigation Timing 2,通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。

image-20230207201101381.png

传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。

以用户为中心的性能指标

用户体验指标
发生了什么？FP(First Paint ) , FCP (First Contentful Paint)
内容有用吗？FMP (First Meaningful Paint ) , SI (Speed Index)
内容可用吗？TTI (Time to Interactive )
令人愉悦吗？FID (First Input Delay )

FP (First Paint) :首次渲染的时间点。FP时间点之前，用户看到的都是没有任何内容的白色屏幕。

FCP (First Contentful Paint) :首次有内容渲染的时间点。

FMP (First Meaningful Paint) :首次绘制有意义内容的时间点。

TTl (Time to Interactive) : 测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。

TTl反映页面可用性的重要指标。TTI 值越小，代表用户可以更早地操作页 面，用户体验就更好。

SI (Speed Index) :衡量页面可视区域加载速度，帮助检测页面的加载体验差异。（监控比较少）

image-20230207201717980.png

A和B的首次内容出现和完全加载时间是一样的，但是从用户角度A的体验明显更好。

FID (First Input Delay) :测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间。

以上在实际应用中还是不足，引入了新的性能指标

image-20230207210812763.png

3.前端监控之前端常见异常

静态资源错误

静态资源:加载页面所需的html、CSS 和js等文件，以及其他各类多媒体文件，如 图片、音频和视频等。

静态资源错误:在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常 等，导致静态资源无法正常渲染到页面上。

image-20230207210947870.png

请求异常

Http请求状态码分类

100- 199：信息响应

200-299：成功响应

300 - 399：重定向消息

400 - 499：客户端错误响应

500 - 599：服务端错误响应

请求异常=请求响应状态码>= 400

对于F通过异步请求拉取的静态资源错误也可选择归纳到请求异常

状态码0是什么？

image-20230207211119189.png

请求成功率=请求成功数/ (请求成功数+请求失败数)

JS错误

在页面运行时发生的Js错误会严重影响页面的正常渲染与交互，是前端监控的重点。

image-20230207211320986.png

白屏异常

前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准 化的监听方法，所以更考验前端监控开发者的功底。

通常我们可以通过判断DOM树的结构来粗略的判断白屏是否发生。

image-20230207211415782.png

监听到白屏发生后，我们还需要对白屏的发生进行归因。

通常导致白屏发生的原因可能有如下几点:

1.发生Js错误导致关键资源渲染失败。

2.请求异常或静态资源加载失败。

3.长时间的Js线程繁忙阻塞渲染任务。

4.小试牛刀:监控前端性能与异常

image-20230207211620448.png

利用Performance和PerformanceObserver可以监控到些标准的渲染性能数据

// 1.通过Perfo rmanceObserver 监听
const p = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
console.log (entry);
}
})
p.observe({ entryTypes }) ;
// 2.也可以通过window. performance 对象拿到fp fcp 和fip。
//注意如果同步打印他们是取不到值的，想想为什么?
Window.performance.getEntriesByType( 'paint' ) ;
window.performance.getEntriesByType('first-input');

// 3.封装成一个monitor
function createPerfMonitor(report: ({ name: string,data: any }) => void){   const name ='performance' ;
    const entryTypes = [ 'paint', ' largest-contentful-paint', 'first-input']
function start() {
    const p = new Performance0bserver(list => {
        for (const entry of list. getEntries()) {
            report({ name, data: entry });
        }
    })
    p.observe({ entryTypes });
}
    return { name, start }
}

Js错误监控

image-20230207212155691.png

利用window.addEventListener的error和unhandledrejection可以监控到全局的js错误。

Js错误监控

// 1.监听js执行报错
window.addEventL istener("error", (e) => {
//只有error 属性不为空的ErrorEvent 才是一个合法的js错误
if (e.error) {
    console. Log( 'caputure an error', e.error) ;
    }
});
// throw(new Error( 'test'));
// 2.监听promisere jection
window.addEventListener("unhandledrejection", (e) => {
    console.log( 'capture a unrejection' , e);
});
Promise.reject( 'test') ;

function createJsErrorMonitor(report: ({ name: string, data: any }) =>void) {
    const name = "js-error";
    function start() 
    window.addEventListener("error", (e) => {
    //只有error属性不为空的ErrorEvent 才是一个合法的js 错误
        if(e.error) {
            report({ name, data: { type: e. type, message: e. message } });
        }
    });
    window.addEventL istener (" unhandledrejection", (e) => {
        report({name ,data:{type: e.type,reason: e.reason }});
    });
}
return { name, start }
}

静态资源错误监控

image-20230207212714570.png

利用window.addEventListener的error事件可以监控到静态资源错误，注意要和js error进行区分。

静态资源错误监控

image-20230207212811499.png

请求异常监控

image-20230207212843772.png

image-20230207212856710.png

5.渐入佳境:封装一个通用的sdk

sdk主要完成前两步，后两步需要后端服务和平台的支持，其中前面的章节已经完成了数据采集以及简单的数据组装。

image-20230207213004695.png

临门一脚：数据上报

封装一个用于给监控器上报已收集数据的上报函数

image-20230207213110518.png

avatar
文章
阅读
粉丝