我正在开发一个角度应用程序，问题是当我想在某些智能电视上调试它时，没有调试模式，并且在后台我有一些导致应用程序崩溃的错误，那么，有什么办法吗获取所有错误消息并将其打印在我的应用程序页面的一部分中？
实际上我想在我自己的应用程序中拥有某种虚拟控制台。
非常感谢
【问题讨论】：
logging 搜索如何在 Angular 中记录消息
标签： javascript angular console-application
有几种调试方法：
如果上述方法不起作用，您可以尝试使用此解决方案，我不久前在互联网上的某个地方使用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 },
...
【讨论】：
您可以覆盖console.error 方法并创建像间谍一样的smoeth
@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>
您可以通过在 ConsoleSpyService 类中注释此行
errMethod(?,...args)来将日志记录显示到控制台浏览器
【讨论】：