react-error-boundary

  • Version 6.1.1
  • Published
  • 45.9 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

variable ErrorBoundaryContext

const ErrorBoundaryContext: Context<ErrorBoundaryContextType>;

    Functions

    function getErrorMessage

    getErrorMessage: (thrown: unknown) => string | undefined;

      function useErrorBoundary

      useErrorBoundary: () => {
      error: unknown | null;
      resetBoundary: () => void;
      showBoundary: (error: unknown) => 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: unknown, 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: unknown | 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: unknown;
                              resetErrorBoundary: (...args: unknown[]) => void;
                              };

                                type OnErrorCallback

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

                                  type UseErrorBoundaryApi

                                  type UseErrorBoundaryApi = {
                                  error: unknown | null;
                                  resetBoundary: () => void;
                                  showBoundary: (error: unknown) => 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>