Observable: inspect() method

Syntax

inspect()
inspect(inspector)

Parameters

inspector Optional

An object containing any of the following callback functions:

next Optional

A function called with each source value before it is forwarded to observers.

error Optional

A function called with the source's error before it is forwarded to observers.

complete Optional

A function called without arguments when the source completes, before completion is forwarded to observers.

subscribe Optional

A function called without arguments when the returned observable's subscription starts, before it subscribes to the source.

abort Optional

A function called with the abort reason when all observers unsubscribe from the returned observable. It is not called when the source completes or errors.

Alternatively, inspector can be a function, which is equivalent to passing an object with that function as its next callback. All callback return values are ignored.

Return value

A new Observable. When subscribed to, it emits the source observable's values and forwards its completion or error, calling the corresponding inspector callbacks before forwarding each notification.

Description

Like other observable-returning operators, this method is lazy: calling it creates a new observable without subscribing to the source. Processing starts when the returned observable is subscribed to.

If a subscribe, next, error, or complete callback throws an exception, the returned observable errors with that exception. A thrown exception from subscribe prevents subscription to the source. An exception thrown by abort is reported to the global object.

The callbacks run synchronously. Returned promises are not awaited, and their rejections are not handled by inspect().

Examples

Using inspect()

This example counts the first three button clicks. The inspect() callbacks log the subscription's start, each event before the count is updated, and the final count when the subscription completes. Click Restart after the stream ends to try again.

<button>Click me</button>
<p>Click count: 0</p>
<button id="restart" disabled>Restart</button>

const btn = document.querySelector("button");
const para = document.querySelector("p");

let countValue = 0;

function increment() {
  countValue++;
  para.textContent = `Click count: ${countValue}`;
}

const restart = document.querySelector("#restart");

function start() {
  restart.disabled = true;
  countValue = 0;
  para.textContent = "Click count: 0";
  btn
    .when("click")
    .take(3)
    .inspect({
      subscribe() {
        console.log(`Subscription started`);
      },
      next(e) {
        console.log(`Count value before click: ${countValue}`);
        console.log(`Event type: ${e.type}`);
      },
      complete() {
        console.log(`Final count value: ${countValue}`);
      },
    })
    .subscribe({
      next: increment,
      complete() {
        para.textContent = `No more clicks!`;
        restart.disabled = false;
      },
    });
}

restart.when("click").subscribe(start);
start();

Open the browser's console and click the button three times to see the logged notifications.

Specifications

Browser compatibility

See also

• Using observables
• Observable explainer