Added section on error handling

Author: brandonroberts

public/docs/_examples/rxjs/ts/src/app/hero-counter.component.ts

@@ -20,7 +20,7 @@ export class HeroCounterComponent implements OnInit, OnDestroy {
   count: number = 0;
   counter$: Observable<number>;
   sub: Subscription;
-  destroy$ = new Subject();
+  onDestroy$ = new Subject();
 
   ngOnInit() {
     this.counter$ = Observable.create((observer: Observer<number>) => {
@@ -30,12 +30,12 @@ export class HeroCounterComponent implements OnInit, OnDestroy {
     });
 
     this.counter$
-      .takeUntil(this.destroy$)
+      .takeUntil(this.onDestroy$)
       .subscribe();
   }
 
   ngOnDestroy() {
-    this.destroy$.next();
+    this.onDestroy$.complete();
   }
 }
 // #enddocregion

public/docs/_examples/rxjs/ts/src/app/hero-list.component.2.ts

@@ -0,0 +1,43 @@
+// #docplaster
+// #docregion
+// #docregion retry-operator
+import 'rxjs/add/operator/retry';
+// #enddocregion retry-operator
+import 'rxjs/add/observable/of';
+// #docregion failed-heroes
+import { Component, OnInit }   from '@angular/core';
+import { Observable }          from 'rxjs/Observable';
+
+import { HeroService }   from './hero.service';
+import { Hero }          from './hero';
+
+@Component({
+  template: `
+    <h2>HEROES</h2>
+    <ul class="items">
+      <li *ngFor="let hero of heroes$ | async">
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
+      </li>
+    </ul>
+  `
+})
+export class HeroListComponent implements OnInit {
+  heroes$: Observable<Hero[]>;
+
+  constructor(
+    private service: HeroService
+  ) {}
+
+  ngOnInit() {
+    // #docregion failed-heroes
+    this.heroes$ = this.service.getFailedHeroes()
+    // #enddocregion failed-heroes
+      .catch((error: any) => {
+        console.log(`An error occurred: ${error}`);
+
+        return Observable.of([]);
+      });
+    // #docregion failed-heroes
+  }
+}
+// #enddocregion

public/docs/_examples/rxjs/ts/src/app/hero-list.component.3.ts

@@ -0,0 +1,40 @@
+// #docplaster
+// #docregion
+// #docregion retry-operator
+import 'rxjs/add/operator/retry';
+// #enddocregion retry-operator
+import 'rxjs/add/observable/of';
+import { Component, OnInit }   from '@angular/core';
+import { Observable }          from 'rxjs/Observable';
+
+import { HeroService }   from './hero.service';
+import { Hero }          from './hero';
+
+@Component({
+  template: `
+    <h2>HEROES</h2>
+    <ul class="items">
+      <li *ngFor="let hero of heroes$ | async">
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
+      </li>
+    </ul>
+  `
+})
+export class HeroListComponent implements OnInit {
+  heroes$: Observable<Hero[]>;
+
+  constructor(
+    private service: HeroService
+  ) {}
+
+  ngOnInit() {
+    this.heroes$ = this.service.getHeroes()
+      .retry(3)
+      .catch(error => {
+        console.log(`An error occurred: ${error}`);
+
+        return Observable.of([]);
+      });
+  }
+}
+// #enddocregion

public/docs/_examples/rxjs/ts/src/app/hero-list.component.4.ts

@@ -0,0 +1,52 @@
+// #docplaster
+// #docregion
+// #docregion retry-when-operator
+import 'rxjs/add/operator/retryWhen';
+// #enddocregion retry-when-operator
+import 'rxjs/add/observable/of';
+import { Component, OnInit }   from '@angular/core';
+import { Observable }          from 'rxjs/Observable';
+
+import { HeroService }   from './hero.service';
+import { Hero }          from './hero';
+
+@Component({
+  template: `
+    <h2>HEROES</h2>
+    <ul class="items">
+      <li *ngFor="let hero of heroes$ | async">
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
+      </li>
+    </ul>
+  `
+})
+export class HeroListComponent implements OnInit {
+  heroes$: Observable<Hero[]>;
+
+  constructor(
+    private service: HeroService
+  ) {}
+
+  ngOnInit() {
+    this.heroes$ = this.service.getFailedHeroes()
+      .retryWhen((errors: any) => {
+        return errors.scan((errorCount, err) => {
+          if (errorCount >= 2) {
+            throw err;
+          }
+
+          if (err.status !== 500) {
+            return errorCount;
+          } else {
+            return errorCount + 1;
+          }
+        }, 0);
+      })
+      .catch(error => {
+        console.log(`An error occurred: ${error}`);
+
+        return Observable.of([]);
+      });
+  }
+}
+// #enddocregion

public/docs/_examples/rxjs/ts/src/app/hero-list.component.ts

@@ -1,5 +1,9 @@
 // #docplaster
 // #docregion
+// #docregion retry-operator
+import 'rxjs/add/operator/retry';
+// #enddocregion retry-operator
+import 'rxjs/add/observable/of';
 import { Component, OnInit }   from '@angular/core';
 import { Observable }          from 'rxjs/Observable';
 
@@ -24,7 +28,13 @@ export class HeroListComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.heroes$ = this.service.getHeroes();
+    this.heroes$ = this.service.getFailedHeroes()
+      .retry(3)
+      .catch(error => {
+        console.log(`An error occurred: ${error}`);
+
+        return Observable.of([]);
+      });
   }
 }
 // #enddocregion

public/docs/_examples/rxjs/ts/src/app/hero.service.1.ts

@@ -0,0 +1,47 @@
+// #docplaster
+// #docregion
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/delay';
+import 'rxjs/add/operator/catch';
+import { Injectable }              from '@angular/core';
+import { Http, Response, Headers } from '@angular/http';
+import { Observable }              from 'rxjs/Observable';
+
+import { Hero } from './hero';
+import { ApiError, ApiErrorHandlerService } from './api-error-handler.service';
+
+@Injectable()
+export class HeroService {
+  private headers = new Headers({'Content-Type': 'application/json'});
+  private heroesUrl = 'api/heroes';
+
+  constructor(
+    private http: Http,
+    private errorHandler: ApiErrorHandlerService
+  ) {}
+
+  addHero(hero: Hero) {
+    return this.http.post(this.heroesUrl, JSON.stringify({ name: hero.name }), { headers: this.headers });
+  }
+
+  getHeroes(): Observable<Hero[]> {
+    return this.http.get(this.heroesUrl)
+      .map(response => response.json().data as Hero[]);
+  }
+
+  getFailedHeroes(): Observable<any> {
+    return this.http.get(`${this.heroesUrl}/failed`)
+  }
+
+  getHero(id: number): Observable<Hero> {
+    const url = `${this.heroesUrl}/${id}`;
+    return this.http.get(url)
+      .map(response => response.json().data as Hero);
+  }
+
+  search(term: string): Observable<Hero[]> {
+    return this.http
+      .get(`${this.heroesUrl}/?name=${term}`)
+      .map((r: Response) => r.json().data as Hero[]);
+  }
+}

public/docs/_examples/rxjs/ts/src/app/hero.service.ts

@@ -29,11 +29,14 @@ export class HeroService {
       .map(response => response.json().data as Hero[]);
   }
 
-  getHero(id: number): Observable<Hero | ApiError> {
+  getFailedHeroes(): Observable<any> {
+    return this.http.get(`${this.heroesUrl}/failed`)
+  }
+
+  getHero(id: number): Observable<Hero> {
     const url = `${this.heroesUrl}/${id}`;
     return this.http.get(url)
-      .map(response => response.json().data as Hero)
-      .catch(this.errorHandler.handle);
+      .map(response => response.json().data as Hero);
   }
 
   search(term: string): Observable<Hero[]> {