4

Como dice el titulo, estoy necesitando capturar todos los errores generados en JavaScript pero mediante angular.

La idea es levantar un servicio que envíe los errores que llegaran a suceder del lado del cliente para tener un log de errores en el servidor, para después corregirlos.

Si fuese JavaScript, sólo funcionarían cosas como

window.onerror = MyErrorHandler()

En angular hay una clase ErrorHandler que se puede extender pero sólo captura los errores que se generan en angular.

Necesito capturar todos por más insignificante que sea.

1
  • Tu aplicacion en Angular2 esta hecha en Javascript o en Typescript? Seria bueno saber la version exacta de angular 2 que estas usando. Commented el 14 abr. 2017 a las 23:59

1 respuesta 1

6

Con Angular 2 se introdujo Typescript como el lenguaje más adecuado para escribir una aplicacion con angular 2. Siendo el caso, uno puede practicamente eliminar los errores mas triviales de javascript activando la compilacion Ahead of Time.

Si estan usando el @angular/cli esto se hace a traves del parametro aot=true

$> ng build --aot=true

Activando esta caracteristica descartamos los errores como enlaces de datos incorrectos en las vistas, o uso de datos no compatibles tales como tratar de enlazar un evento a un objeto y no a una funcion.

Por ejemplo:

import {Http} from '@angular/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  constructor(private http:Http){    
  }

  errorFunc = 34;

}

Y en la vista de nuestro componente :

<h1>
  {{title}}
</h1>
<p>
 <button (click)="errorFunc()" >Please dont touch me</button>
</p>

Si compilamos nuestra aplicacion de la manera tradicional (aot=false) no recibimos ningun error hasta que usemos el boton de nuestra aplicacion, pero si compilamos con la compilacion Ahead of Time obtendremos lo siguiente:

Error en compilacion AOT

Para la mayoria de los errores

Tu puedes usar la clase ErrorHandler de @angular/corepara manejar casi cualquier error que surja durante la ejecucion de nuestra aplicacion angular 2 sobreescribiendo el metodo handleError(error:Error):void. Vale la pena mencionar que yo uso esta clase justamente para enviar errores del lado cliente a un servidor(Raygun) :)

Por ejemplo, para mostrar los errores como notificaciones:

import { Injectable, ErrorHandler  } from '@angular/core';
import {NotificationsService, SimpleNotificationsComponent} from 'angular2-notifications';

@Injectable()
export class MyAppErrorHandler extends ErrorHandler {

  constructor(private _toastService: NotificationsService,){
    super(false);    
  }
  
  public handleError(error: Error):void
  {    
    //do somethign with the error    
    //for example show a toast
    this._toastService.error("Error","An error has ocurred");      
  };
}

Y finalmente lo registras a nivel de tu aplicacion:

import { AppComponent } from './app.component';
import { MyAppErrorHandler } from './error-handling';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [       
    ],
    providers: [         
        { provide: ErrorHandler, useClass: MyAppErrorHandler }      
    ],
    bootstrap: [AppComponent]
})
export class AppModule { } 

Referencia : https://angular.io/docs/ts/latest/api/core/index/ErrorHandler-class.html

Si quieres llegar mas lejos

Podemos hackear Zone.js para capturar los errores que suceden al ejecutarse en ese contexto introduciendo el siguiente fragmento en el index.html de nuestra aplicacion.

<script>

  Zone.current._zoneDelegate.handleError = function () {
      console.log("Error handled by ZoneJS :: " + arguments);
  };

</script>

Erro handled by Zone.js

Cabe resaltar lo no documentado de este proceso y lo suceptible al cambio en caso Zone.js cambie la forma en la que trabaja ademas del hecho de no poder usar las clases de Angular 2 en este contexto.

Referencia: https://github.com/angular/zone.js

3
  • 1
    Claro mencione tal implementación al final de extender ErrorHandler pero realmente no captura todo lo que necesito por ejemplo omite errores que no son lanzados por zone.js Commented el 7 abr. 2017 a las 15:19
  • 1
    Quizás te sirva esto: blog.sentry.io/2016/06/27/sentry-and-angular2.html.
    – KarlosCode
    Commented el 16 abr. 2017 a las 15:25
  • genial esto me aclaro un monton de cosas
    – cesar moro
    Commented el 18 abr. 2017 a las 13:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.