Error Handling and Retry Patterns

RxJS provides operators to handle errors and keep streams alive when sources fail transiently.

retry — Resubscribe on Error

import { retry } from 'rxjs/operators';

this.http.get<User[]>('/api/users').pipe(
  retry(3) // Resubscribe up to 3 times on error
).subscribe();

retryWith — Custom Retry Strategy

import { retry, timer } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

this.http.get<User[]>('/api/users').pipe(
  retry({
    count: 3,
    delay: (error, retryCount) => {
      console.log(`Retry ${retryCount} after error:`, error.message);
      return timer(1000 * retryCount); // Exponential backoff
    },
  })
).subscribe();

catchError — Recover with Fallback

import { catchError, of } from 'rxjs';

this.http.get<User[]>('/api/users').pipe(
  catchError(error => {
    console.error('Failed to load users:', error);
    return of([]); // Return empty array as fallback
  })
).subscribe(users => {
  this.users = users;
});

catchError — Re-throw

import { catchError, throwError } from 'rxjs';

this.http.get<User[]>('/api/users').pipe(
  catchError(error => {
    return throwError(() => new Error('Custom error message'));
  })
).subscribe();

Throttling operators control the rate of emissions, preventing excessive work from noisy streams.

debounceTime — Wait for Silence

import { debounceTime } from 'rxjs/operators';

this.searchInput.valueChanges.pipe(
  debounceTime(300) // Wait 300ms after last emission
).subscribe(query => {
  this.search(query);
});

throttleTime — Limit Rate

import { throttleTime } from 'rxjs/operators';

this.scroll$.pipe(
  throttleTime(200) // Emit at most once per 200ms
).subscribe(() => {
  this.updateScrollPosition();
});

delay — Shift Emissions

import { delay } from 'rxjs/operators';

this.data$.pipe(
  delay(1000) // Delay all emissions by 1 second
).subscribe();

Throttling Operator Comparison

Practical Example: Search with Debounce

@Component({
  selector: 'app-search',
  template: `
    <input [formControl]="searchControl" placeholder="Search...">
    <p *ngFor="let result of results">{{ result.name }}</p>
  `,
})
export class SearchComponent implements OnInit {
  searchControl = new FormControl('');
  results: SearchResult[] = [];

  ngOnInit(): void {
    this.searchControl.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(query => this.searchService.search(query)),
      catchError(() => of([]))
    ).subscribe(results => {
      this.results = results;
    });
  }
}

Exponential Backoff Pattern

this.http.get('/api/data').pipe(
  retry({
    count: 3,
    delay: (error, retryCount) => timer(1000 * Math.pow(2, retryCount)),
    // 2s, 4s, 8s
  }),
  catchError(() => of(fallbackData))
).subscribe();