Summary

Hello, I try to understand how to properly handle build time error in App route, I'm struggling with this problem for a while now so I'd like to get some help.
In development, when I make a request to the server in a server component and if the request fails, I throw an error, then the error boundary fallback replaces the component where the error was thrown.

But if such errors are thrown at the build time, the build fails saying "Error occurred prerendering page" the component that throws an error is not replaced by the error boundary fallback or suspense fallback. ( I also have loading.tsx and error.tsx files in the same directory but nothing works during the build time )

When you make a request to an api that requires an access token during the build time, the request will fail and an error will be thrown which leads to build fails.

Is there anyway to replace the component that throws an error with errro boundary or suspense boundary during build time? Or how do you fetch a data when you have to make a request to the api that requires an access token? becuase that will always lead to build fails

I'd like to know if I'm mssing something here or If I'm not supposed to fetch data in this way in app route.

Any help would be appreciated, thank you!
( I'm testing with next v14.2.5 )

Code Example

import TestFetch from "@/app/test/_sections/TestFetch";
import { ErrorBoundary } from "react-error-boundary";
import React, { Suspense } from "react";

const TestPage = () => {
  return (
    <div>
      <ErrorBoundary fallback={<div>Error Occured</div>}>
        <Suspense fallback={<div>Loading...</div>}>
          <TestFetch /> // a server component fetching data and throws an error
        </Suspense>
      </ErrorBoundary>
    </div>
  );
};

export default TestPage;

a server component that fetches data and throw an error for test

const testFetchFn = async () => {
  const result = await fetch("...");
  throw new Error("test error");
};

const TestFetch = async () => {
  const data = await testFetchFn ();
  return (
    <div>
      <h3>Test</h3>
      <div>{JSON.stringify(data)}</div>
    </div>
  );
};

export default TestFetch;

Additional information

No response

Example

No response