There are multiple versions of this document. Pick the options that suit you best.

UI

Blazor UI: Error Handling

Blazor, by default, shows a yellow line at the bottom of the page if any unhandled exception occurs. However, this is not useful in a real application.

ABP provides an automatic error handling system for the Blazor UI.

  • Handles all unhandled exceptions and shows nice and useful messages to the user.
  • It distinguishes different kind of exceptions. Hides internal/technical error details from the user (shows a generic error message in these cases).
  • It is well integrated to the server side exception handling system.

Basic Usage

There are different type of Exception classes handled differently by the ABP Framework.

UserFriendlyException

UserFriendlyException is a special type of exception. You can directly show a error message dialog to the user by throwing such an exception.

For Blazor Server, exceptions must be handled manually. Otherwise it crashes the whole application. Auto Exception Handling is not possible with Blazor Server right now, please follow this issue to see progress. In meantime, you can use try-catch blocks and call the HandleErrorAsync method of ABP to handle errors manually, which shows an error dialog for you.

Example

@page "/"
@using Volo.Abp

<Button Clicked="TestException">Throw test exception</Button>

@code
{
    private async Task TestException()
    {
        try 
        {
            throw new UserFriendlyException("A user friendly error message!");
        }
        catch(UserFriendlyException ex) 
        {
            await HandleErrorAsync(ex);
        }
    }
}

ABP automatically handle the exception and show an error message to the user:

blazor-user-friendly-exception

You can derive from UserFriendlyException or directly implement IUserFriendlyException interface to create your own Exception class if you need.

You can use the localization system to show localized error messages.

BusinessException and Other Exception Types

See the exception handling document to understand different kind of Exception class and interfaces and other capabilities of the Exception Handling system.

Generic Errors

If the thrown Exception is not a special type, it is considered as generic error and a generic error message is shown to the user:

blazor-generic-exception-message

All error details (including stack trace) are still written in the browser's console.

Server Side Errors

Errors (like Validation, Authorization and User Friendly Errors) sent by the server are processed as you expect and properly shown to the user. So, error handling system works end to end without need to manually handle exceptions or manually transfer server-to-client error messages.

See Also

Contributors


Last updated: June 02, 2022 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

Building Modular Monolith Applications Using .NET and ABP Framework

17 Oct, 17:00
Online
Watch the Event
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More