Как получить все сообщения об ошибках консоли в приложении Angular - PullRequest
Новая
       51

Как получить все сообщения об ошибках консоли в приложении Angular

0 голосов
/ 24 сентября 2019

Я работаю над угловым приложением, проблема в том, что когда я хочу отладить его на некоторых смарт-телевизорах, нет режима отладки, а в фоновом режиме у меня возникают ошибки, которые приводят к сбою приложения, поэтому есть ли способполучить все сообщения об ошибках и распечатать их на части страницы моего приложения?

На самом деле я хочу иметь виртуальную консоль в своем собственном приложении.

Большое вам спасибо

Ответы [ 2 ]

2 голосов
/ 24 сентября 2019

Существует несколько способов его отладки:

  • Console.log () - выводит ваше сообщение на консоль.Не уверен, что вы можете увидеть его по телевизору.
  • Создайте глобальный обработчик ошибок, как указано в Документация по англ.

Если выше не работает, выМожно попробовать использовать это решение, которое я также недавно обнаружил где-то в Интернете, используя компонент snackbar , который отображает ошибки в виде всплывающего окна:

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 },
...
0 голосов
/ 24 сентября 2019

вы можете переопределить метод console.error и создать сглаживание как шпион 

@Injectable({
    providedIn:'root'
})
export class ConsoleSpyService {
  private errorStack :any[] = []
  constructor() { 
    const errMethod = console.error;

    console.error= (...args) => { 
      this.errorStack.push(args);

      errMethod(`?`,...args)
    }

    Object.freeze(console)
  }


  get errorList() {
    return this.errorStack;//.slice(0);
  }
}

вам нужно внедрить этот класс, чтобы он создал 

export class AppModule {

  constructor(c:ConsoleSpyService){}

 }

внедрить службу в компоненте 

  constructor(private conSpyServ:ConsoleSpyService) {

  }

  get errors(){
    return this.conSpyServ.errorList;
  }

шаблон (показать список ошибок) 

<div class="errors" *ngFor="let error of errors">
  {{error.join(' ')}}
</div>

вы можете отобразить запись в браузер консоли, прокомментировав эту строку errMethod( ? ,...args) в классе ConsoleSpyService

демо ??

...