前端错误收集方式

在讲错误收集方式之前，先理清一下前端编码时有那些常见错误

前端错误收集是保障用户体验、排查线上问题的关键手段。本文将从多个角度详解前端错误收集的各种方式，包括不同框架（如 React、Vue）、JavaScript 执行环境中的同步/异步/Promise 错误、资源加载错误（如图片、script 加载失败）等。以下是全面的错误捕获机制总结：

#🌐 一、通用错误收集方式（原生 JavaScript）

#1. try...catch 捕获同步代码错误

复制try {
  
  let result = a.b; 
} catch (err) {
  console.error('捕获同步错误:', err);
}

注意：

• 只能捕获同步代码错误，不能捕获异步或事件回调内的错误。

#2. window.onerror

复制window.onerror = function (message, source, lineno, colno, error) {
  console.error('window.onerror 捕获：', { message, source, lineno, colno, error });
};

特性：

• 可捕获运行时错误，包括未捕获的异常。
• 跨域脚本错误默认不会暴露具体信息，需设置 crossorigin 属性和响应头。

#3. window.addEventListener('error') 捕获资源加载错误

复制window.addEventListener('error', function (event) {
  if (event.target instanceof HTMLScriptElement || event.target instanceof HTMLImageElement) {
    console.error('资源加载错误:', event.target.src || event.target.href);
  } else {
    console.error('运行时错误:', event.message);
  }
}, true); 

优点：

• 能捕获 <img>, <script>, <link> 等静态资源加载错误。

#4. unhandledrejection 捕获未处理的 Promise 异常

复制window.addEventListener('unhandledrejection', function (event) {
  console.error('未处理的 Promise 异常:', event.reason);
});

场景：

• Promise 的 .catch() 未添加或写在不合适位置。

#⚛️ 二、React 中的错误捕获

#1. React 16+ 错误边界（Error Boundaries）

复制class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('React 错误捕获:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h2>出错了</h2>;
    }
    return this.props.children;
  }
}

限制：

• 只能捕获子组件生命周期、render、构造函数中的错误。

• 不能捕获：

  • 异步代码（如 setTimeout）
  • 事件处理函数错误
  • SSR 期间的错误

#🐸 三、Vue 中的错误捕获

#1. Vue 2.x errorHandler

复制Vue.config.errorHandler = function (err, vm, info) {
  console.error('Vue 错误:', err, info);
};

#2. Vue 3.x app.config.errorHandler

复制const app = Vue.createApp(App);

app.config.errorHandler = (err, instance, info) => {
  console.error('Vue3 错误:', err, info);
};

#3. 异步函数中的错误

异步函数内的错误需要使用 try/catch 或监听 unhandledrejection。

#🧠 四、异步任务中的错误处理方式

#1. setTimeout、setInterval

复制setTimeout(() => {
  try {
    throw new Error('异步定时错误');
  } catch (err) {
    console.error('捕获异步错误:', err);
  }
}, 1000);

#2. Promise 中的异常

复制new Promise((resolve, reject) => {
  throw new Error('Promise 内部异常'); 
});

#3. async/await 异常处理

复制async function test() {
  try {
    await fetch('...');
    throw new Error('异步错误');
  } catch (e) {
    console.error('async/await 错误:', e);
  }
}

#🖼️ 五、资源加载错误（图片、脚本等）

#图片加载失败

复制<img src="wrong.png" onerror="console.error('图片加载失败')" />

#脚本加载失败

复制<script src="wrong.js" onerror="console.error('JS 加载失败')"></script>

全局监听

复制window.addEventListener('error', function (e) {
  if (e.target.tagName === 'IMG' || e.target.tagName === 'SCRIPT') {
    console.error('资源加载失败:', e.target.src || e.target.href);
  }
}, true);

#📦 六、前端错误上报实践建议

1. 统一封装错误上报工具

   复制function reportError(errorInfo) {
     
     fetch('/log', {
       method: 'POST',
       body: JSON.stringify(errorInfo),
     });
   }
   

2. 错误去重、限频

   • 防止相同错误反复上报。

3. 结合 Source Map

   • 错误行号定位需要 source map 还原。

4. 配合监控平台（如 Sentry、Fundebug、LogRocket）

   • 可视化查看错误堆栈、用户行为路径等。

#✅ 总结

如需我帮你生成一个完整的错误收集 SDK、结合你项目的架构，欢迎告诉我。

下面是一个通用的前端错误收集 SDK，适用于纯 JavaScript 应用，也兼容 React、Vue 等框架。具备如下能力：

• 捕获同步错误（try/catch）
• 捕获未处理的 Promise 错误
• 捕获资源加载失败（如图片、脚本）
• 可扩展支持自定义上报方式
• 可用于构建自己的埋点/监控平台

#✅ 错误收集 SDK 示例（error-tracker.js）

复制class ErrorTracker {
  constructor(options = {}) {
    this.reportUrl = options.reportUrl || '/report-error';
    this.extraContext = options.context || {};
    this.init();
  }

  init() {
    this.bindGlobalError();
    this.bindPromiseRejection();
    this.bindResourceError();
  }

  bindGlobalError() {
    window.onerror = (message, source, lineno, colno, error) => {
      const errorInfo = {
        type: 'js-error',
        message,
        source,
        lineno,
        colno,
        stack: error?.stack,
        ...this.extraContext,
      };
      this.report(errorInfo);
    };
  }

  bindPromiseRejection() {
    window.addEventListener('unhandledrejection', (event) => {
      const errorInfo = {
        type: 'unhandledrejection',
        reason: event.reason?.message || String(event.reason),
        stack: event.reason?.stack || null,
        ...this.extraContext,
      };
      this.report(errorInfo);
    });
  }

  bindResourceError() {
    window.addEventListener(
      'error',
      (event) => {
        if (event.target && (event.target.src || event.target.href)) {
          const errorInfo = {
            type: 'resource-error',
            tagName: event.target.tagName,
            url: event.target.src || event.target.href,
            outerHTML: event.target.outerHTML,
            ...this.extraContext,
          };
          this.report(errorInfo);
        }
      },
      true 
    );
  }

  report(errorData) {
    try {
      navigator.sendBeacon
        ? navigator.sendBeacon(this.reportUrl, JSON.stringify(errorData))
        : fetch(this.reportUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(errorData),
          });
    } catch (err) {
      console.warn('错误上报失败:', err);
    }
  }

  
  captureException(error, context = {}) {
    const errorInfo = {
      type: 'manual-capture',
      message: error.message,
      stack: error.stack,
      ...this.extraContext,
      ...context,
    };
    this.report(errorInfo);
  }
}

export default ErrorTracker;

#🧪 使用方法

#1. 初始化

复制import ErrorTracker from './error-tracker';

const tracker = new ErrorTracker({
  reportUrl: 'https://your-domain.com/log-collector',
  context: {
    appVersion: '1.0.0',
    userId: '123456',
  },
});

#2. 手动捕获异常（适用于 try/catch 或自定义埋点）

复制try {
  throw new Error('业务异常');
} catch (e) {
  tracker.captureException(e, { module: 'UserProfile' });
}

#🛠️ 后端上报接口示例（Node.js）

复制app.post('/report-error', express.json(), (req, res) => {
  console.log('错误上报:', req.body);
  
  res.status(200).send('ok');
});

#💡 可扩展建议

• 加入节流、去重机制（防止重复错误刷爆接口）
• 支持用户行为轨迹记录（如点击、页面跳转）
• 上报前过滤第三方脚本错误
• 使用 Source Map 解码堆栈信息