Blazor WASM Exception Handling and Error Boundary

Blazor WASM Exception Handling and Error Boundary

blazor

20 Articles

Improve

Exceptions are common in all apps. We can handle known exceptions which we expect using try catch blocks. But this cannot be the case always. Some times we might end up in unforeseen run time unhandled exceptions. There are different ways to handle exceptions. Luckily with blazor we have exception handling built in in two different ways.

Code Sample - Chat component to simulate exception

  1. Global Exception Handling
  2. Error Boundary
  3. Alternative Global Exception Handling

Global Exception Handling

Blazor has global error handling element <div id="blazor-error-ui"> in index.html. This will act as an global error handler which will catch any unhanled exception across blazor app and display nice error UI codesent inside <div id="blazor-error-ui"> at the bottom of the screen by default and logs the error stack trace to browser console. This will also have reload option to reload the app to restore the app to correct working state.

Code Sample - Blazor Global Exception Handling

Demo - Global Exception Handling

Scenario - Let's simulate an error connecting to chat agent

Error Boundary

Though <div id="blazor-error-ui"> handles all unhandled exceptions it will be nice to restrict the error handling boundary and have better control of the error message and error UI. That said .Net 6 introduced <ErrorBoundary> to serve this purpose. We can wrap any component inside <ErrorBoundary> and this will take care of showing error UI when an unhandled exception occurs inside the component.

Code Sample - Blazor Error Boundary

Demo - Error Boundary

Scenario - Let's simulate an error connecting to chat agent

We can control the error message with our own custom error message and error UI using <ErrorContent>. From now incase of any unhandled exception, our custom error UI will be displayed.

Code Sample - Blazor Error Boundary with custom Error UI

Demo - Error Boundary with Custom Error UI

Scenario - Let's simulate an error connecting to chat agent

So far so good. But doesn't this leave a bad user experience? How will the user retry the action? One way is to reload the page. But there is an another easy option called Recovery in Error Boundary. All we need to do is to add a reference to Error Boundary and call errorBoundary?.Recover() method to retry the action.

Code Sample - Blazor Error Boundary with custom Error UI and Recovery

Demo - Error Boundary with Custom Error UI and Recovery

Scenario - Let's simulate an error connecting to chat agent

Alternative Global Exception Handling

An alternative to using Error boundaries (ErrorBoundary) is to pass a custom Error component as a CascadingValueto child components. An advantage of using a component over using an injected service or a custom logger implementation is that a cascaded component can render content and apply CSS styles when an error occurs.

Code Sample - Error component

Now in the App component, wrap the Router component with the Error component. This permits the Error component to cascade down to any component of the app where the Error component is received as a CascadingParameter. We can then call error processing method ProcessError from Error component to handle error. To learn more about this, head over to Blazor Wasm Error Logging

Code Sample - Alternative Global Exception Handling

  • Blazor
  • Exception Handling
  • Error Boundary