Simple reusable React error boundary component
MIT License
Bot releases are hidden (Show)
Removed references to ESLint config kcd-scripts
from package.json
Published by bvaughn 10 months ago
Published by bvaughn about 1 year ago
Published by bvaughn over 1 year ago
Published by bvaughn over 1 year ago
*Replaced post-processing "use client"
insertion step with a custom Parcel plug-in. This should hopefully produce better source maps.
Published by bvaughn over 1 year ago
Published by bvaughn over 1 year ago
Move "use client"
directive to top of the bundled file.
Published by bvaughn over 1 year ago
README changes only
Published by bvaughn over 1 year ago
Fix broken TypeScript definitions file (#133, https://github.com/parcel-bundler/parcel/issues/8908)
Published by bvaughn over 1 year ago
ErrorBoundaryContext
around fallback UI as well, so the useErrorBoundary
hook could be used within the fallback component to reset the boundary.For example:
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>
);
}
See this demo: https://codesandbox.io/s/nostalgic-browser-e9lpmf
Published by bvaughn over 1 year ago
useErrorHandler
hook with useErrorBoundary
; can be used to trigger an error boundary or dismiss oneonReset
and onResetKeys
props; pass "details" object explaining the cause of the resetuseErrorHandler
hook change?The old hook had two design flaws, both related to the givenError
parameter:
throw
this value. This seemed unnecessary, because if a component already has a reference to an error during render, it can just throw
the value itself.null
or undefined
values. (Although an edge case, JavaScript enables throwing any values/types.)If you were using the givenError
functionality– you can now just throw the value directly instead.
// Before
function Greeting() {
const [name, setName] = React.useState('')
const {greeting, error} = useGreeting(name)
useErrorHandler(error)
// After
function Greeting() {
const [name, setName] = React.useState('')
const {greeting, error} = useGreeting(name)
if (error) {
throw error;
}
useErrorHandler
hook?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.
This hook can be used to pass those errors to the nearest error boundary:
import { useErrorBoundary } from "react-error-boundary";
function Example() {
const { showBoundary } = useErrorBoundary();
useEffect(() => {
fetchGreeting(name).then(
response => {
// Set data in state and re-render
},
error => {
// Show error boundary
showBoundary(error);
}
);
});
// Render ...
}
A fallback component can use this hook to request the nearest error boundary retry the render that original failed.
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>
);
}