无需登录 数据私有 本地保存

前端错误监控面板 - 捕获并展示 JS 异常

开发工具 调试 异常 日志 监控 错误
34
0
0
0
0
总错误数
0
JS 异常
0
Promise 拒绝
0
资源错误
监控中
🔬 模拟错误：
🛡️
监控已就绪，暂无错误

点击上方「模拟错误」按钮来测试监控面板，或正常使用页面，异常将自动捕获。

常见问题与知识

前端错误监控是指在网页或Web应用运行过程中，实时捕获JavaScript运行时错误、Promise未处理拒绝、资源加载失败等异常情况，并汇总展示。它帮助开发者在用户遇到问题前主动发现Bug，提升应用稳定性和用户体验。在生产环境中，用户设备上的错误往往难以复现，错误监控是定位问题的关键手段。

window.onerror 只能绑定一个处理函数，后绑定的会覆盖前者，且只能捕获JavaScript运行时错误。而 addEventListener('error', handler, true) 使用捕获阶段可以同时捕获JS错误和资源加载错误（如图片、脚本404），支持多个监听器共存，是更推荐的现代做法。本工具即使用 addEventListener 方式进行全局错误捕获。

使用 window.addEventListener('unhandledrejection', handler) 可以捕获所有未被 .catch() 处理的Promise拒绝。这在现代异步编程中非常重要，因为未处理的Promise拒绝不会触发 window.onerror，但同样会导致应用状态异常。Node.js 中也有类似的 process.on('unhandledRejection') 事件。

Source Map 是压缩/编译后代码与原始源代码之间的映射文件。生产环境中JS代码通常经过压缩、混淆或TypeScript编译，错误堆栈中的行号指向的是处理后的代码，难以阅读。Source Map 可以将这些行号映射回原始源代码，帮助开发者快速定位问题。主流构建工具（Webpack、Vite、esbuild）都支持生成Source Map，错误监控平台（如Sentry、LogRocket）也支持上传和解析Source Map。

常见JS错误类型包括：TypeError（类型错误，如访问null的属性）、ReferenceError（引用未定义的变量）、RangeError（数值超出范围）、SyntaxError（语法错误）、URIError（URI编解码错误）、EvalError（eval相关错误）。此外还有资源加载错误（如图片404）、Promise未处理拒绝等。了解这些类型有助于快速分类和定位问题。

生产环境错误监控通常包括以下步骤：1）使用全局错误监听器（error + unhandledrejection）捕获异常；2）收集错误信息（消息、堆栈、用户行为、设备信息等）；3）将错误数据上报到后端服务或第三方平台（如Sentry、Fundebug、阿里ARMS）；4）在后端进行聚合分析、告警通知；5）配合Source Map还原原始代码位置。需要注意的是，上报时应进行采样和去重，避免大量相同错误淹没服务器。
🔧 相关工具