在 unhandledrejection 事件处理程序中获取堆栈跟踪

Question

当我仅使用 onunhandledrejection 处理程序捕获 Promise 拒绝时，如何确定它发生在哪里？

console.error = ()=>{}
window.addEventListener('unhandledrejection', (promiseRejectionEvent) => {
  console.log('unhandled: ', Error().stack)
})

function main() {
  new Promise(() => { throw null })
}
main()

如果您在运行此程序后检查浏览器的控制台，您将看到如下内容：

Error().stack 仅在其堆栈跟踪中包含拒绝处理函数本身（灰色输出 js:14:30）。但浏览器确实 似乎知道拒绝发生在哪里：还有另一个红色错误输出 (Uncaught (in promise) null)，指向目标行 (js:18)。如何获取此线路信息？

似乎后者的输出是由浏览器的内部完成的，因为它不能通过覆盖console.error 来防止，就像上面的例子一样。只能通过调用promiseRejectionEvent.preventDefault() 来预防，如MDN 中所述。但我不想阻止它，而是取而代之，例如用于记录目的。

真实世界用例：当然可以不依赖onunhandledrejection 事件处理程序，例如通过添加.catch() 短语或至少抛出throw new Error(null)。但就我而言，我无法控制它，因为它是第三方代码。今天它在客户端的浏览器上意外抛出（可能是库错误），并且自动错误报告不包括堆栈跟踪。我试图缩小上述潜在问题的范围。谢谢！

---

编辑以响应 cmets：

将第三方代码包装在 try/catch 中？ – 世界观

好点，但这无济于事，因为拒绝实际上发生在回调中：

window.addEventListener('unhandledrejection', (promiseRejectionEvent) => {
  console.log('unhandled: ', Error().stack) // <- stack once again does *not* include "main()", it is only printed out in the console
})

function main() {
  try {
    thirdPartyModule()
  } catch(e) {
    // Never caught
    console.log("caught:", e)
  }
}

// Example code
// We cannot change this function
function thirdPartyModule() {
  setTimeout(() =>
    new Promise(() =>
      { throw null }))
}

main()

Answer 1

没有任何好的解决方案可以开箱即用地跟踪异步堆栈跟踪，但可以使用Zone.js。如果您查看 Zone.js 页面上的演示，这里有异步堆栈跟踪的示例。

Zone 通过猴子修补所有创建异步任务的原生 API 来实现这一点。

Answer 2

这是不可能的。

我想您想要的“堆栈跟踪”将包含带有 throw null; 的行，但是，当调用 unhandledrejection 事件处理程序时，它不在堆栈中。在执行throw null; 时，不会直接（同步）调用处理程序，而是将调用处理程序的微任务排队。 （有关事件循环、任务和微任务的说明，请参阅"In The Loop" by Jake Archibald。）

这可以通过在抛出错误之前排队一个微任务来测试。如果 throwing 同步调用处理程序，则微任务应该在它之后执行，但如果 throwing 将调用处理程序的微任务排队，则第一个微任务首先执行，然后是第二个（调用处理程序）。

window.addEventListener('unhandledrejection', (promiseRejectionEvent) => {
  console.log('unhandled: ', Error().stack) // <- stack once again does *not* include "main()", it is only printed out in the console
})

function main() {
  try {
    thirdPartyModule()
  } catch (e) {
    // Never caught
    console.log("caught:", e)
  }
}

// Example code
// We cannot change this function
function thirdPartyModule() {
  setTimeout(() =>
    new Promise(() => {
      Promise.resolve().then(() => { // Queue a microtask before throwing
        console.log("Microtask")
      })
      throw null
    }))
}

main()

如您所见，我们的微任务首先执行，这意味着处理程序在微任务中被调用。处理程序位于堆栈的顶部。