How to handle errors in Blazor WebAssembly?

Question

I have been using this ServiceResponse model to communicate data between an Azure Function backend and a Blazor WebAssembly frontend:

public class ServiceResponse<T>
{
    public T? Data { get; set; }
    public bool Success { get; set; } = true;
    public string Message { get; set; } = string.Empty;
}

Inside my Razor components I have been using something like this:

@if(Error)
{
    <span>@ErrorMessage</span>
}
else
{
    // page content
}

@code
{
    private Data Data { get; set; } = new();

    private bool Error = false;
    private string ErrorMessage = string.Empty;

    protected override async Task OnInitializedAsync()
    {
        var response = Service.GetData();
        if(!response.Success)
        {
            Error = true;
            ErrorMessage = response.Message;
        }
        
        Data = response.Data!;
    }
}

I’m looking for guidance on best practices for handling errors and displaying them in the frontend. Specifically, I’d like to know how to structure error handling so that when one component fails to load its data, it can display an error message just for that component without breaking other components on the page. I’d also like to avoid repeating if statements and manual error checks for every backend call if there’s a cleaner approach.

Answer 1 · 2025-11-04 11:51:53Z

Barış Akkurt

• Nov 4 at 11:51

ErrorBoundary is recommended to handle errors in blazor.

Answer 2 · 2025-11-04 14:30:19Z

I am using something similar, at a lower level, with httpClient. I am not quite familiar with what Azure Functions would add or take away in your scenario - e.g., how generic HTTP errors or timeouts are bubbled up. But I presume it would swallow such cases and throw an exception. Hence, a try-catch block around the call looks to be a better approach.

I have a message bus inside the application using System.Reactive, and a component that displays messages. I have message classes that translate to icons and colors. The component part of the main layout. It creates an observer on the message stream. Its goal is to show these notifications to the user. (plain Bootstrap notifications with a time limit). It also defines an injectable interface that allows me to post these notifications from whichever page, component, or service I need.

I made a helper class around the http client call that handles the call in a generic manner, handles all http error cases, and also when the call succeeds, but the result is not a success. Then it posts a proper notification for the user and returns null (could return a monad if you want). On the actual call site I then handle the null result - in most cases by returning instantly. So all the hassle with handling non-success calls is lifted from the actual components.

Of course, if you need to display the result, you need an initial value. But that you need either way. So the if would handle the data/no-data scenarios isntead.

Collectives™ on Stack Overflow

How to handle errors in Blazor WebAssembly?

2 Replies 2

Your Reply

Collectives™ on Stack Overflow

How to handle errors in Blazor WebAssembly?

2 Replies 2

Your Reply

Sign up or log in

Post as a guest