Javascript 如何在Angular应用程序中获取所有控制台错误消息

我正在开发一个Angle应用程序，问题是当我想在一些智能电视上调试它时，没有调试模式，在后台我有一些错误导致应用程序崩溃，那么，有没有办法获取所有错误消息并将其打印到我的应用程序页面的一部分

实际上，我想在我自己的应用程序中有某种虚拟控制台

---

非常感谢

有几种调试方法：

• Console.log（）-将消息输出到控制台。不知道你是否能在电视上看到
• 创建全局错误处理程序，如中所述

如果上述方法不起作用，您可以尝试使用此解决方案，我不久前在internet上的某个地方通过使用一个组件发现了此解决方案，该组件将错误显示为弹出窗口：

error.service.ts：

import { Injectable } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class ErrorService {

    checkOnline()
    {
        if (!navigator.onLine) {
            return 'No Internet Connection';
        }
    }

    getClientMessage(error: Error): string {
        return error.message ? error.message : error.toString();
    }

    getClientStack(error: Error): string {
        return error.stack;
    }

    getServerMessage(error: HttpErrorResponse): string {
        var msg = error.error.Message;
        if (!!msg)
            return msg + " : " + error.error.ExceptionMessage;
        return "Application can not execute because API hasn\'t been started";
    }

    getServerStack(error: HttpErrorResponse): string {
        return error.error.StackTrace;
    }
}

global-error-handler-component.ts：

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { ErrorService } from './services/error.service';
import { MatSnackBar } from '@angular/material';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler
{
    constructor(private injector: Injector, public snackBar: MatSnackBar) { }

    handleError(error: Error | HttpErrorResponse)
    {
        const errorService = this.injector.get(ErrorService);
        let message;
        let stackTrace = errorService.getClientStack(error);

        if (error instanceof HttpErrorResponse) // Server Error
            message = errorService.getServerMessage(error);
        else // Client Error
            message = errorService.getClientMessage(error);

        this.snackBar.open(message, 'X', { panelClass: ['error'] });
    }
}

app.module.ts：

import { GlobalErrorHandler } from './global-error-handler.component';
import { MatSnackBarModule } from '@angular/material/snack-bar';
...
  imports: [
...
    MatSnackBarModule,
...
  ],
  providers: [
...
    { provide: ErrorHandler, useClass: GlobalErrorHandler },
...

---

有几种方法可以调试它：

• Console.log（）-将消息输出到控制台。不知道你是否能在电视上看到
• 创建全局错误处理程序，如中所述

如果上述方法不起作用，您可以尝试使用此解决方案，我不久前在internet上的某个地方通过使用一个组件发现了此解决方案，该组件将错误显示为弹出窗口：

error.service.ts：

import { Injectable } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class ErrorService {

    checkOnline()
    {
        if (!navigator.onLine) {
            return 'No Internet Connection';
        }
    }

    getClientMessage(error: Error): string {
        return error.message ? error.message : error.toString();
    }

    getClientStack(error: Error): string {
        return error.stack;
    }

    getServerMessage(error: HttpErrorResponse): string {
        var msg = error.error.Message;
        if (!!msg)
            return msg + " : " + error.error.ExceptionMessage;
        return "Application can not execute because API hasn\'t been started";
    }

    getServerStack(error: HttpErrorResponse): string {
        return error.error.StackTrace;
    }
}

global-error-handler-component.ts：

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { ErrorService } from './services/error.service';
import { MatSnackBar } from '@angular/material';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler
{
    constructor(private injector: Injector, public snackBar: MatSnackBar) { }

    handleError(error: Error | HttpErrorResponse)
    {
        const errorService = this.injector.get(ErrorService);
        let message;
        let stackTrace = errorService.getClientStack(error);

        if (error instanceof HttpErrorResponse) // Server Error
            message = errorService.getServerMessage(error);
        else // Client Error
            message = errorService.getClientMessage(error);

        this.snackBar.open(message, 'X', { panelClass: ['error'] });
    }
}

app.module.ts：

import { GlobalErrorHandler } from './global-error-handler.component';
import { MatSnackBarModule } from '@angular/material/snack-bar';
...
  imports: [
...
    MatSnackBarModule,
...
  ],
  providers: [
...
    { provide: ErrorHandler, useClass: GlobalErrorHandler },
...

---

您可以重写console.error方法并创建类似spy的smoething

@可注入({
providedIn:“根”
})
导出类控制台服务{
私有errorStack:any[]=[]
构造函数（）{
const errMethod=console.error；
console.error=（…args）=>{
this.errorStack.push（args）；
errMethod（`您可以重写控制台.error

方法并创建类似spy的Smething

@可注入({
providedIn:“根”
})
导出类控制台服务{
私有errorStack:any[]=[]
构造函数（）{
const errMethod=console.error；
console.error=（…args）=>{
this.errorStack.push（args）；
错误方法（`您试图传达的内容称为
日志记录
搜索如何以角度记录消息您需要使用服务中您选择的方法替换控制台日志。如何在应用程序中显示它们取决于您。您可以使用固定浮动面板或snackbar消息。我建议您使用某种service可集中您的日志并使其在应用程序中的任何位置都可访问。您试图传达的内容可能重复，称为
日志记录
搜索您如何以Angular方式记录消息您需要使用服务中您选择的方法替换控制台日志。如何在应用程序中显示它们取决于ou.您可以使用固定浮动面板或snackbar消息。我建议您使用某种服务来集中您的日志，并使它们可以从应用程序中的任何位置访问。可能重复的实际上我希望获得系统错误，而不是我在控制台中所做的错误。错误，我是指来自模块的抛出异常实际上我希望获得系统错误ROR不是我在console.error中所做的，我指的是来自模块的抛出异常