前端如何监控和处理错误？

探讨了使用 try-catch、全局错误处理、资源加载监听、Promise 异步错误捕获以及框架特定方法来监控和处理 JavaScript 错误。还介绍了 Sentry 等常用工具的集成与应用。

JavaScript 中等 错误处理 错误监控 调试工具

常见方法包括以下几种：

  1. Try-Catch Block（同步错误捕获）：用于包裹特定代码块以捕获同步执行中的错误，但不适用于异步错误或资源加载错误。示例代码： 
    try {
  // 可能抛错的代码
} catch (error) {
  // 上报错误至服务器
  fetch('/error-log', { method: 'POST', body: JSON.stringify(error) });
}
  2. 全局窗口错误处理（Window.onError）：覆盖 window.onerror 函数可捕获 JavaScript 执行错误，包括跨域脚本错误（需配置 crossorigin 属性）。示例： 
    window.onerror = function(message, source, lineno, colno, error) {
  // 消息、来源文件、行列号记录
  console.error(`Error at ${source}:${lineno}`); 
};
  3. 资源加载错误监听：使用 addEventListener('error', callback, true) 在捕获阶段监听资源失败事件（如 JS、CSS、Img 加载失败）。示例： 
    window.addEventListener('error', function(event) {
  if (event.target !== window) {
 // 上报资源类型（如 img）、URL 和错误信息
 console.log(`Resource error: ${event.target.tagName}`);
  }
}, true);
  4. 异步错误处理：Promise 异常捕获：监听 unhandledrejection 事件处理未处理的 Promise 拒绝错误。示例： 
    window.addEventListener('unhandledrejection', function(event) {
  console.error('Unhandled rejection:', event.reason);
});
  5. 框架特定方法：适用于 Vue、React 等框架。
    • React：利用 componentDidCatch 生命周期钩子捕获组件错误边界内异常。
    • Vue：使用 Vue.config.errorHandler 全局错误处理器。

常见工具包括：

  • Sentry：开源错误监控平台，通过集成 SDK 自动收集 JS 错误信息，并提供丰富上下文（类型、消息、堆栈），需安装 SDK 并初始化。
  • 其他工具：如 Bugsnag、Rollbar 等，提供类似自动化错误报告与日志管理。

实践中推荐组合使用上述方法：全局监听基础错误，Try-Catch 覆盖关键逻辑，Sentry 等工具实现团队协作与问题分析。