前端错误处理全攻略：从捕获到恢复的完整方案

1. 为什么前端报错处理如此重要？

上周五晚上8点，当我正准备收拾东西回家时，产品经理突然发来消息："用户反馈支付页面白屏了！"。我打开控制台，满屏的红色报错让我瞬间清醒 - 又是一个未捕获的Promise错误导致整个应用崩溃。那天晚上，我花了整整3小时才定位到问题根源，而类似的场景在过去5年前端生涯中已经上演了无数次。

前端错误处理之所以棘手，是因为它处于用户交互的第一线。一个未处理的异常可能导致：

• 关键功能中断（如支付流程）
• 糟糕的用户体验（白屏/卡死）
• 难以追踪的线上问题（缺乏有效日志）

更可怕的是，浏览器环境的复杂性让错误处理变得异常困难。同样的代码在不同浏览器可能表现迥异，而移动端网络波动带来的问题在开发环境又难以复现。

2. 构建完整的错误防御体系

2.1 错误分类与应对策略

我把前端错误归纳为四大类，每种需要不同的处理方式：

2.2 全局错误捕获方案

javascript复制// 最基础的错误捕获往往不够用
window.addEventListener('error', (event) => {
  // 这里只能捕获运行时错误，无法处理Promise rejection
});

// 完整方案需要组合以下监听器
const setupErrorHandling = () => {
  // 常规运行时错误
  window.addEventListener('error', handleRuntimeError);
  
  // 未处理的Promise rejection
  window.addEventListener('unhandledrejection', handlePromiseRejection);
  
  // 框架级错误（以React为例）
  if (typeof ErrorUtils !== 'undefined') {
    ErrorUtils.setGlobalHandler(handleFrameworkError);
  }
  
  // 网络请求错误（需封装统一请求库）
  axios.interceptors.response.use(
    response => response,
    handleNetworkError
  );
};

关键细节：window.onerror无法捕获跨域脚本错误（只会显示"Script error."），需要给script标签添加crossorigin属性并在服务器端设置CORS头。

2.3 错误边界（Error