typescript 47 lines · 7 steps

Exponential backoff retries in Angular

An Angular service retries failing HTTP requests with growing, jittered delays — but only for errors worth retrying.

Explained by highlit
Angular Advanced retry exponential-backoff rxjs http jitter
1import { HttpClient } from '@angular/common/http';
2import { Injectable } from '@angular/core';
3import { Observable, throwError, timer } from 'rxjs';
4import { mergeMap, retryWhen } from 'rxjs/operators';
5 
6interface RetryConfig {
7 maxRetries: number;
8 baseDelayMs: number;
9 maxDelayMs: number;
10}
11 
12@Injectable({ providedIn: 'root' })
13export class PricingApiService {
14 private readonly config: RetryConfig = {
15 maxRetries: 4,
16 baseDelayMs: 300,
17 maxDelayMs: 8000,
18 };
19 
20 constructor(private readonly http: HttpClient) {}
21 
22 getQuote(symbol: string): Observable<Quote> {
23 return this.http
24 .get<Quote>(`/api/quotes/${symbol}`)
25 .pipe(retryWhen((errors) => this.backoffStrategy(errors)));
26 }
27 
28 private backoffStrategy(errors: Observable<any>): Observable<number> {
29 return errors.pipe(
30 mergeMap((error, index) => {
31 const attempt = index + 1;
32 const retriable = error.status >= 500 || error.status === 0;
33 
34 if (!retriable || attempt > this.config.maxRetries) {
35 return throwError(() => error);
36 }
37 
38 const backoff = Math.min(
39 this.config.baseDelayMs * 2 ** index,
40 this.config.maxDelayMs,
41 );
42 const jitter = Math.random() * this.config.baseDelayMs;
43 return timer(backoff + jitter);
44 }),
45 );
46 }
47}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Retry only transient failures — server errors and network drops — and let client errors fail fast.
  2. 2Exponential backoff with a cap prevents retries from hammering a struggling backend.
  3. 3Adding random jitter spreads concurrent retries so clients don't all reconnect in sync.

Related explainers

typescript 
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection
Intermediate 8 steps
typescript 
import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';
 

Validating env config at boot in NestJS

configuration schema-validation environment-variables
Intermediate 8 steps
typescript 
import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup
Intermediate 8 steps
typescript 
import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence
Intermediate 7 steps
java 
public static Map<String, String> parseCookieHeader(String header) {
    Map<String, String> cookies = new LinkedHashMap<>();
    if (header == null || header.isBlank()) {
        return cookies;

Parsing an HTTP Cookie header in Java

string-parsing http url-decoding
Intermediate 6 steps
typescript 
import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation
Intermediate 8 steps

Share this explainer

Here's the card — post it anywhere.

Exponential backoff retries in Angular — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code