Catching Rendering Errors with Error Boundaries

Choose the North region on the Acme Admin dashboard, and the whole application disappears. The header, the region menu and the visits widget are gone, although only the revenue widget has a bug. The reason is a rule of React: when a component throws an error during rendering and nothing catches it, React removes the entire UI of that root. The rest of this lesson uses the same dashboard to show how an error boundary confines such an error to one part of the screen.

One error removes the whole tree

The North report arrived without its total field, and RevenueWidget reads `report.total