In the Next.js App Router, error boundaries can be defined as files with the naming convention error.js
or error.tsx
. These files receive a reset
prop, which allows re-rendering the component to remove the error fallback page. However, when using reset
on a server component, the component won’t reset. This behavior is expected because server components do not re-render in the same way as client components. Instead, you need to use router.refresh()
to reload the server component and then call reset()
to re-render and remove the error boundary.
The gotcha is that invoking these functions together won’t necessarily remove the error boundary, even though the actions are technically correct. This issue arises because router.refresh()
might not have completed yet (especially if it involves data fetching from the server), causing reset()
to be called on outdated data. Since router.refresh()
is a synchronous operation, it doesn’t allow for await
. In this case, startTransition
can help by allowing React to handle the update based on when each action completes.
function recover() { startTransition(() => { router.refresh(); reset(); }); }