ReportingObserver is an observer that detects a web browser's performance, usability, and stability elements. It can be usefully employed to monitor, in real time, issues that may occur on a page.

TYPESCRIPT
const ro = new ReportingObserver(callback, options);

ro.observe();

When declaring the observer, you can pass options to adjust the details. It has the ReportingObserverOptions type.

Specifies the report types the observer will provide, as an array. The values that can be specified are deprecation and intervention.

• deprecation (deprecation report): Provides a related report when a feature that is deprecated or scheduled to be deprecated by the browser is being used.
• intervention (intervention report): Provides a related report when the browser intervenes in and modifies or blocks a particular behavior.

Specifies whether to also include reports that occurred before ReportingObserver was declared. Defaults to false.

You can handle related reports through the callback method. It has the ReportingObserverCallback type.

Returns an array of reports that occurred. It has the Report type.

• type: Returns the report type. Has one of deprecation or intervention.
• url: Returns the URL the report targets. Generally contains the current page URL.
• body: Returns the report content. The content varies depending on each report.

Returns the observer itself. Through this, you can access the observer from within the callback method.

Let's use ReportingObserver conveniently through a custom hook.

TYPESCRIPT
export function useReportingObserver(): void
{
  //
}

Define the useReportingObserver method as above.

To use useReportingObserver, the following two elements are needed.

1. A callback method
2. Options

Like PerformanceObserver, no DOM is needed.

TYPESCRIPT
import { useEffect } from "react";

export type UseReportingObserverCallback = (entry: Report) => void;

/**
 * Hook method for applying ReportingObserver
 *
 * @param {UseReportingObserverCallback} callback: Callback method
 * @param {PerformanceObserverInit} options: Options
 */
export function useReportingObserver(
  callback: UseReportingObserverCallback,
  options?: ReportingObserverOptions
): void {
  useEffect(() => {
    const ro = new ReportingObserver((reports) => {
      reports.forEach(callback);
    }, options);
  }, [callback, options]);
}

Initialize ReportingObserver and assign it to the ro variable.

You can register a tag through the ro.observe() method.

TYPESCRIPT
import { useEffect } from "react";

export type UseReportingObserverCallback = (entry: Report) => void;

/**
 * Hook method for applying ReportingObserver
 *
 * @param {UseReportingObserverCallback} callback: Callback method
 * @param {PerformanceObserverInit} options: Options
 */
export function useReportingObserver(
  callback: UseReportingObserverCallback,
  options?: ReportingObserverOptions
): void {
  useEffect(() => {
    const ro = new ReportingObserver((reports) => {
      reports.forEach(callback);
    }, options);

    ro.observe();
  }, [callback, options]);
}

Finally, add cleanup code so that ReportingObserver registrations don't stack up every time the component re-renders.

ReportingObserver can be removed via the ro.disconnect() method.

TYPESCRIPT
import { useEffect } from "react";

export type UseReportingObserverCallback = (entry: Report) => void;

/**
 * Hook method for applying ReportingObserver
 *
 * @param {UseReportingObserverCallback} callback: Callback method
 * @param {PerformanceObserverInit} options: Options
 */
export function useReportingObserver(
  callback: UseReportingObserverCallback,
  options?: ReportingObserverOptions
): void {
  useEffect(() => {
    const ro = new ReportingObserver((reports) => {
      reports.forEach(callback);
    }, options);

    ro.observe();

    return () => {
      ro.disconnect();
    };
  }, [callback, options]);
}

The full code is as above.

A simple example has been implemented in CodeSandbox.

ReportingObserver is an observer that can monitor potential errors that occur, or could occur, in a service.

By making good use of this observer, you could easily build your own error monitoring module.

However, there are already several open-source or commercial pieces of software that verify code quality and service stability, and, crucially, information about ReportingObserver is fairly scarce.

Like PerformanceObserver, I think just knowing that this observer exists is enough — it shouldn't cause any major issues in development even without going deeper.

With this, the six-part Observer API series comes to an end. In actual development, I've been replacing some event-driven code with the Observer API. It seemed to make it easier to build more efficient and simpler logic for component and feature development.

In particular, in most personal projects I develop these days, I turn the major observers into React hooks and use them, and it's been appealing that this can cut down on the tedious code involved in registering DOM elements.

Going forward, I plan to occasionally write posts related to React components, and I judged that covering Observer-related content beforehand would make some of those component explanations flow more smoothly.

Along with upcoming component explanations, regardless of whether it's about a specific component, I hope anyone reading this post gains more insight into feature development through the Observer API.