Handling exceptions

As part of the template, when an unhandled exception occurs in a Blazor WebAssembly app, a yellow bar is displayed at the bottom of the screen:

Figure 3.8: Sample unhandled exception

You can modify the text and style of the error message that is displayed by modifying the index.html file. The UI for the yellow bar is defined in the wwwroot/index.html file:

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">X</a>
</div>

TIP

You can modify the style of the error message that is displayed in the wwwroot/css/app.css file.

In the preceding screenshot, clicking the Throw Exception button throws an unhandled exception. This is the code for the ThrowException component that we used to create the Throw Exception button in the preceding screenshot:

<button class="btn...