How to prevent RxJS to stop pipeline execution on the first exception

Question

I'm trying to make 3 sequential GET requests using RxJS ajax operator. If one of the ajax requests throws an error(404 status code, for example), the rest won't execute. Is it possible pipeline to execute all the ajax requests, even if for some of the URLs it will throw an exception?

 let urls =
    from
      ([
        "http://localhost:8000/good-url", // good URL
        "http://localhost:8000/wrong-url", // error 404
        "http://localhost:8000/another-good-url" // good URL, ajax request won't execute
      ])
      .pipe
      (
        map((url) => rxjs.ajax.ajax({
          method: "GET",
          url: url,
          responseType: 'text'
        }))
      );
    urls.pipe(
        concatAll(), 
        catchError(err => { console.log("error: ", err); return rxjs.of({}); }))
    .subscribe
    (
      response => { console.log("status: ", response.status); }
    );

catchError operator is displaying the corresponding ajax error 404 info in dev tools console

Naren Murali · Accepted Answer · 2025-10-18 18:07:07Z

1

We can move the catchError inside the ajax Observable using pipe. Then use concatAll alone for the outer pipe.

The catchError handles the failure and ensures the API stream continues.

import './style.css';

import { rx, map, from, of, catchError, concatAll } from 'rxjs';
import { ajax } from 'rxjs/ajax';
let urls = from(
  [
    'https://jsonplaceholder.typicode.com/todos/1', // good URL
    'https://jsonplaceholder.typicode.com/todosqqwrqewr/2', // error 404
    'https://jsonplaceholder.typicode.com/todos/3', // good URL, ajax request won't execute
  ].map((url) =>
    ajax({
      method: 'GET',
      url: url,
      responseType: 'text',
    }).pipe(
      catchError((err: any) => {
        console.log('error: ', err);
        return of({});
      })
    )
  )
)
  .pipe(concatAll())
  .subscribe((response: any) => {
    console.log('status: ', response);
  });

Stackblitz Demo

Using Map:

We can also achieve using the below alternative code, same concept. We move the catchError inside the map so that the inner stream is error handled, not affecting the outer main stream.

import './style.css';

import { rx, map, from, of, catchError, concatAll } from 'rxjs';
import { ajax } from 'rxjs/ajax';
let urls = from([
  'https://jsonplaceholder.typicode.com/todos/1', // good URL
  'https://jsonplaceholder.typicode.com/todosqqwrqewr/2', // error 404
  'https://jsonplaceholder.typicode.com/todos/3', // good URL, ajax request won't execute
])
  .pipe(
    map((url: any) =>
      ajax({
        method: 'GET',
        url: url,
        responseType: 'text',
      }).pipe(
        catchError((err: any) => {
          console.log('error: ', err);
          return of({});
        })
      )
    ),
    concatAll()
  )
  .subscribe((response: any) => {
    console.log('status: ', response);
  });

Stackblitz Demo

edited Oct 18 at 18:07

answered Oct 18 at 16:08

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Igor Oct 18 at 17:28

In principle, it is a trivial and correct answer, only it is missing a pipe function right before map

Naren Murali Oct 18 at 18:07

updated my answer

Collectives™ on Stack Overflow

How to prevent RxJS to stop pipeline execution on the first exception

1 Answer 1

Stackblitz Demo

Using Map:

Stackblitz Demo

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Using Map:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related