推荐选题：
-
前端监控系统
-
Low-code 平台
-
仿掘金平台
第四届青训营-前端 「大项目资料汇总」 - 飞书文档 (feishu.cn)
iOS SDK接入 应用性能监控全链路版-火山引擎 (volcengine.com)
项目仓库地址：前端监控项目: 字节训练营前端监控项目 (gitee.com)
github仓库：https://github.com/FLY200117/MonitoringProject.git
通过在前端嵌入监控SDK，来收集错误信息，收集完数据后，对数据进行建模存储，再实时进行数据传输，然后在服务端对错误信息过滤和整合，在可视化平台上渲染错误信息，定位线上错误，也可以进行报告和报警，然后通过数据可视化或者报告再去合适调整埋点，本次的系统项目就略了报告和报警
埋点 ——> 信息收集处理 ——> 信息发送到服务端 ——> 服务端整合信息 ——> 可视化平台
整个过程中需要实现的有三部分：
- 监控SDK（埋点，数据采集）
- 服务端错误信息过滤和整合（Express）
- 可视化平台搭建（vue-admin）
在整体代码架构上采用发布-订阅设计模式，处理逻辑统一在src/index.js文件中
大致的信息有：
http（主要是ajax请求）
api（接口错误，可以重写xhr，fetch事件）
error（错误信息）
console（控制台信息）
History/Hashchange（触发路由信息）
UnhandleRejection（当触发reject但没有处理的时候会触发该函数）
用户行为（例如click，触发哪个接口）
vue层错误处理
自定义错误
大致的思路是重写js上这些信息的原生事件
把大致信息分成三类
| 错误名称 | 备注 |
|---|---|
| 代码错误 | 主要是指js代码执行错误或者框架错误或者promise异常 |
| 资源异常 | script，link等资源加载异常 |
| 白屏 | 页面空白（dom元素还没有渲染出来） |
| 各类指标 | 备注 |
|---|---|
| 加载时间 | 各个阶段的加载时间 |
| TTFB（首字节时间） | 是指刘览器发起第一个请求到数据返回第一个字节所消耗的时间，这个时间包含了网络请求时间、后端处理时间 |
| FP（首次绘制） | 首次绘制包活了任何用户自定义的背景绘制，它是将第一个像案点绘制到屏幕的时刻 |
| FCP（首次内容绘制） | 首次内容会制是刘览器将第一个DOM消染到屏幕的时间。可以是任何文本、图像、SVG等的时间 |
| FMP（首次有意义绘制） | 首次有意义会制是页面可用性的量度标准 |
| FID（首次输入延迟） | 用户首次和贞面交互到贞面响应交互的时间 |
| 卡顿 | 超过50ms的长任务 |
| 错误名称 | ||
|---|---|---|
| 首次输入延迟 | 延迟的时间 + 处理的时间 + 首次输入的起始时间 | |
| 性能 | 连接时间 + 首字节到达时间 + 响应的读取时间 + DOM解析的时间 + DOM内容加载时间 + 首次可交互时间 + 完整加载时间 | |
| 绘制 | FP，FCP，FMP，LCP四个指标的开始时间 |
| 错误名称 | 备注 |
|---|---|
| PV | page view即页面刘览量或点击量 |
| UV | 指访问某个站点的不同引P地址的人救 |
| 用户页面停留时间 | 用户在每一个页面的停留时间 |
| 错误名称 | 备注 |
|---|---|
| 请求链路 | |
| 成功率 | |
| 返回信息 |
在字节的监控SDK中，为了能适配多平台，并且减轻打包体积，满足开发需求，他们将SDK进行逻辑解耦，设计的目的是同一套设计组装成不同的SDK。为此，字节设计了5个不同的角色用来完成对应约定的接口，这样就保证了不同环境下各个角色合作的方式是相同的。
Monitor（收集器）
Builder（组装器）
Client（实际主体）
Sender（发送器）
ConfigManager（配置管理器）
埋点的意思就是在页面中使用脚本的方法去获取或者监听页面中一个格式和dom等
常见的埋点有以下几种：
代码埋点
- 嵌入式代码的形式
- 优点：精确
- 缺点：嵌入式代码可能会影响到正常代码的运行
可视化埋点
- 通过可视化交互的手段，代替代码埋点
- 将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个系统，可以在业务代码中自定义的增加埋点事件等等，最后输出的代码耦合了业务代码和埋点代码
- 用系统来代替手工插入埋点代码
无痕埋点
- 前端的任意一个事件被绑定一个标识，所有的事件都被记录下来
- 通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析
- 无痕埋点的优点是采集全量数据，不会出现漏埋和误埋等现象
- 缺点是给数据传输和服务器增加压力，也无法灵活定制数据结构
日志服务是采用的express中的morgan日志打印，能在开启express服务后在服务端看到接口情况
{
"title": "前端监控系统", // 页面标题
"url": "http://localhost:8080/", //页面url
"timestamp": "1590815288710", //访问时间戳
"userAgent": "Chrome", //用户浏览器类型
"kind": "stability", //信息大类
"type": "error", //信息小类
"errorType": "jsError", //错误类型
"message": "Uncaught ...", //错误详情
"filename": "http://localhost:8080", //访问的文件名
"position": "0:0", //行列信息
"stack": "btnClick", //堆栈信息
"selector": "" //选择器
}参考产品：
【阿里巴巴前端练习生计划】第三名：简易前端监控系统_哔哩哔哩_bilibili
以及一些github上开源的SDK
目前的计划是服务端使用node中的Express，服务端需要与SDK相结合，利用SDK收集到的错误进行一个统一的管理再发送到可视化平台，在与SDK开发的过程中需要先mock数据进行协调开发，等开发阶段进入尾声再进行对接。
可视化平台主要是以vue-element-admin为主，页面设计自拟，在数据图像上使用ECharts
可视化主要是以下几个方面：
- 8/3：使用打包工具基本完成项目搭建，使用订阅开发者模式进行项目开发
- 8/4：捕获js错误和promise错误完成，捕获资源加载型错误失败，原因未知
- 8/5：捕获资源加载型错误成功，目测是webpack-dev-server内部拦截了错误，完成了对ajax方法的监听，完成了白屏信息的收集
- 8/6：完成了FP，FCP，FMP，LCP等各性能指标的监听获取
- 8/17：完成SDK方面的制作，在express端监听数据，除了用户统计，其余都完成数据收集，存储到本地mongose中
- 8/18：完成前端错误上报页面
- 8/24：项目基本完成，提交作业