Error boundaries on the server
Answered
Tomistoma posted this in #help-forum
TomistomaOP
Can I/how do I use error boundaries in server components in Next 15? Im still trying to get to grips with this new pattern for data fetching, and every time I think I have it understood I run into little edge cases.
What I aim to do everywhere is fetch data in a server component, pass a promise down to the child (be it server or client), and have the child call
If I start wrapping the fetch code in a try/catch, that seems to me like it's defeating the purpose of an error boundary, so what exactly should I do? I really don't like try/catch that much, I think it makes the code very ugly, and so a component that implicitly will catch all errors and show a fallback is a really nice QOL feature and it sucks that it (possibly) doesn't exist on the server.
What I aim to do everywhere is fetch data in a server component, pass a promise down to the child (be it server or client), and have the child call
use
on the promise. I can then wrap it in a suspense in the server and get nice async rendering. However, by fetching on the server, I can no long wrap the component in an ErrorBoundary
, which was really nice when fetching on the client, as I can throw all my errors and be certain both them, and even unknown errors will be caught.If I start wrapping the fetch code in a try/catch, that seems to me like it's defeating the purpose of an error boundary, so what exactly should I do? I really don't like try/catch that much, I think it makes the code very ugly, and so a component that implicitly will catch all errors and show a fallback is a really nice QOL feature and it sucks that it (possibly) doesn't exist on the server.
Answered by Tomistoma
Ignore this now, I got myself confused. I went to wrap it in a try/catch but realised it wouldn't do anything since I'm not
If I were to
await
ing the promise, which I when I realised the error is being thrown from use
so I can still use an ErrorBoundary
in this scenario.If I were to
await
a fetch in a server component then I would need try/catch, which makes a lot more sense1 Reply
TomistomaOP
Ignore this now, I got myself confused. I went to wrap it in a try/catch but realised it wouldn't do anything since I'm not
If I were to
await
ing the promise, which I when I realised the error is being thrown from use
so I can still use an ErrorBoundary
in this scenario.If I were to
await
a fetch in a server component then I would need try/catch, which makes a lot more senseAnswer