Reset error boundaries and rerender server component

[denisso]

try reset error boundaries and rerender server component

online demo - reset successful
online demo - reset not successful
code repository

page.tsx - dynamic server component

import Link from "next/link";
import styles from "../page.module.scss";

const Page = ({
  searchParams,
}: {
  searchParams?: { [key: string]: string | string[] | undefined };
}) => {
  if (searchParams?.error) {
    throw Error("Custom server error");
  }

  return (
    <Link
      href={{
        pathname: "/server",
        query: { error: "true" },
      }}
      legacyBehavior
    >
      <a className={styles.navItem}>Get error</a>
    </Link>
  );
};
export default Page;
export const dynamic = "force-dynamic";

error.js

"use client";
import { useRouter } from "next/navigation";
import styles from "../error.module.scss";

const wait = () =>
  new Promise((resolve) => setTimeout(() => resolve(true), 1000));

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  const router = useRouter();
  return (
    <div>
      <h2>Server error boundary work properly</h2>
      <div>{error.message}</div>
      <div>
        <button
          className={styles.navItem}
          onClick={async () => {
            const url = new URL(window.location.href);

            router.push(url.origin + url.pathname);
            // i want make hard navigation and invalidate cache for server component rerender
            router.refresh(); // but throw error occurred in the <Router> component, cannot be catch with global error
            // await wait(); // not ideal solution
            reset();
          }}
        >
          Try again
        </button>
      </div>
    </div>
  );
}

Click "Server" in nav menu.

Click on link "Get error", search Params error=true will be added to page url , dynamic server component will generate error.

In order to regenerate the server component without an error, I delete search Param error=true and execute router.refresh(). If we run route.refresh() without the await function, we will get an error: error occurred in the component.

How to reset error boundaries correctly and regenerate the server component?

[icyJoseph]

Since the new Router is coupled to React (concurrent features included) fully, I think that calling router.push and refresh are batching React updates.

It is a bit complex what's going on there, but I think you gotta tell React that reseting the UI, using .push, .refresh is a more important update than reset, but all must be executed anyway.

So you can do that with startTransition:

            const url = new URL(window.location.href);
            router.push(url.origin + url.pathname);
            router.refresh(); 
            startTransition(() => reset());

Where startTransition comes from React:

import { startTransition } from 'react';

Since this is technology in beta state I haven't taken a deep dive into the mechanics of the router, but I think that starting a transition is the way to go here.