react-error-boundary 4.0.10 → 4.0.12

package/README.md

@@ -10,6 +10,9 @@ Reusable React [error boundary](https://react.dev/reference/react/Component#catc
 # npm
 npm install react-error-boundary
 
+# pnpm
+pnpm add react-error-boundary
+
 # yarn
 yarn add react-error-boundary
 ```

package/dist/declarations/src/ErrorBoundary.d.ts

@@ -1,10 +1,13 @@
-import { Component, ErrorInfo, PropsWithChildren, PropsWithRef } from "react";
+import { Component, ErrorInfo } from "react";
 import { ErrorBoundaryProps } from "./types.js";
 type ErrorBoundaryState = {
-    didCatch: boolean;
+    didCatch: true;
     error: any;
+} | {
+    didCatch: false;
+    error: null;
 };
-export declare class ErrorBoundary extends Component<PropsWithRef<PropsWithChildren<ErrorBoundaryProps>>, ErrorBoundaryState> {
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
     constructor(props: ErrorBoundaryProps);
     static getDerivedStateFromError(error: Error): {
         didCatch: boolean;

package/dist/declarations/src/types.d.ts

@@ -1,13 +1,11 @@
-import { Component, ComponentType, FunctionComponent, ReactElement, ReactNode } from "react";
+import { Component, ComponentType, ErrorInfo, FunctionComponent, PropsWithChildren, ReactElement, ReactNode } from "react";
 declare function FallbackRender(props: FallbackProps): ReactNode;
 export type FallbackProps = {
     error: any;
     resetErrorBoundary: (...args: any[]) => void;
 };
-type ErrorBoundarySharedProps = {
-    onError?: (error: Error, info: {
-        componentStack: string;
-    }) => void;
+type ErrorBoundarySharedProps = PropsWithChildren<{
+    onError?: (error: Error, info: ErrorInfo) => void;
     onReset?: (details: {
         reason: "imperative-api";
         args: any[];
@@ -17,7 +15,7 @@ type ErrorBoundarySharedProps = {
         next: any[] | undefined;
     }) => void;
     resetKeys?: any[];
-};
+}>;
 export type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
     fallback?: never;
     FallbackComponent: ComponentType<FallbackProps>;

package/dist/declarations/src/useErrorBoundary.d.ts

@@ -1,5 +1,5 @@
-export type UseErrorBoundaryApi<Error> = {
+export type UseErrorBoundaryApi<TError> = {
     resetBoundary: () => void;
-    showBoundary: (error: Error) => void;
+    showBoundary: (error: TError) => void;
 };
-export declare function useErrorBoundary<Error = any>(): UseErrorBoundaryApi<Error>;
+export declare function useErrorBoundary<TError = any>(): UseErrorBoundaryApi<TError>;

package/dist/react-error-boundary.cjs.js

@@ -83,14 +83,14 @@ class ErrorBoundary extends react.Component {
         error,
         resetErrorBoundary: this.resetErrorBoundary
       };
-      if (react.isValidElement(fallback)) {
-        childToRender = fallback;
-      } else if (typeof fallbackRender === "function") {
+      if (typeof fallbackRender === "function") {
         childToRender = fallbackRender(props);
       } else if (FallbackComponent) {
         childToRender = react.createElement(FallbackComponent, props);
+      } else if (fallback === null || react.isValidElement(fallback)) {
+        childToRender = fallback;
       } else {
-        throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
+        throw error;
       }
     }
     return react.createElement(ErrorBoundaryContext.Provider, {
@@ -112,7 +112,6 @@ function assertErrorBoundaryContext(value) {
   if (value == null || typeof value.didCatch !== "boolean" || typeof value.resetErrorBoundary !== "function") {
     throw new Error("ErrorBoundaryContext not found");
   }
-  return true;
 }
 
 function useErrorBoundary() {
@@ -124,7 +123,7 @@ function useErrorBoundary() {
   });
   const memoized = react.useMemo(() => ({
     resetBoundary: () => {
-      context === null || context === void 0 ? void 0 : context.resetErrorBoundary();
+      context.resetErrorBoundary();
       setState({
         error: null,
         hasError: false
@@ -134,7 +133,7 @@ function useErrorBoundary() {
       error,
       hasError: true
     })
-  }), [context === null || context === void 0 ? void 0 : context.resetErrorBoundary]);
+  }), [context.resetErrorBoundary]);
   if (state.hasError) {
     throw state.error;
   }

package/dist/react-error-boundary.development.cjs.js

@@ -0,0 +1,161 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const ErrorBoundaryContext = react.createContext(null);
+
+const initialState = {
+  didCatch: false,
+  error: null
+};
+class ErrorBoundary extends react.Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+
+    // There's an edge case where if the thing that triggered the error happens to *also* be in the resetKeys array,
+    // we'd end up resetting the error boundary immediately.
+    // This would likely trigger a second error to be thrown.
+    // So we make sure that we don't check the resetKeys on the first call of cDU after the error is set.
+
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = react.createElement(FallbackComponent, props);
+      } else if (fallback === null || react.isValidElement(fallback)) {
+        childToRender = fallback;
+      } else {
+        {
+          console.error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
+        }
+        throw error;
+      }
+    }
+    return react.createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+}
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+}
+
+function assertErrorBoundaryContext(value) {
+  if (value == null || typeof value.didCatch !== "boolean" || typeof value.resetErrorBoundary !== "function") {
+    throw new Error("ErrorBoundaryContext not found");
+  }
+}
+
+function useErrorBoundary() {
+  const context = react.useContext(ErrorBoundaryContext);
+  assertErrorBoundaryContext(context);
+  const [state, setState] = react.useState({
+    error: null,
+    hasError: false
+  });
+  const memoized = react.useMemo(() => ({
+    resetBoundary: () => {
+      context.resetErrorBoundary();
+      setState({
+        error: null,
+        hasError: false
+      });
+    },
+    showBoundary: error => setState({
+      error,
+      hasError: true
+    })
+  }), [context.resetErrorBoundary]);
+  if (state.hasError) {
+    throw state.error;
+  }
+  return memoized;
+}
+
+function withErrorBoundary(component, errorBoundaryProps) {
+  const Wrapped = react.forwardRef((props, ref) => react.createElement(ErrorBoundary, errorBoundaryProps, react.createElement(component, {
+    ...props,
+    ref
+  })));
+
+  // Format for display in DevTools
+  const name = component.displayName || component.name || "Unknown";
+  Wrapped.displayName = "withErrorBoundary(".concat(name, ")");
+  return Wrapped;
+}
+
+exports.ErrorBoundary = ErrorBoundary;
+exports.ErrorBoundaryContext = ErrorBoundaryContext;
+exports.useErrorBoundary = useErrorBoundary;
+exports.withErrorBoundary = withErrorBoundary;

package/dist/react-error-boundary.development.cjs.mjs

@@ -0,0 +1,6 @@
+export {
+  ErrorBoundary,
+  ErrorBoundaryContext,
+  useErrorBoundary,
+  withErrorBoundary
+} from "./react-error-boundary.development.cjs.js";

package/dist/react-error-boundary.development.esm.js

@@ -0,0 +1,154 @@
+'use client';
+import { createContext, Component, createElement, isValidElement, useContext, useState, useMemo, forwardRef } from 'react';
+
+const ErrorBoundaryContext = createContext(null);
+
+const initialState = {
+  didCatch: false,
+  error: null
+};
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+
+    // There's an edge case where if the thing that triggered the error happens to *also* be in the resetKeys array,
+    // we'd end up resetting the error boundary immediately.
+    // This would likely trigger a second error to be thrown.
+    // So we make sure that we don't check the resetKeys on the first call of cDU after the error is set.
+
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = createElement(FallbackComponent, props);
+      } else if (fallback === null || isValidElement(fallback)) {
+        childToRender = fallback;
+      } else {
+        {
+          console.error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
+        }
+        throw error;
+      }
+    }
+    return createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+}
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+}
+
+function assertErrorBoundaryContext(value) {
+  if (value == null || typeof value.didCatch !== "boolean" || typeof value.resetErrorBoundary !== "function") {
+    throw new Error("ErrorBoundaryContext not found");
+  }
+}
+
+function useErrorBoundary() {
+  const context = useContext(ErrorBoundaryContext);
+  assertErrorBoundaryContext(context);
+  const [state, setState] = useState({
+    error: null,
+    hasError: false
+  });
+  const memoized = useMemo(() => ({
+    resetBoundary: () => {
+      context.resetErrorBoundary();
+      setState({
+        error: null,
+        hasError: false
+      });
+    },
+    showBoundary: error => setState({
+      error,
+      hasError: true
+    })
+  }), [context.resetErrorBoundary]);
+  if (state.hasError) {
+    throw state.error;
+  }
+  return memoized;
+}
+
+function withErrorBoundary(component, errorBoundaryProps) {
+  const Wrapped = forwardRef((props, ref) => createElement(ErrorBoundary, errorBoundaryProps, createElement(component, {
+    ...props,
+    ref
+  })));
+
+  // Format for display in DevTools
+  const name = component.displayName || component.name || "Unknown";
+  Wrapped.displayName = "withErrorBoundary(".concat(name, ")");
+  return Wrapped;
+}
+
+export { ErrorBoundary, ErrorBoundaryContext, useErrorBoundary, withErrorBoundary };

package/dist/react-error-boundary.esm.js

@@ -1,5 +1,5 @@
 'use client';
-import { createContext, Component, isValidElement, createElement, useContext, useState, useMemo, forwardRef } from 'react';
+import { createContext, Component, createElement, isValidElement, useContext, useState, useMemo, forwardRef } from 'react';
 
 const ErrorBoundaryContext = createContext(null);
 
@@ -79,14 +79,14 @@ class ErrorBoundary extends Component {
         error,
         resetErrorBoundary: this.resetErrorBoundary
       };
-      if (isValidElement(fallback)) {
-        childToRender = fallback;
-      } else if (typeof fallbackRender === "function") {
+      if (typeof fallbackRender === "function") {
         childToRender = fallbackRender(props);
       } else if (FallbackComponent) {
         childToRender = createElement(FallbackComponent, props);
+      } else if (fallback === null || isValidElement(fallback)) {
+        childToRender = fallback;
       } else {
-        throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
+        throw error;
       }
     }
     return createElement(ErrorBoundaryContext.Provider, {
@@ -108,7 +108,6 @@ function assertErrorBoundaryContext(value) {
   if (value == null || typeof value.didCatch !== "boolean" || typeof value.resetErrorBoundary !== "function") {
     throw new Error("ErrorBoundaryContext not found");
   }
-  return true;
 }
 
 function useErrorBoundary() {
@@ -120,7 +119,7 @@ function useErrorBoundary() {
   });
   const memoized = useMemo(() => ({
     resetBoundary: () => {
-      context === null || context === void 0 ? void 0 : context.resetErrorBoundary();
+      context.resetErrorBoundary();
       setState({
         error: null,
         hasError: false
@@ -130,7 +129,7 @@ function useErrorBoundary() {
       error,
       hasError: true
     })
-  }), [context === null || context === void 0 ? void 0 : context.resetErrorBoundary]);
+  }), [context.resetErrorBoundary]);
   if (state.hasError) {
     throw state.error;
   }

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-error-boundary",
-  "version": "4.0.10",
+  "version": "4.0.12",
   "description": "Simple reusable React error boundary component",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
+  "packageManager": "pnpm@8.6.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/bvaughn/react-error-boundary"
@@ -16,12 +17,23 @@
         "import": "./dist/react-error-boundary.cjs.mjs",
         "default": "./dist/react-error-boundary.cjs.js"
       },
+      "development": {
+        "module": "./dist/react-error-boundary.development.esm.js",
+        "import": "./dist/react-error-boundary.development.cjs.mjs",
+        "default": "./dist/react-error-boundary.development.cjs.js"
+      },
       "module": "./dist/react-error-boundary.esm.js",
       "import": "./dist/react-error-boundary.cjs.mjs",
       "default": "./dist/react-error-boundary.cjs.js"
     },
     "./package.json": "./package.json"
   },
+  "imports": {
+    "#is-development": {
+      "development": "./src/env-conditions/development.ts",
+      "default": "./src/env-conditions/production.ts"
+    }
+  },
   "types": "dist/react-error-boundary.cjs.d.ts",
   "files": [
     "dist"
@@ -45,7 +57,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-typescript": "^7.21.5",
-    "@preconstruct/cli": "^2.7.0",
+    "@preconstruct/cli": "^2.8.1",
     "@types/jest": "^26.0.15",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -55,7 +67,7 @@
     "react": "^18",
     "react-dom": "^18",
     "ts-jest": "^29.0.5",
-    "typescript": "^4.1.2"
+    "typescript": "^5.1.6"
   },
   "peerDependencies": {
     "react": ">=16.13.1"