Is there an ErrorBoundary for RSC, similar to how Suspense is for data loading?
Answered
Rough harvester ant posted this in #help-forum
Rough harvester antOP
Basically I’m trying to accomplish this composition pattern:
// MyRsc.tsx
const MyRsc = async () => {
const res = await getData()
if (res.ok) {
const json = await res.json()
return (
<div>{...do_something_with_json}</div>
)
}
throw new Error(res.status)
}// page.tsx
const MyPage = async () => (
<main>
<HeroSection />
{/* I wish for the error to be in this boundary, instead of error.tsx */}
<ErrorBoundary fallback={<div>Error</div>}>
<Suspense fallback={<div>Loading</div>}>
<MyRsc />
</Suspense>
</ErrorBoundary>
<Some />
<Other />
<Sections />
</main>
)Answered by joulev
Yes, by using any normal React error boundary. For example https://github.com/bvaughn/react-error-boundary
3 Replies
@Rough harvester ant Basically I’m trying to accomplish this composition pattern:
tsx
// MyRsc.tsx
const MyRsc = async () => {
const res = await getData()
if (res.ok) {
const json = await res.json()
return (
<div>{...do_something_with_json}</div>
)
}
throw new Error(res.status)
}
tsx
// page.tsx
const MyPage = async () => (
<main>
<HeroSection />
{/* I wish for the error to be in this boundary, instead of error.tsx */}
<ErrorBoundary fallback={<div>Error</div>}>
<Suspense fallback={<div>Loading</div>}>
<MyRsc />
</Suspense>
</ErrorBoundary>
<Some />
<Other />
<Sections />
</main>
)
Yes, by using any normal React error boundary. For example https://github.com/bvaughn/react-error-boundary
Answer
error.tsx is just an implicit error boundary
Rough harvester antOP
hmm apparently using
react-error-boundary works for RSC. I was using the one from React docs (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary), this one only works for client errors. I’ll check the difference between the implementations. Thanks.