资源介绍：

本课程系统讲解前端监控SDK的开发与设计，涵盖性能指标统计、错误捕获、用户行为追踪、数据上报等核心功能。课程从基础性能指标(FP、FCP、LCP)入手，逐步深入静态资源加载、AJAX请求时长、框架错误捕获(Vue、React)等复杂场景，并结合Rollup打包、Node.js服务模拟、SourceMap源码映射等工具实现完整的监控系统。亮点包括批量上报优化、跨域错误处理、用户行为录制(rrweb)等高级功能，帮助学员掌握前端监控的全流程设计与实现，提升项目开发与调试能力

课程目录

• 001-课程大纲和技术路线图-必看
• 002-前端监控全景图概览-做完做好不容易
• 003-前端性能指标定位和详细说明排查实战
• 004-前端资源大小和加载情况统计实战演示
• 005-创建项目-测试web-vitals库的使用
• 006-创建项目-测试web-vitals统计规则
• 007-添加export到出函数
• 008-统计FP FCP LCP的时间
• 009-前端静态资源的统计
• 010-页面load统计时间
• 011-统计ajax的请求时间-xhr
• 012-错误异常信息的统计方式-重点内容
• 013-几种错误捕获错误的方式的区别
• 014-错误信息的收集-逻辑处理
• 015-统计ajax的请求时长-fetch请求的处理
• 016-Vue React框架错误信息的收集和上报
• 017-数据上报逻辑的实现
• 018-数据上报的逻辑优化
• 019-数据上报逻辑优化和改造-批量上报的处理
• 020-用户行为的统计-pv和路由的监听处理
• 021-用户行为的统计-点击事件的逻辑处理
• 022-改造统计指标的入口文件代码逻辑
• 023-改造sdk的入口文件
• 024-rollup打包配置sdk
• 025-完善打包sdk的代码，解决遇到的问题
• 026-详解rollup的配置文件
• 027-创建nodejs服务模拟真实的后端接口
• 028-处理sdk遗留的报错问题
• 029-错误信息收集的代码测试
• 030-页面性能指标的统计上报代码测试
• 031-Vue技术栈项目如何进行错误收集和信息上报
• 032-React技术栈项目如何收集错误信息
• 033-统计用户行为的代码测试
• 034-作为项目的难点和亮点写到简历里面
• 035-跨域的js错误如果处理捕获异常信息
• 036-构建产物sourceMap文件详细说明
• 037-线上错误如何精确定位-自动部署github
• 038-配置sourceMap还原线上的错误信息
• 039-引入source-map-js和errorstatck库
• 040-还原sourceMap文件里面的源代码逻辑
• 041-改造main.ts错误收集报错信息
• 042-改造homeview页面，显示具体的错信息
• 043-typescript一直飘红如何解决
• 044-改造错误定位页面的逻辑
• 045-实现sourceMap源码映射的逻辑
• 046-实现sourceMap映射源代码的错误信息逻辑
• 047-46：实现打包后的js和sourceMap文件关联和映射
• 048-具体错误的定位还原代码美化逻辑
• 049-sourceMap错误还原定位项目难点总结
• 050-rrweb在前端监控当中的作用
• 051-实现rrweb录制用户行为的功能
• 052-rrweb对事件Events的处理
• 053-rrweb实现监控数据的播放功能