在前端监控中，如何捕获并上报未处理的 Promise 拒绝异常？-js教程-PHP中文网

在前端监控中，如何捕获并上报未处理的 Promise 拒绝异常？

夜晨

发布： 2025-10-04 14:44:02

原创

151人浏览过

通过监听 window.addEventListener('unhandledrejection') 捕获未处理的 Promise 拒绝异常，事件对象包含 promise 和 reason 属性，提取 reason 的 message 与 stack 并封装统一上报逻辑，兼容非 Error 类型并添加上下文信息，注意浏览器兼容性与框架拦截问题，可有效实现异步错误监控。

在前端监控中，如何捕获并上报未处理的 promise 拒绝异常？

前端监控中，捕获未处理的 Promise 拒绝异常主要依赖 window.addEventListener('unhandledrejection') 事件。这个事件会在 Promise 被拒绝且没有绑定 catch 处理器时触发，是识别异步错误的关键机制。

监听 unhandledrejection 事件

通过监听全局的 unhandledrejection 事件，可以捕获所有未被处理的 Promise 错误：

事件对象包含 promise 属性（出错的 Promise 实例）和 reason 属性（拒绝原因，通常是 Error 对象或字符串）
在回调中提取 reason 并格式化为可上报的信息
建议对 reason 做类型判断，避免非 Error 类型导致序列化问题

示例代码：

window.addEventListener('unhandledrejection', event => {
  const reason = event.reason;
  const message = reason instanceof Error ? reason.message : String(reason);
  const stack = reason?.stack || '';

  // 上报到监控服务
  reportToMonitor({
    type: 'promise_rejection',
    message,
    stack,
    timestamp: Date.now()
  });
});

登录后复制