How to simulate the Vercel timeout error in development mode?
Unanswered
Tibetan Terrier posted this in #help-forum
Tibetan TerrierOP
I'd like to simulate the "Task timed out after 10.01 seconds" error in development mode in order to handle it in the client. (I'm aware the timeout can be increased). How can I trigger it locally? Also, any suggestions on how to handle it when it's caused by a child component so that it doesn't crash the parent that's already rendered? Error Boundary doesn't catch it.
4 Replies
I am not sure you can "catch" the error, cause it's the error thrown by Vercel cause of the timeout in your "serverless functions", it's not caused by Next.js. I don't think you can simulate it in development.
Tibetan TerrierOP
yeah, I've seen this and as I said I'm aware I can increase the timeout. For context, this is the component structure in my page.tsx
The Child component is a server component loading its own data (which can take more than 10 s). The Parent gets fully loaded and rendered and then after 10 seconds the whole page crashes and the page-level error.tsx gets rendered. I'm wondering if this can be somehow prevented, so that the Parent stays in place and the Child component just fails gracefully if the data does not get loaded before the timeout.
<Suspense fallback={null}>
<Parent data={data}>
<Suspense fallback={null}>
<ErrorBoundary fallback={<div>Error loading child.</div>}>
<Child params={params} />
</ErrorBoundary>
</Suspense>
</Parent>
</Suspense>The Child component is a server component loading its own data (which can take more than 10 s). The Parent gets fully loaded and rendered and then after 10 seconds the whole page crashes and the page-level error.tsx gets rendered. I'm wondering if this can be somehow prevented, so that the Parent stays in place and the Child component just fails gracefully if the data does not get loaded before the timeout.
Tibetan TerrierOP
OK, I found the solution. To make it work correctly, Suspense and ErrorBoundary components need to be reordered in the tree, like so:
<Parent data={data}>
<ErrorBoundary fallback={<div>Error loading child.</div>}>
<Suspense fallback={null}>
<Child params={params} />
</Suspense>
</ErrorBoundary>
</Parent>