Connect FaultAtlas to React

React bindings connect components to an existing FaultAtlas agent. They do not create or own a telemetry transport.

Provide the agent

Wrap the component tree once, then place an error boundary around the interface that needs fallback handling.

import type * as React from "react";
import {
  FaultAtlasErrorBoundary,
  FaultAtlasProvider,
} from "@faultatlas/react";

export function TelemetryRoot({ agent, children }: {
  agent: Parameters<typeof FaultAtlasProvider>[0]["agent"];
  children: React.ReactNode;
}) {
  return (
    <FaultAtlasProvider agent={agent}>
      <FaultAtlasErrorBoundary fallback={<p>Unable to render.</p>}>
        {children}
      </FaultAtlasErrorBoundary>
    </FaultAtlasProvider>
  );
}

Use useFaultAtlasAgent, useFaultAtlasContext, or useFaultAtlasBreadcrumb inside the provider. The supplied agent must implement captureException, addContext, and addBreadcrumb.

Where to place boundaries

Mount the provider once near the application root. Put an error boundary around meaningful product areas so one broken surface does not replace the entire application. Keep the fallback useful and accessible.

What is not automatic

React bindings do not discover state stores, inspect component props, or serialize the DOM. Add only bounded, reviewed context through the public agent API.

Verify the integration

Render a component that throws in a non-production test route, confirm the fallback remains usable, flush the agent, and verify one redacted incident. Remove the deliberate failure after the check.

See browser capture for the browser agent implementation.