AsyncBoundaryProvider
With the AsyncBoundary
component,
you can use the AsyncBoundaryProvider
to perform an error reset, even if the part that performs the error reset is separated from the part that actually uses the Suspense + ErrorBoundary.
AsyncBoundaryProvider
to perform the error reset, even if the part that performs the error reset is separated from the part that uses the actual Suspense + ErrorBoundary.
Examples
<AsyncBoundaryProvider>
<DataController /* <-- Where to reset an error */ />
<Spacing size={40} />
<AsyncBoundary /* <-- What should be enclosed by the suspense + error boundary */
pendingFallback={<TableSkeleton title="Details" row={10} />}
errorFallback={({ error, reset }) => (
<ErrorAlert theme="yellow" error={error} message="Please try again." onResetError={reset} />
)}
>
<DataViewer />
</AsyncBoundary>
</AsyncBoundaryProvider>
References
https://jbee.io/react/error-declarative-handling-1/ 선언적으로 로딩과 에러 상태 처리하기 https://toss.im/slash-21/sessions/3-1 Suspense와 에러 처리 관련된 Slash 21 발표