Angular 2 - Manejo de errores

Las aplicaciones de Angular 2 tienen la opción de manejo de errores. Esto se hace al incluir la biblioteca catch de ReactJS y luego usar la función catch.

Veamos el código requerido para el manejo de errores. Este código se puede agregar en la parte superior del capítulo para operaciones CRUD usando http.

En el archivo product.service.ts, ingrese el siguiente código:

import { Injectable } from '@angular/core'; 
import { Http , Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 
import { IProduct } from './product';  

@Injectable() 
export class ProductService { 
   private _producturl = 'app/products.json'; 
   constructor(private _http: Http){}  

   getproducts(): Observable<IProduct[]> { 
      return this._http.get(this._producturl) 
      .map((response: Response) => <IProduct[]> response.json()) 
      .do(data => console.log(JSON.stringify(data))) 
      .catch(this.handleError); 
   }  
   
   private handleError(error: Response) { 
      console.error(error); 
      return Observable.throw(error.json().error()); 
   } 
}

• La función de captura contiene un enlace a la función de controlador de errores.

• En la función del controlador de errores, enviamos el error a la consola. También devolvemos el error al programa principal para que la ejecución pueda continuar.

Ahora, siempre que obtenga un error, será redirigido a la consola de errores del navegador.