timeout

The most flexible option for creating a timeout behavior.

The first thing to know about the configuration is if you do not provide a with property to the configuration, when timeout conditions are met, this operator will emit a TimeoutError. Otherwise, it will use the factory function provided by with, and switch your subscription to the result of that. Timeout conditions are provided by the settings in first and each.

The first property can be either a Date for a specific time, a number for a time period relative to the point of subscription, or it can be skipped. This property is to check timeout conditions for the arrival of the first value from the source only. The timings of all subsequent values from the source will be checked against the time period provided by each, if it was provided.

The each property can be either a number or skipped. If a value for each is provided, it represents the amount of time the resulting observable will wait between the arrival of values from the source before timing out. Note that if first is not provided, the value from each will be used to check timeout conditions for the arrival of the first value and all subsequent values. If first is provided, each will only be use to check all values after the first.

Example

Emit a custom error if there is too much time between values

import { interval, throwError } from 'rxjs';
import { timeout } from 'rxjs/operators';

class CustomTimeoutError extends Error {
  constructor() {
     super('It was too slow');
     this.name = 'CustomTimeoutError';
  }
}

const slow$ = interval(900);

slow$.pipe(
   timeout({
     each: 1000,
     with: () => throwError(new CustomTimeoutError())
   })
)
.subscribe({
   error: console.error
})

Example

Switch to a faster observable if your source is slow.

import { interval, throwError } from 'rxjs';
import { timeout } from 'rxjs/operators';

const slow$ = interval(900);
const fast$ = interval(500);

slow$.pipe(
   timeout({
     each: 1000,
     with: () => fast$,
   })
)
.subscribe(console.log)

The most flexible option for creating a timeout behavior.

The first thing to know about the configuration is if you do not provide a with property to the configuration, when timeout conditions are met, this operator will emit a TimeoutError. Otherwise, it will use the factory function provided by with, and switch your subscription to the result of that. Timeout conditions are provided by the settings in first and each.

The first property can be either a Date for a specific time, a number for a time period relative to the point of subscription, or it can be skipped. This property is to check timeout conditions for the arrival of the first value from the source only. The timings of all subsequent values from the source will be checked against the time period provided by each, if it was provided.

The each property can be either a number or skipped. If a value for each is provided, it represents the amount of time the resulting observable will wait between the arrival of values from the source before timing out. Note that if first is not provided, the value from each will be used to check timeout conditions for the arrival of the first value and all subsequent values. If first is provided, each will only be use to check all values after the first.

Handling TimeoutErrors

If no with property was provided, subscriptions to the resulting observable may emit an error of TimeoutError. The timeout error provides useful information you can examine when you're handling the error. The most common way to handle the error would be with catchError, although you could use tap or just the error handler in your subscribe call directly, if your error handling is only a side effect (such as notifying the user, or logging).

In this case, you would check the error for instanceof TimeoutError to validate that the error was indeed from timeout, and not from some other source. If it's not from timeout, you should probably rethrow it if you're in a catchError.

Example

Emit a TimeoutError if the first value, and only the first value, does not arrive within 5 seconds

import { interval } from 'rxjs';
import { timeout } from 'rxjs/operators';

// A random interval that lasts between 0 and 10 seconds per tick
const source$ = interval(Math.round(Math.random() * 10000));

source$.pipe(
   timeout({ first: 5000 })
)
.subscribe(console.log);

Example

Emit a TimeoutError if the source waits longer than 5 seconds between any two values or the first value and subscription.

import { timer } from 'rxjs';
import { timeout, expand } from 'rxjs/operators';

const getRandomTime = () => Math.round(Math.random() * 10000);

// An observable that waits a random amount of time between each delivered value
const source$ = timer(getRandomTime()).pipe(
 expand(() => timer(getRandomTime()))
)

source$.pipe(
   timeout({ each: 5000 })
)
.subscribe(console.log);

Example

Emit a TimeoutError if the the source does not emit before 7 seconds, or if the source waits longer than 5 seconds between any two values after the first.

import { timer } from 'rxjs';
import { timeout, expand } from 'rxjs/operators';

const getRandomTime = () => Math.round(Math.random() * 10000);

// An observable that waits a random amount of time between each delivered value
const source$ = timer(getRandomTime()).pipe(
 expand(() => timer(getRandomTime()))
)

source$.pipe(
   timeout({ first: 7000, each: 5000 })
)
.subscribe(console.log);

Errors if the first value doesn't show up before the given date and time

Errors if it waits too long between any value