React Material-UI Cookbook

There's more...

The error boundary used in this example covered the entire application. This is good in the sense that you can blanket the entire application with error handling in one shot. But this is also bad, because the entire user interface vanishes, as the error boundary has no idea which component failed.

Because error boundaries are components, you can place as many of them as you like at any level of your component tree. This way, you can show Material-UI error snackbars while keeping the parts of the UI that haven't failed visible on the screen.

Let's change the scope of the error boundary used in the example. First, you can change the MyButton implementation so that it only throws an error when a Boolean property is true:

const ...