Logo for jsDocs.io

react-error-boundary

  • Version 6.0.3
  • Published
  • 44 kB
  • No dependencies
  • MIT license

Install

npm i react-error-boundary
yarn add react-error-boundary
pnpm add react-error-boundary

Overview

Simple reusable React error boundary component

Index

Variables

Functions

Classes

Type Aliases

Variables

variable ErrorBoundaryContext

const ErrorBoundaryContext: Context<ErrorBoundaryContextType>;

    Functions

    function useErrorBoundary

    useErrorBoundary: () => {
        error: Error | null;
        resetBoundary: () => void;
        showBoundary: (error: Error) => void;
    };

    • Convenience hook for imperatively showing or dismissing error boundaries.

      ⚠️ This hook must only be used within an ErrorBoundary subtree.

    function withErrorBoundary

    withErrorBoundary: <Type extends ComponentClass<unknown>, Props extends object>(
        Component: ComponentType<Props>,
        errorBoundaryProps: ErrorBoundaryProps
    ) => ForwardRefExoticComponent<any>;

      Classes

      class ErrorBoundary

      class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {}

      • A reusable React [error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) component. Wrap this component around other React components to "catch" errors and render a fallback UI.

        This package is built on top of React [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary), so it has all of the advantages and constraints of that API. This means that it can't catch errors during: - Server side rendering - Event handlers - Asynchronous code (including effects)

        ℹ️ The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent. Refer to the documentation to determine which is best for your application.

        ℹ️ This is a **client component**. You can only pass props to it that are serializeable or use it in files that have a "use client"; directive.

      constructor

      constructor(props: any);

        method componentDidCatch

        componentDidCatch: (error: Error, info: ErrorInfo) => void;

          method componentDidUpdate

          componentDidUpdate: (
              prevProps: ErrorBoundaryProps,
              prevState: ErrorBoundaryState
          ) => void;

            method getDerivedStateFromError

            static getDerivedStateFromError: (error: Error) => {
                didCatch: boolean;
                error: Error;
            };

              method render

              render: () => FunctionComponentElement<ProviderProps<ErrorBoundaryContextType>>;

                method resetErrorBoundary

                resetErrorBoundary: (...args: unknown[]) => void;

                  Type Aliases

                  type ErrorBoundaryContextType

                  type ErrorBoundaryContextType = {
                      didCatch: boolean;
                      error: Error | null;
                      resetErrorBoundary: (...args: unknown[]) => void;
                  };

                    type ErrorBoundaryProps

                    type ErrorBoundaryProps =
                        | ErrorBoundaryPropsWithFallback
                        | ErrorBoundaryPropsWithComponent
                        | ErrorBoundaryPropsWithRender;

                      type ErrorBoundaryPropsWithComponent

                      type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
                          fallback?: never;
                          /**
                           * React component responsible for returning a fallback UI based on a thrown value.
                           *
                           * ```tsx
                           * <ErrorBoundary FallbackComponent={Fallback} />
                           * ```
                           */
                          FallbackComponent: ComponentType<FallbackProps>;
                          fallbackRender?: never;
                      };

                        type ErrorBoundaryPropsWithFallback

                        type ErrorBoundaryPropsWithFallback = ErrorBoundarySharedProps & {
                            /**
                             * Static content to render in place of an error if one is thrown.
                             *
                             * ```tsx
                             * <ErrorBoundary fallback={<div class="text-red">Something went wrong</div>} />
                             * ```
                             */
                            fallback: ReactNode;
                            FallbackComponent?: never;
                            fallbackRender?: never;
                        };

                          type ErrorBoundaryPropsWithRender

                          type ErrorBoundaryPropsWithRender = ErrorBoundarySharedProps & {
                              fallback?: never;
                              FallbackComponent?: never;
                              /**
                               * [Render prop](https://react.dev/reference/react/Children#calling-a-render-prop-to-customize-rendering) function responsible for returning a fallback UI based on a thrown value.
                               *
                               * ```tsx
                               * <ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) => <div>...</div>} />
                               * ```
                               */
                              fallbackRender: (props: FallbackProps) => ReactNode;
                          };

                            type FallbackProps

                            type FallbackProps = {
                                error: Error;
                                resetErrorBoundary: (...args: unknown[]) => void;
                            };

                              type OnErrorCallback

                              type OnErrorCallback = (error: Error, info: ErrorInfo) => void;

                                type UseErrorBoundaryApi

                                type UseErrorBoundaryApi = {
                                    error: Error | null;
                                    resetBoundary: () => void;
                                    showBoundary: (error: Error) => void;
                                };

                                  Package Files (1)

                                  Dependencies (0)

                                  No dependencies.

                                  Dev Dependencies (60)

                                  Peer Dependencies (1)

                                  Badge

                                  To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                  You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-error-boundary.

                                  • Markdown
                                    [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-error-boundary)
                                  • HTML
                                    <a href="https://www.jsdocs.io/package/react-error-boundary"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>