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

Masoud Motallebipour 发表于 Dev

136

Masoud Motallebipour

我正在开发一个有角度的应用程序，问题是当我想在某些智能电视上调试它时，没有调试模式，并且在后台我有一些错误导致应用程序崩溃，因此，有什么方法可以使全部崩溃错误消息并将其打印在我的应用程序的页面的一部分中？

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

非常感谢

多纳塔斯

有几种调试方法：

Console.log（）-这会将您的消息输出到控制台。不确定是否可以在电视上看到它。
创建一个全局错误处理程序，如Angular文档中所提供

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

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 },
...

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。