Is error.tsx's reset function pointless if it doesn't retry fetch requests?

[codinginflow]

Error pages can receive a reset callback to try to rerender the erroring page:
https://nextjs.org/docs/app/building-your-application/routing/error-handling#recovering-from-errors

But this doesn't seem to execute any server-side requests again. Doesn't this make this whole functionality pretty pointless, considering that most errors are probably caused by failed network requests?

[SanderCokart]

I am just thinking the same thing...

[gerkim62]

Refreshing the Route Using Next.js Router Hook

Instead of using reset(), you can simply use the router hook to refresh the route in Next.js. Here's how you can do it:

// Import necessary dependencies
'use client'
import { useRouter } from 'next/navigation'

// Define the Error component
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  // Access the router hook
  const router = useRouter()

  // Render the component
  return (
    <div>
      <h2>Something went wrong!</h2>
      
      {/* use refresh instead of reset here */}
      <button onClick={() => router.refresh()}>Try again</button>
    </div>
  )
}

[SanderCokart]

Hehe funny thing actually but that doesn't refetch in my testing. On an error page only a window.location.reload works.

…

On Fri, Dec 1, 2023, 07:39 Gerison Kimathi Muriungi < ***@***.***> wrote: Refreshing the Route Using Next.js Router Hook Instead of using reset(), you can simply use the router hook to refresh the route in Next.js. Here's how you can do it: // Import necessary dependencies'use client'import { useRouter } from 'next/navigation' // Define the Error componentexport default function Error({ error, reset,}: { error: Error & { digest?: string } reset: () => void}) { // Access the router hook const router = useRouter() // Render the component return ( <div> <h2>Something went wrong!</h2> {/* use refresh instead of reset here */} <button onClick={() => router.refresh()}>Try again</button> </div> )} — Reply to this email directly, view it on GitHub <#49935 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKZJA4NLN3KLA2RKR2F44WDYHF3QLAVCNFSM6AAAAAAYFD54TWVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TOMRVHAZTS> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[LutherTS]

Refresh didn't work for me either, so I'm just using const router = useRouter() router.back() instead to see the user back to the previous page.

[Atliac]

startTransition() and router.refresh() come to the rescue.

#63369 (comment)

[musjj]

My setup looks like this:

// Server component
export default Page() {
  return (
    <Suspense>
      <DataFetchingComponent /> {/* Client component */}
    </Suspense>
  );
}

When DataFetchingComponent errors, even calling router.refresh() in error.tsx does not seem to cause that component to refetch. Is there a way to deal with this?

[gerkim62]

i would suggest doing a window.location.reload() if the application is not too heavy.