Ionic Angular 16如何捕获JS运行时的警告、信息与错误？

1. 重写Console API捕获显式/隐式输出的日志 #

Chrome自动输出的警告、信息大多会经过console.warn/console.info/console.error方法，通过重写这些方法可以同时捕获日志并保留原控制台输出功能。

实现步骤： #

创建一个全局日志捕获服务，在应用启动时完成console方法的重写：

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

@Injectable({ providedIn: 'root' })
export class LogCaptureService {
  // 存储捕获到的日志数组
  capturedLogs: Array<{type: 'error' | 'warn' | 'info', message: any, args: any[]}> = [];

  constructor() {
    this.overrideConsoleMethods();
    this.setupGlobalErrorListeners();
  }

  private overrideConsoleMethods(): void {
    // 重写console.warn
    const originalWarn = console.warn;
    console.warn = (...args: any[]) => {
      this.capturedLogs.push({type: 'warn', message: args[0], args});
      originalWarn.apply(console, args); // 保留原控制台输出
    };

    // 重写console.info
    const originalInfo = console.info;
    console.info = (...args: any[]) => {
      this.capturedLogs.push({type: 'info', message: args[0], args});
      originalInfo.apply(console, args);
    };

    // 重写console.error
    const originalError = console.error;
    console.error = (...args: any[]) => {
      this.capturedLogs.push({type: 'error', message: args[0], args});
      originalError.apply(console, args);
    };
  }

2. 监听全局错误与未处理Promise拒绝 #

除了console输出，还要捕获全局未处理的JS错误、资源加载错误以及Promise未处理拒绝：

private setupGlobalErrorListeners(): void {
    // 捕获全局同步JS错误、资源加载错误
    window.addEventListener('error', (event) => {
      this.capturedLogs.push({
        type: 'error',
        message: event.message,
        args: [event.filename, event.lineno, event.colno, event.error]
      });
    }, true);

    // 捕获未处理的Promise拒绝
    window.addEventListener('unhandledrejection', (event) => {
      this.capturedLogs.push({
        type: 'error',
        message: `Unhandled Rejection: ${event.reason}`,
        args: [event.promise, event.reason]
      });
    });
  }
}

3. 激活日志捕获 #

在应用根组件中注入该服务，确保初始化时启动捕获：

import { Component } from '@angular/core';
import { LogCaptureService } from './services/log-capture.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private logCaptureService: LogCaptureService) {}

  // 测试：查看捕获的日志
  viewCapturedLogs() {
    console.log('捕获到的日志：', this.logCaptureService.capturedLogs);
  }
}

覆盖范围说明 #

• 所有通过console.warn/info/error输出的日志（包括Chrome自动输出的过时API警告、框架警告等）
• 全局未处理的同步JS错误
• 资源（图片、脚本、样式）加载失败错误
• 未处理的Promise拒绝

注：部分浏览器内部级别的安全警告无法通过JS层面捕获，其余前端相关日志均可覆盖。

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