RxJS Patterns — Search, Polling and Request Cancellation

Production Angular applications require RxJS patterns that go beyond simple subscribe-and-display. Live search with cancellation, periodic polling with pause-on-blur, retry with exponential backoff, and proper cleanup on component destruction are the patterns that separate applications that work under real conditions from those that work only in happy-path demos. Each pattern is a short operator pipeline — the challenge is knowing which operators combine to solve each specific problem.

Live Search with Cancellation #

@Component({ standalone: true, imports: [ReactiveFormsModule, AsyncPipe], template: `
  <input [formControl]="searchControl" placeholder="Search posts...">
  @if (isSearching()) { <span>Searching...</span> }
  @for (result of results$ | async; track result.id) {
    <app-post-card [post]="result" />
  }
` })
export class LiveSearchComponent {
  private api         = inject(PostsApiService);
  searchControl       = new FormControl('');
  isSearching         = signal(false);

  // ── Complete live search pipeline ──────────────────────────────────────
  results$ = this.searchControl.valueChanges.pipe(
    debounceTime(350),              // wait for typing to pause
    distinctUntilChanged(),         // skip if value unchanged
    filter(query => (query?.length ?? 0) >= 2),  // min 2 chars
    tap(() => this.isSearching.set(true)),         // show loading
    switchMap(query =>              // cancel previous, start new
      this.api.searchPosts(query!).pipe(
        catchError(() => of([] as PostSummaryDto[])),  // error → empty list
      )
    ),
    tap(() => this.isSearching.set(false)),         // hide loading
  );
}

// ── Polling with page visibility ──────────────────────────────────────────
@Injectable({ providedIn: 'root' })
export class LiveStatsService {
  private stats$?: Observable<DashboardStats>;

  getStats(): Observable<DashboardStats> {
    if (!this.stats$) {
      this.stats$ = merge(
        of(null),          // trigger immediately on subscribe
        interval(30_000),  // then every 30 seconds
      ).pipe(
        // Pause polling when the browser tab is hidden
        switchMap(() => document.visibilityState === 'hidden'
          ? EMPTY
          : this.api.getDashboardStats()
        ),
        shareReplay(1),    // share one poller across all subscribers
      );
    }
    return this.stats$;
  }
}

// ── Retry with exponential backoff ────────────────────────────────────────
function exponentialBackoff(maxRetries = 3, initialDelayMs = 1000) {
  return (source$: Observable<any>) =>
    source$.pipe(
      retryWhen(errors$ =>
        errors$.pipe(
          mergeMap((err, attempt) => {
            if (attempt >= maxRetries) return throwError(() => err);
            const delayMs = initialDelayMs * Math.pow(2, attempt);  // 1s, 2s, 4s
            console.log(`Retrying in ${delayMs}ms (attempt ${attempt + 1})`);
            return timer(delayMs);
          })
        )
      )
    );
}

// Usage:
this.api.getCriticalData().pipe(
  exponentialBackoff(3, 1000),
).subscribe(data => this.criticalData.set(data));

// ── Cancel request on navigation ─────────────────────────────────────────
@Component({ standalone: true, template: '...' })
export class PostDetailComponent implements OnInit {
  private api        = inject(PostsApiService);
  private destroyRef = inject(DestroyRef);
  @Input() slug!: string;

  post = signal<PostDto | null>(null);

  ngOnInit() {
    this.api.getBySlug(this.slug).pipe(
      takeUntilDestroyed(this.destroyRef),  // cancel if user navigates away
      catchError(() => of(null)),
    ).subscribe(post => this.post.set(post));
  }
}

Common Mistakes #

Mistake 1 — Not catching errors inside switchMap (error terminates the entire stream) #

❌ Wrong — one failed search request terminates the valueChanges stream; subsequent searches never fire.

✅ Correct — catch errors inside the switchMap callback: switchMap(q => api.search(q).pipe(catchError(() => of([])))).

Mistake 2 — Polling while the tab is hidden (wastes battery and bandwidth) #

❌ Wrong — interval(30000) polls regardless of tab visibility; wastes resources on hidden tabs.

✅ Correct — check document.visibilityState inside the poll and return EMPTY when hidden.