为什么新 Promise 的 reject() 在可怕的“Uncaught (in promise)”错误中丢失堆栈跟踪

Question

在 Angular 的 github 问题、谷歌或这里在 stackoverflow 上搜索“Uncaught (in promise)”会产生很多非常具体的结果，但我的问题更广泛一些（而且由于结果的扩散，我不知道这是否是重复的）

前提：在我的代码中的某个地方，我有一个未捕获的承诺拒绝（Angular 4.4.4）

案例：

案例 1：简单拒绝

在我的组件中：

ngOnInit() {
    Promise.reject("foo");
}

在控制台中产生这个（太好了，我可以看到它来自哪里）：

ERROR Error: Uncaught (in promise): foo
    at resolvePromise (zone.js:824)
    at Function.ZoneAwarePromise.reject (zone.js:903)
    at MyComponent.webpackJsonp.../../../../../src/app/component/my.component.ts.MyComponent.ngOnInit (my.component.ts:nn)

案例二：new Promise，抛出错误

在我的组件中：

ngOnInit() {
  new Promise((resolve, reject) => {
    throw new Error("foo");
  }).then(() => {
    console.log("ain't gonna happen");
  });
}

在控制台中产生这个（更好的是，当场给出位置）：

ERROR Error: Uncaught (in promise): Error: foo
Error: foo
    at my.component.ts:nn
    at new ZoneAwarePromise (zone.js:890)
    at MyComponent.webpackJsonp.../../../../../src/app/component/my.component.ts.LMyComponent.ngOnInit (my.component.ts:nn)

这也适用于链接，例如以下在控制台中或多或少地给出相同的堆栈跟踪。

ngOnInit() {


  const promise3 = new Promise((resolve, reject) => {
    throw new Error("baz");
  });
  const promise2 = new Promise((resolve, reject) => {
    resolve(promise3);
  });

  const promise1 = new Promise((resolve, reject) => {
    resolve(promise2);
  });

  promise1.then(p1=> console.log(p1));
}

案例 3：使用拒绝（...）

在我的组件中：

ngOnInit() {
  new Promise((resolve, reject) => {
    reject("foo");
  }).then(() => {
    console.log("ain't gonna happen");
  });
}

将抛出错误更改为使用承诺的拒绝方法（我认为这是非常普遍的做法），会产生这种恐怖：

core.es5.js:1020 ERROR Error: Uncaught (in promise): baz
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at zone.js:873
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at <anonymous>

题

1. 为什么这次我看不到堆栈跟踪或错误的来源？（我认为这是因为 JavaScript 仅从抛出的错误位置生成堆栈跟踪？）

2. 如果是这样，使用显式拒绝而不是在新 Promise 中抛出新错误是不好的做法吗？它是否记录在某处而我错过了它？

3. 有没有什么办法解决这一问题？（获取堆栈跟踪并继续使用拒绝（...）而不是抛出错误？，我假设没有）

4. 这是一个众所周知的问题/不好的做法，我只是错过了备忘录？

Answer 1

部分回答我自己的问题之一：

如果我将情况 #3 更改为：（包装在新的 Error 对象中）

ngOnInit() {
  new Promise((resolve, reject) => {
    reject(new Error("foo"));
  }).then(() => {
    console.log("ain't gonna happen");
  });
}

然后，令人惊讶的是，我确实得到了堆栈跟踪！（仅构造一个错误即可保存堆栈跟踪）

顺便说一句......因为（我猜）我们大多数人更喜欢看到堆栈跟踪而不是看到堆栈跟踪，那么为什么哦为什么这里没有提到这是最佳实践？：https://developer.mozilla.org /en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

编辑

为了确保我不会忘记，我添加了这个缩小范围（reject: (reason: Error) => void而不是any），不确定这是否是一个很好的解决方案，因为它不能防止通过any，但它可以帮助防止某些不通过Error拒绝的情况。

export {}

declare global {

  interface PromiseConstructor {
    /**
     * A reference to the prototype.
     */
    readonly prototype: Promise<any>;

    /**
     * Creates a new Promise.
     * @param executor A callback used to initialize the promise. This callback is passed two arguments:
     * a resolve callback used resolve the promise with a value or the result of another promise,
     * and a reject callback used to reject the promise with a provided reason or error.
     */
    new <T>(executor: (resolve: (value?: T | PromiseLike<T>) => void, reject: (reason: Error) => void) => void): Promise<T>;

  }
}