this is the error.tsx

this is page.tsx

That's because Next.js will pre-render the page during the build, it is going to be weird if the pre-render fails right?
It doesn't make sense to render an error page when users first open your page.

Therefore, you have to opt the page into [dynamic rendering](https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering). This will make your page only rendered at request time, losing the ability to pre-render and statically generate your page.

With segment configuration:

export const dynamic = "force-dynamic";
export default function Page() { ... }

error.tsx only handles runtime errors that didn't appear in the build, so it is an expected behaviour.
Normally, you shouldn't throw any errors when pre-rendering a page.

thanks for the help.

now, i want to ask slightly unrelated question: is there a way to handle multiple or more error of async function in the same page with one error.tsx? So I want to fetch blog list and recent post sidebar widget (two separate async function). If blog list fail, it should be handled by error.tsx, but still continue showing recent post that successfully fetched, so that I can show more helpful error message for each async function. However, both async functions are stopped once I throw new Error for any async function, which how I normally would utilize error.tsx.

Is there a better way of doing this? Do I have no choice than handling error in page.tsx itself by using traditional conditional render with React? (eg. return <div>error</div> if fetching fails, directly inside page.tsx)

Yes, as I know, the ErrorBoundary component isn't available and documented. So you have to wrap your code into a try catch loop and handle the error