Angular 8中如何触发window.onerror？相关疑问咨询

我明白你在尝试把浏览器控制台消息同步到服务器日志时遇到了不少困惑，咱们一个个来拆解你的问题：

1. window.onerror何时触发？ #

window.onerror会在全局未捕获的JavaScript错误发生时触发——这里的关键是「未被try/catch捕获」，而且有部分浏览器安全限制会影响它的触发（比如跨域资源的错误会被屏蔽细节）。

2. 在构造函数中定义window.onerror是否可行？ #

完全可行！Angular组件的构造函数是初始化阶段最早执行的环节之一，在这里绑定window.onerror能确保在组件后续代码运行前就完成错误监听。不过要注意：如果在多个组件中重复绑定，后面的定义会覆盖前面的，所以最好在根组件（比如AppComponent）里统一绑定，避免冲突。

3. 本地运行项目时它会触发吗？ #

会的！不管是本地用ng serve启动的开发环境，还是生产环境，只要符合触发条件的错误出现，window.onerror就会正常执行。

4. 你提到的各类场景是否会触发window.onerror？ #

咱们逐个分析：

• 证书缺失抛出的错误：如果是未捕获的JavaScript运行时错误，会触发；但如果是浏览器层面的安全警告（比如HTTPS证书错误的提示），这类不属于JS错误范畴，不会触发。
• console.error('test')：不会触发！console.error只是在控制台打印信息，并没有抛出实际的Error对象，不属于「未捕获错误」，所以window.onerror不会响应。
• throw new Error()：会触发！这是主动抛出的未捕获错误，完全符合window.onerror的触发条件。
• CORS控制台错误：大部分情况不会触发。浏览器为了安全，会屏蔽跨域脚本错误的具体信息，甚至直接阻止window.onerror触发（除非跨域资源配置了Access-Control-Allow-Origin和对应的错误暴露头）。
• 图片/脚本资源不存在：同源资源加载失败会正常触发；跨域资源则可能因为安全限制，只返回模糊的错误信息，甚至不触发。

5. 为什么添加<img src="test.png">后没弹出alert？ #

你遇到的问题大概率是Angular自带的错误处理机制在起作用。Angular有专属的全局错误处理器（ErrorHandler），它会捕获组件模板、异步操作中的部分错误，导致这些错误不会冒泡到window.onerror。

给你两个解决方法：

方法一：自定义Angular错误处理器 #

创建一个自定义处理器，把错误信息同步到服务器或手动转发给window.onerror：

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

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    // 这里可以直接把错误信息发送到服务器
    console.error('Angular捕获的错误:', error);
    // 也可以手动触发window.onerror（如果需要兼容原有逻辑）
    window.onerror?.(error.message, error.fileName, error.lineNumber);
  }
}

然后在app.module.ts中替换默认的错误处理器：

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

@NgModule({
  // ...其他配置项
  providers: [
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ]
})
export class AppModule { }

方法二：改用window.addEventListener('error') #

有时候window.onerror会被框架的错误处理拦截，改用事件监听的方式更可靠，还能更好地捕获资源加载错误：
在AppComponent的ngOnInit生命周期钩子中添加：

ngOnInit() {
  window.addEventListener('error', (event) => {
    alert(`${event.message} ${event.lineno}`);
    // 这里可以把错误信息发送到服务器
    // 若要区分资源加载错误和JS错误，可通过event.target判断
  });
}

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