datadog-ux-utils Documentation - v1.0.0
    Preparing search index...

    Class ErrorBoundary

    React error boundary that catches errors in its child components and reports them to Datadog RUM.

    Use this component to wrap any part of your React app where you want to catch and report errors. When an error is caught, the fallback UI is rendered (if provided).

    import { ErrorBoundary } from 'datadog-ux-utils/react';

    <ErrorBoundary name="AppRoot" fallback={<h1>Something broke.</h1>}>
      <App />
    </ErrorBoundary>

    children: The subtree to protect with the error boundary.

    • fallback: Optional React node to render when an error is caught.
    • name: Optional identifier for this boundary (included in telemetry).

    Hierarchy

    • Component<Props, { hasError: boolean }>
      • ErrorBoundary
    Index

    Constructors

    constructor

    Properties

    state

    Methods

    getDerivedStateFromError componentDidCatch render

    Constructors

    • Parameters

      • props: Props

      Returns ErrorBoundary

    • Parameters

      • props: Props
      • context: any

        value of the parent Context specified in contextType.

      Returns ErrorBoundary

    Properties

    state: { hasError: boolean } = ...

    Methods

    • Updates state so the next render shows the fallback UI.

      Returns { hasError: boolean }

    • Reports the error to Datadog RUM with boundary name, stack, and app name.

      Parameters

      • error: Error

        The error thrown by a child component.

      • info: ErrorInfo

        React error info (component stack).

      Returns void

    • Renders the fallback UI if an error was caught, otherwise renders children.

      Returns ReactNode

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods