Error Boundaries and Loading Seams

What an error boundary is. A component that catches a rendering error in its subtree and shows a fallback instead of letting the whole application go blank.

Without one, an error thrown during render unmounts the entire tree. The screen goes white. That is React's deliberate choice: it would rather show nothing than something wrong.

What it does not catch. Errors in event handlers, in asynchronous code, and during server rendering. A failed fetch is not caught by a boundary, which is why you handle it yourself with the error state from module 7.

Put one around the whole application, and another around any part that can fail independently and should not take the rest down with it.

✦ Where the seams go

The same instinct applies to loading. Wherever the application can show something useful while another part is still arriving, that is a seam. Aim for a page that fills in progressively rather than one that is entirely blank until everything is ready.