Angular 5.2.4中Promise未捕获异常无日志输出问题咨询

嘿，我之前在Angular 5版本里也碰到过这个问题——原本应该在控制台弹出的Unhandled Promise rejection提示突然不见了，折腾了好一会儿才搞明白原因，咱们来一步步解决：

为什么会出现这个情况？ #

Angular 5.x之后，Zone.js（Angular依赖的异步处理核心库）和Angular自身的错误处理机制有了调整：Zone.js会把未处理的Promise拒绝异常包装后，交给Angular的默认ErrorHandler处理，但默认的ErrorHandler并不会在控制台输出详细的Promise拒绝信息，导致你看不到熟悉的提示。

解决方案 #

1. 自定义ErrorHandler捕获Promise异常 #

创建一个自定义的错误处理器，专门识别并打印Promise的未捕获拒绝信息：

首先，新建custom-error-handler.ts文件：

import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
  handleError(error: any): void {
    // 判断是否为Promise拒绝类型的异常
    if (error.rejection) {
      console.error('Unhandled Promise rejection:', error.rejection);
    } else {
      // 处理其他常规未捕获异常
      console.error('Uncaught error:', error);
    }
    // 保留Angular默认的错误处理行为（比如触发应用崩溃提示）
    super.handleError(error);
  }
}

然后在app.module.ts里注册这个自定义处理器：

import { NgModule, ErrorHandler } from '@angular/core';
import { CustomErrorHandler } from './custom-error-handler';

@NgModule({
  declarations: [/* 你的组件列表 */],
  imports: [/* 你的依赖模块 */],
  providers: [
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

2. 监听全局unhandledrejection事件 #

如果不想自定义ErrorHandler，也可以直接在根组件里监听浏览器的全局事件，捕获未处理的Promise拒绝：

在根组件（比如app.component.ts）中添加：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<!-- 你的模板内容 -->`
})
export class AppComponent implements OnInit {
  ngOnInit() {
    window.addEventListener('unhandledrejection', (event) => {
      console.error('Unhandled Promise rejection:', event.reason);
      // 若不想显示浏览器默认提示，可取消下面注释
      // event.preventDefault();
    });
  }
}

3. 检查Zone.js的配置 #

打开polyfills.ts文件，确认是否有以下配置：

// __Zone_disable_unhandledPromiseRejection = true;

如果这行处于启用状态（未被注释），会直接禁用Zone.js对未处理Promise拒绝的捕获，把它注释掉或者设为false即可恢复提示。

这样调整之后，你就能重新看到Promise未捕获异常的详细信息了。

内容的提问来源于stack exchange，提问作者arso