react-error-boundary - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

dist/react-error-boundary.d.ts

 import { Component, ComponentType, FunctionComponent, ReactElement, ReactNode, ErrorInfo, PropsWithChildren, PropsWithRef } from "react";
 export type ErrorBoundaryContextType = {
-    didCatch: false;
+    didCatch: boolean;
     error: any;
@@ -56,3 +56,3 @@ resetErrorBoundary: (...args: any[]) => void;
     componentDidUpdate(prevProps: ErrorBoundaryProps, prevState: ErrorBoundaryState): void;
-    render(): string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").FunctionComponentElement<import("react").ProviderProps<ErrorBoundaryContextType | null>> | null | undefined;
+    render(): import("react").FunctionComponentElement<import("react").ProviderProps<import("ErrorBoundaryContext").ErrorBoundaryContextType | null>>;
 }
@@ -59,0 +59,0 @@ export type UseErrorBoundaryApi<Error> = {

dist/react-error-boundary.js

@@ -77,2 +77,3 @@ var $8zHUo$react = require("react");
         const { didCatch: didCatch , error: error  } = this.state;
+        let childToRender = children;
         if (didCatch) {
@@ -83,5 +84,5 @@ const props = {
             };
-            if ((0, $8zHUo$react.isValidElement)(fallback)) return fallback;
-            else if (typeof fallbackRender === "function") return fallbackRender(props);
-            else if (FallbackComponent) return (0, $8zHUo$react.createElement)(FallbackComponent, props);
+            if ((0, $8zHUo$react.isValidElement)(fallback)) childToRender = fallback;
+            else if (typeof fallbackRender === "function") childToRender = fallbackRender(props);
+            else if (FallbackComponent) childToRender = (0, $8zHUo$react.createElement)(FallbackComponent, props);
             else throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
@@ -95,3 +96,3 @@ }
             }
-        }, children);
+        }, childToRender);
     }
@@ -98,0 +99,0 @@ }

dist/react-error-boundary.module.js

@@ -61,2 +61,3 @@ import {isValidElement as $hgUW1$isValidElement, createElement as $hgUW1$createElement, Component as $hgUW1$Component, createContext as $hgUW1$createContext, useContext as $hgUW1$useContext, useState as $hgUW1$useState, useMemo as $hgUW1$useMemo} from "react";
         const { didCatch: didCatch , error: error  } = this.state;
+        let childToRender = children;
         if (didCatch) {
@@ -67,5 +68,5 @@ const props = {
             };
-            if ((0, $hgUW1$isValidElement)(fallback)) return fallback;
-            else if (typeof fallbackRender === "function") return fallbackRender(props);
-            else if (FallbackComponent) return (0, $hgUW1$createElement)(FallbackComponent, props);
+            if ((0, $hgUW1$isValidElement)(fallback)) childToRender = fallback;
+            else if (typeof fallbackRender === "function") childToRender = fallbackRender(props);
+            else if (FallbackComponent) childToRender = (0, $hgUW1$createElement)(FallbackComponent, props);
             else throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
@@ -79,3 +80,3 @@ }
             }
-        }, children);
+        }, childToRender);
     }
@@ -82,0 +83,0 @@ }

package.json

 {
   "name": "react-error-boundary",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Simple reusable React error boundary component",
@@ -5,0 +5,0 @@ "author": "Brian Vaughn <[e-mail]>",

README.md

 # react-error-boundary
 
-Reusable React [error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) component. Check out [this blog post](https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react) for examples of how this package can be used.
+Reusable React [error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) component. Supports all React renderers (including React DOM and React Native). Refer to [this blog post](https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react) for more examples of how this package can be used.
 
-#### If you like this project, [buy me a coffee](http://givebrian.coffee/).
+### If you like this project, [buy me a coffee](http://givebrian.coffee/).
 
@@ -101,2 +101,4 @@ ## Getting started
 
+#### Show the nearest error boundary from an event handler
+
 React only handles errors thrown during render or during component lifecycle methods (e.g. effects and did-mount/did-update). Errors thrown in event handlers, or after async code has run, will not be caught.
@@ -110,3 +112,3 @@
 function Example() {
-  const { resetBoundary, showErrorBoundary } = useErrorBoundary();
+  const { showBoundary } = useErrorBoundary();
 
@@ -120,3 +122,3 @@ useEffect(() => {
         // Show error boundary
-        showErrorBoundary(error);
+        showBoundary(error);
       }
@@ -130,2 +132,21 @@ );
 
+#### Dismiss the nearest error boundary
+A fallback component can use this hook to request the nearest error boundary retry the render that original failed.
+
+```js
+import { useErrorBoundary } from "react-error-boundary";
+
+function ErrorFallback({ error }) {
+  const { resetBoundary } = useErrorBoundary();
+
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre style={{ color: "red" }}>{error.message}</pre>
+      <button onClick={resetBoundary}>Try again</button>
+    </div>
+  );
+}
+```
+
 ### `withErrorBoundary` HOC
@@ -132,0 +153,0 @@ This package can also be used as a [higher-order component](https://legacy.reactjs.org/docs/higher-order-components.html) that accepts all of the same props as above:

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44826

increased by1.69%

Lines of code

324

increased by0.31%

Number of lines in readme file

163

increased by14.79%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes