My application is a single page. The only route is '/'. I enter text into a field and use the url search parameters. I click a button and that uses the parameters to make a call to an api. the data returned populates server components. which then get displayed on the client. All good!

urlSearchParams set up as shown here: https://nextjs.org/learn/dashboard-app/adding-search-and-pagination


For testing purposes I then throw on the data fetch. Thereby re-creating a crash in the api. I correctly get redirected to the error.tsx. However, when I click on 'Try Again'... nothing happens.

I'm using the error.tsx from the tutorial https://nextjs.org/learn/dashboard-app/error-handling :

'use client';
 
import { useEffect } from 'react';
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Optionally log the error to an error reporting service
    console.error(error);
  }, [error]);
 
  return (
    <main className="flex h-full flex-col items-center justify-center">
      <h2 className="text-center">Something went wrong!</h2>
      <button
        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
        onClick={
          // Attempt to recover by trying to re-render the invoices route
          () => reset()
        }
      >
        Try again
      </button>
    </main>
  );
}

In my browser console I see errors such as:

nextjs error occurred in the <NotFoundErrorBoundary>

I went back to the tutorial, because there 'Try Again' does work. In the console there I see a

 <RedirectErrorBoundary> component

error.

Not sure if that's significant.

Any advise would really help!