思路

延伸的面试题总结及答案：

1.说说前端监控平台/监控SDK架构设计和难点亮点？

架构设计

数据采集层:

SDK: 在前端集成的 SDK 负责采集数据，包括性能指标、用户行为、错误日志等。
数据收集: 实现高效的数据采集机制，支持实时数据传输，可能使用 fetch、XHR 或 Beacon 等 API。

数据处理层:

数据传输: 数据通过 HTTP 或 WebSocket 发送到服务器，确保传输的可靠性和安全性。
数据存储: 数据存储在数据库中，例如关系型数据库（MySQL）或 NoSQL 数据库（MongoDB）根据需要选择。

数据分析层（需要借助大数据，目前不需要提）:

数据处理: 对采集到的数据进行处理和分析，生成报告和图表，使用数据处理工具或 ETL 工具（如 Apache Kafka、Spark）。
异常检测: 实现自动化的异常检测和警报系统，监控系统的健康状态。

展示层:

仪表盘: 提供可视化界面展示数据，如实时性能监控、错误日志、用户行为分析等。
报表: 生成定制化的报告，支持不同维度的分析（时间、用户、设备等）。

2.统计了哪些数据？为什么不用开源的平台，开源的平台有哪些？

目前：

性能指标：fp，fcp，lcp，静态资源加载，页面加载时间，请求响应时间（fetch，xhr）

错误异常：img图片资源错误，img/css/js资源加载错误，js语法错误

用户行为：点击事件，pv，用户路径变化
 

可拓展：

性能指标：内存使用，CPU使用

错误异常：网络错误

用户行为：表单提交（个人觉得不用）

网络性能：请求次数，请求大小，网络延迟

用户环境：浏览器操作系统，屏幕分辨率，网络类型

系统健康：资源使用情况，服务状态

3.Javascript错误如何统计的？框架的错误如何统计的？

js的错误大致分为3种，js资源加载错误，正常js语法错误，Promise中没有catch的错误，

一般会用addEventListener：error捕获资源加载错误，用window.onerror捕获js错误，Promise的catch的错误，前两种捕获不了，需要用unhandledrejection监听事件去捕获

4.SDK如何实现会话级别的错误上报去重？丢了怎么办？

// 错误信息，错误行号，错误列号，错误文件， uuid，可以用随机数的toString(36)，生成唯一id，绝大概率去保证唯一，丢了也没关系，丢10条20条，不会影响数据结果，面试需注意

5.SDK采用什么样的上报策略？如何实现异常隔离？

 一般是三种情况，img上传，xhr(ajax上传)，sendBeacon，推荐第三种，优先使用sendbeacon，因为会在cpu空余时间，requestIdleCallBack上传，如果浏览器window.navigate不存在这个方法，最好选用img上传，体积最小，性能最好。

异常隔离：sdk错误怎么办？加try catch，一旦sdk加载出现错误，直接catch出去，否则重写方法的错误会导致业务的崩溃

6.平台数据如何进行削峰限流？

削峰限流：sdk在接入某个大流量的系统， 利于秒杀，或者ka商家重点页面，错误增多会影响页面性能，此时要进行限流，可以设置采样率，做流量整形，粗暴的方法，就是Math.random() < 0.5

计数器算法:计数器算法就是单位时间内入库数量固定，后面的数据全部丢弃;缺点是无法应对恶意用户;漏桶算法:漏桶算法就是系统以固有的速率处理请求，当请求太多超过了桶的容量时，请求就会被丢弃;缺点是漏桶算法对于骤增的流量来说缺乏效率;
令牌桶算法:令牌桶算法就是系统会以恒定的速度往固定容量的桶里放入令牌，当请求需要被处理时就会从桶里取一个令牌，当没有令牌可取的时候就会据拒绝服务；

7.用户行为记录栈

有时候，我们需要去获取用户的一个行为追踪记录（比如说：出现了一个线上异常，我们要追溯异常如何发生，也就是说，用户自从打开我们的网站后，看了什么，点击了什么）

一般来说，我们谈论的用户行为记录栈，要追踪的事件包括：

• 路由跳转行为 
• 点击行为
• ajax请求行为
• 用户自定义事件

捕获上面的四个行为，只需要在上述四个时间的代码中做数据捕获就可以了

8.页面停留时长怎么统计

hash history

9.怎么捕获跨域问题

window.addEventListener('error', () => {
    console.log('error 跨域', error)
}, true)


// 当前页面加载其他域的资源
<script src="http://www.baidu.com/xxxxx">

解决方法：

前端 script 加 crossorigin， 后端配置 Access-Control-Allow-Origin

如果不能修改服务端的请求头，可以考虑通过try/catch包含该js的用法，将错误抛出

10.sourceMap错误的信息sourcemap的处理？

监控大屏，监控告警规则