前端错误监控系统需全面捕获JavaScript、Promise、资源加载及框架异常，结合自定义上报，通过结构化数据（含错误类型、堆栈、上下文等）上报，支持Source Map还原，采用模块化SDK设计，集成插件机制与生命周期钩子，优化上报策略如异步批量发送、本地缓存重发与采样控制，确保性能与数据完整性。
前端错误监控与上报系统的核心目标是及时发现、收集并分析用户端发生的异常，帮助团队快速定位和修复问题。要设计一个可扩展的系统，需兼顾性能、兼容性、灵活性和数据价值。
1. 全面捕获各类前端错误
确保系统能覆盖所有常见错误类型，避免遗漏关键信息：
- JavaScript 运行时错误：通过 window.onerror 捕获全局错误，获取错误信息、文件路径、行号、列号。
- Promise 异常：使用 window.addEventListener('unhandledrejection') 监听未处理的 Promise 错误。
- 资源加载失败：监听 window.addEventListener('error') 并判断 event.target 是否为 script、img 等标签。
- Vue/React 等框架错误：利用框架提供的错误钩子，如 Vue 的 app.config.errorHandler 或 React 的 Error Boundary 结合 componentDidCatch 上报。
- 自定义业务异常：提供统一的 captureException 方法供开发者主动上报逻辑错误或接口异常。
2. 构建结构化且可扩展的上报模型
上报数据应标准化，便于后端解析与存储。每个错误事件包含以下核心字段：
- 错误类型：区分 jsError、promiseError、resourceError、customError 等。
- 错误堆栈（stack）：保留原始 stack 字符串，用于源码映射还原。
- 发生时间：精确到毫秒的时间戳。
- 上下文信息：包括 URL、userAgent、设备类型、网络状态、用户 ID（若已登录）、页面状态等。
- SDK 版本与项目标识：支持多项目、多版本错误隔离分析。
使用 JSON 格式发送，通过 POST 请求上报至统一接口。可配置采样率（如 10%）防止突发流量冲击服务。
立即学习“前端免费学习笔记（深入）”；
3. 支持 Source Map 错误还原
生产环境代码经过压缩混淆，原始堆栈无法直接定位源码。系统需支持：
- 构建阶段自动上传 Source Map 文件到服务器或对象存储。
- 上报时携带 sourceMapUrl 或根据 bundle 文件名自动匹配。
- 后端或边缘服务解析 stack trace，还原出原始文件路径与行列号。
也可在客户端集成轻量级 map 解析库（如 sourcemap-decoder），但需权衡体积与性能。
4. 可插拔架构与 SDK 设计
SDK 应具备模块化设计，方便功能扩展与按需加载：
- 核心模块负责错误收集、队列管理、请求发送。
- 插件机制支持接入性能监控、用户行为追踪、日志聚合等功能。
- 暴露生命周期钩子，如 beforeSend，允许开发者过滤或添加上下文数据。
- 支持动态配置更新，如开启/关闭某些错误类型上报。
5. 上报策略优化与容错
避免影响主流程性能，同时保证数据不丢失：
- 错误先存入内存队列，异步批量上报（如每 5 条或每 30 秒）。
- 网络失败时本地缓存（localStorage 或 IndexedDB），恢复后重发。
- 限制单页上报频率，防止重复错误刷屏。
- 使用 navigator.sendBeacon 在页面卸载前发送最后一条日志。
