Loading States, Error Boundaries and Offline Handling

Production HTTP UX requires consistent handling of loading states, errors, offline detection, and request cancellation. Components that display data should show a spinner while loading, a meaningful error message when the API fails, and handle the user navigating away while a request is in flight. A reusable HttpStateManager pattern wraps any Observable and manages these states automatically, reducing boilerplate across all data-fetching components in the BlogApp.

HttpStateManager and Loading Patterns #

// ── Reusable state manager wrapping any Observable ────────────────────────
export class HttpStateManager<T> {
  private _data    = signal<T | null>(null);
  private _loading = signal(false);
  private _error   = signal<string | null>(null);

  readonly data    = this._data.asReadonly();
  readonly loading = this._loading.asReadonly();
  readonly error   = this._error.asReadonly();
  readonly hasData = computed(() => this._data() !== null);

  execute(source$: Observable<T>, destroyRef: DestroyRef): void {
    this._loading.set(true);
    this._error.set(null);

    source$.pipe(
      takeUntilDestroyed(destroyRef),   // cancel if component destroyed
      finalize(() => this._loading.set(false)),
    ).subscribe({
      next:  data  => this._data.set(data),
      error: err   => {
        const message = err instanceof HttpErrorResponse
          ? this.formatError(err)
          : (err.message ?? 'An unexpected error occurred.');
        this._error.set(message);
      },
    });
  }

  private formatError(err: HttpErrorResponse): string {
    if (err.status === 0)   return 'Network error. Check your connection.';
    if (err.status === 404) return 'The requested resource was not found.';
    if (err.status === 429) {
      const wait = err.headers.get('Retry-After') ?? '60';
      return `Too many requests. Please wait ${wait} seconds.`;
    }
    return err.error?.title ?? `Error ${err.status}.`;
  }
}

// ── Component using HttpStateManager ─────────────────────────────────────
@Component({
  standalone:  true,
  imports:    [PostCardComponent],
  template: `
    @if (state.loading()) {
      <app-spinner />
    } @else if (state.error()) {
      <app-error-message [message]="state.error()!" (retry)="load()" />
    } @else if (state.hasData()) {
      @for (post of state.data()!.items; track post.id) {
        <app-post-card [post]="post" />
      }
    }
  `,
})
export class PostListComponent implements OnInit {
  private api        = inject(PostsApiService);
  private destroyRef = inject(DestroyRef);
  protected state    = new HttpStateManager<PagedResult<PostSummaryDto>>();

  ngOnInit(): void { this.load(); }

  load(): void {
    this.state.execute(this.api.getPublished(), this.destroyRef);
  }
}

// ── Offline detection ─────────────────────────────────────────────────────
@Injectable({ providedIn: 'root' })
export class OnlineStatusService {
  private _isOnline = signal(navigator.onLine);
  readonly isOnline = this._isOnline.asReadonly();
  readonly isOffline = computed(() => !this._isOnline());

  constructor() {
    fromEvent(window, 'online')
      .pipe(takeUntilDestroyed())
      .subscribe(() => this._isOnline.set(true));

    fromEvent(window, 'offline')
      .pipe(takeUntilDestroyed())
      .subscribe(() => this._isOnline.set(false));
  }
}

// ── Template using offline status ─────────────────────────────────────────
// @if (onlineStatus.isOffline()) {
//   <div class="offline-banner">You are offline. Reconnect to load content.</div>
// }

Common Mistakes #

Mistake 1 — Not cancelling in-flight requests when component is destroyed #

❌ Wrong — component destroyed while request is pending; response arrives, attempts to update destroyed component’s signals.

✅ Correct — add .pipe(takeUntilDestroyed(destroyRef)) to all component-level subscriptions.

Mistake 2 — No retry option for users on transient failures (forced page reload) #

❌ Wrong — error displayed with no way to retry; user must reload the entire page.

✅ Correct — provide a retry button that re-triggers the data load method.