Parallel Routes Error handling retry for only error segment.

[1909577]

Hi guys, im trying with the error boundary stuff in nextjs. I found that if i use the reset function without router.refresh() it wont retry my server component to re-render, unless i refresh my page. As the solution below, can work for normal page, but if i using Parallel Route, if one of the segment is encounter error, and how can i retry only that segment instead of the whole page?

"use client"; // Error boundaries must be Client Components
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const router = useRouter();
  return (
    <div>
      <div>Something went wrong!</div>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => {
            startTransition(() => {
              router.refresh();
              reset();
            });
          }
        }
      >
        Try again
      </button>
    </div>
  );
}

[GylanSalih]

Hope it will work, let me know

Create a Retry Context Provider
This client component manages the retry state and provides methods to increment retries.

---

    // components/RetryProvider.tsx
    'use client';
    import { createContext, useContext, useState } from 'react';

    type RetryContextType = {
      retryCount: number;
      incrementRetry: () => void;
    };

    const RetryContext = createContext<RetryContextType>({
      retryCount: 0,
      incrementRetry: () => {},
    });

    export function useRetry() {
      return useContext(RetryContext);
    }

    export function RetryProvider({ children }: { children: React.ReactNode }) {
      const [retryCount, setRetryCount] = useState(0);
      const incrementRetry = () => setRetryCount((prev) => prev + 1);

      return (
        <RetryContext.Provider value={{ retryCount, incrementRetry }}>
          {children}
        </RetryContext.Provider>
      );
    }

---

Wrap the Parallel Route with the Retry Provider
Esure the parallel route's layout is wrapped with RetryProvider to provide context to all components in the segment.

---

// app/@auth/layout.tsx
 import { RetryProvider } from '../components/RetryProvider';

 export default function AuthLayout({ children }: { children: React.ReactNode }) {
   return <RetryProvider>{children}</RetryProvider>;
 }

 Use a Retry Wrapper in the Parallel Route's Page
 This client component applies the retryCount as a key to force re-renders of the server component.
 tsx
 Copy

 // app/@auth/page.tsx
 import AuthContent from './AuthContent';
 import { RetryWrapper } from './RetryWrapper';

 export default function AuthPage() {
   return (
     <RetryWrapper>
       <AuthContent />
     </RetryWrapper>
   );
 }

    // app/@auth/RetryWrapper.tsx
    'use client';
    import { useRetry } from '../components/RetryProvider';

    export function RetryWrapper({ children }: { children: React.ReactNode }) {
      const { retryCount } = useRetry();
      return <div key={retryCount}>{children}</div>;
    }

---

Update the Error Boundary to Trigger Retries
Modify the error component to use the context's incrementRetry method and reset the error boundary.

---

    // app/@auth/error.tsx
    'use client';
    import { useRetry } from '../components/RetryProvider';

    export default function Error({ reset }: { error: Error; reset: () => void }) {
      const { incrementRetry } = useRetry();

      const handleRetry = () => {
        incrementRetry(); // Increment to change the key in RetryWrapper
        reset(); // Reset the error boundary
      };

      return (
        <div>
          <button onClick={handleRetry}>Retry Segment</button>
        </div>
      );
    }

---

The RetryContext provides the RetryProvider, which manages the retryCount state and includes a method to increment it. This allows components within the parallel route to trigger retries when needed. The RetryWrapper uses retryCount as a key to force the remount of the server component (like AuthContent) whenever retryCount changes, which results in a fresh server-side render. The error boundary integrates with this setup by utilizing the context to increment the retry count and calling reset() to clear the error state, targeting only the affected segment.

[1909577]

this my folder structure.

as below, the compA and compB are just doing the same stuff, and i added id for the RetryProvider for my debug purposes.
but as i try, in my RetryProvider did updated the count, but it didn't trigger my compA or compB to re-render (as i dont see the console in compA and compB). I suspect it is because compA and compB is server component, so even it parent div key had changed but it wont request the new one. Please correct me if I'm wrong.

// testPage/layout.tsx
import { RetryProvider } from "@/components/RetryProvider";
import React from "react";
import { RetryWrapper } from "./RetryWrapper";

export default function TestPagelayout({
  children,
  compA,
  compB,
}: {
  children: React.ReactNode;
  compA: React.ReactNode;
  compB: React.ReactNode;
}) {
  return (
    <div>
      test page layout
      {children}
      <RetryProvider id={1}>
        <RetryWrapper>{compA}</RetryWrapper>
      </RetryProvider>
      <RetryProvider id={2}>
        <RetryWrapper>{compB}</RetryWrapper>
      </RetryProvider>
    </div>
  );
}

// testPage/@compA/page.tsx
import ClientButton from "@/components/testButton";

interface Post {
  id: string;
  title: number;
}

export default async function CompAPage() {
  await new Promise((res) => {
    setTimeout(() => {
      res(true);
    }, 3000);
  });
  let data = await fetch("https://api.vercel.app/blog", {
    cache: "no-cache",
  });
  let posts: Post[] = await data.json();

  const random = Math.random();
  console.log(random);
  console.log(`page A reload `);
  if (random > 0.5) {
    throw new Error("aaa");
  }

  return (
    <>
      Test A
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <ClientButton></ClientButton>
    </>
  );
}

// testPage/@compB/page.tsx
import ClientButton from "@/components/testButton";

interface Post {
  id: string;
  title: number;
}

export default async function CompBPage() {
  await new Promise((res) => {
    setTimeout(() => {
      res(true);
    }, 3000);
  });
  let data = await fetch("https://api.vercel.app/blog", {
    cache: "no-cache",
  });
  let posts: Post[] = await data.json();

  const random = Math.random();
  console.log(random);
  console.log(`page B reload `);
  if (random > 0.5) {
    throw new Error("aaa");
  }
  return (
    <>
      Test B
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <ClientButton></ClientButton>
    </>
  );
}