Releases: bvaughn/react-error-boundary
Releases · bvaughn/react-error-boundary
4.0.8
4.0.7
4.0.6
4.0.5
4.0.4
4.0.3
4.0.2
4.0.1
- Render
ErrorBoundaryContextaround fallback UI as well, so theuseErrorBoundaryhook 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
4.0.0
- Replace
useErrorHandlerhook withuseErrorBoundary; can be used to trigger an error boundary or dismiss one - Merge
onResetandonResetKeysprops; pass "details" object explaining the cause of the reset
Why did the useErrorHandler hook change?
The old hook had two design flaws, both related to the givenError parameter:
- All the hook did was
throwthis value. This seemed unnecessary, because if a component already has a reference to an error during render, it can justthrowthe value itself.
- It would not properly re-throw
nullorundefinedvalues. (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;
}How can I use the new useErrorHandler hook?
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.
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 ...
}Dismiss the nearest error boundary
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>
);
}