How can I handle common errors like 404 in query string parameters?

Platform: Blazor| Category : Error handling, Tips and Tricks

We can handle the 404 error for query string parameters by checking whether the query is available in the parameter. If the parameter is not found, we can handle the error. We can also log an exception in Visual Studio by using the service ILogger in the application.

[Product.razor]
@page "/product-details/{ProductId:int}"
@using Microsoft.Extensions.Logging
@inject ILogger<ProductDetails> Logger

@if (details != null)
{
<h1>@details.ProductId</h1>
 <p>@details.Products</p>
}
else if (loadFailed)
{
    <h1>Product ID:@ProductId not found. Sorry, we could not load this product due to an error. Click <a href="/product-details/1001">here</a> to go back to first product page</h1>
    
}
else
{
  <h1>Loading...</h1>
}

@code {
    [Parameter] public int ProductId { get; set; }

    ProductDetails details;
    bool loadFailed;

    public List<ProductDetails> Data { get; set; }
    static ProductDetails Product_Details = new ProductDetails();

    protected override async Task OnParametersSetAsync()
    {
        try
        {
            loadFailed = false;
            details = await Product_Details.GetProductId(ProductId);
        }
        catch (Exception ex)
        {
            loadFailed = true;
            Logger.LogWarning(ex, "Failed to load product {ProductId}", ProductId);
        }
    }
    public class ProductDetails
    {
        public int ProductId { get; set; }
        public int In_Stock { get; set; }
        public int Sold { get; set; }
        public double Amount { get; set; }
        public string Country { get; set; }
        public string Product_Categories { get; set; }
        public string Products { get; set; }
        public string Order_Source { get; set; }
        public string Year { get; set; }
        public string Quarter { get; set; }

        public async Task<ProductDetails> GetProductId(int id)
        {
            List<ProductDetails> Product_Data = new List<ProductDetails>();
            Product_Data.Add(new ProductDetails { ProductId = 1001, In_Stock = 34, Sold = 51, Amount = 383, Country = "France", Product_Categories = "Accessories", Products = "Bottles and Cages", Order_Source = "Retail Outlets", Year = "FY 2015", Quarter = "Q1" });
            Product_Data.Add(new ProductDetails { ProductId = 1002, In_Stock = 4, Sold = 423, Amount = 3595.5, Country = "France", Product_Categories = "Accessories", Products = "Bottles and Cages", Order_Source = "Sales Person", Year = "FY 2015", Quarter = "Q1" });
            Product_Data.Add(new ProductDetails { ProductId = 1004, In_Stock = 38, Sold = 234, Amount = 1813.5, Country = "France", Product_Categories = "Accessories", Products = "Bottles and Cages", Order_Source = "Teleshopping", Year = "FY 2015", Quarter = "Q1" });
            Product_Data.Add(new ProductDetails { ProductId = 1005, In_Stock = 42, Sold = 127, Amount = 952.5, Country = "France", Product_Categories = "Accessories", Products = "Bottles and Cages", Order_Source = "App Store", Year = "FY 2015", Quarter = "Q1" });
            Product_Data.Add(new ProductDetails { ProductId = 1005, In_Stock = 36, Sold = 89, Amount = 668, Country = "France", Product_Categories = "Accessories", Products = "Bottles and Cages", Order_Source = "Retail Outlets", Year = "FY 2015", Quarter = "Q2" });
            if (id == Product_Data[0].ProductId)
            {

                return Product_Data[0];
            }
            else if (id == Product_Data[1].ProductId)
            {

                return Product_Data[1];
            }
            else if (id == Product_Data[2].ProductId)
            {

                return Product_Data[2];
            }
            else if (id == Product_Data[3].ProductId)
            {

                return Product_Data[3];
            }
            else if (id == Product_Data[4].ProductId)
            {

                return Product_Data[4];
            }
            else if(id == Product_Data[5].ProductId)
            {
                return Product_Data[5];
            }

            return null;
        }
    }
}

You can download the reference sample here

Share with