Click here to Skip to main content
15,936,975 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Actually I had develop the blazor webassembly application

In this application when the externalapi failed due to internet disconnected

at the time on blazor application UI shows the error like "One or more error

occured". whenever I had checked the error using inspect on browser

that is called "Failed load resource: :net:ERR_INTERNET_DISCONNECTED"

catch block not helpful for caught the exception or error because when

execution point came to the external api line at the time I got the error on

browser due to internet disconnected

I want to handle this error and need to show the custom message if internet

disconnected

please help me.
Thanks

What I have tried:

catch block not helpful for caught the exception or error because when 

execution point came to the external api line at the time I got the error on

browser due to internet disconnected

I want to handle this error and need to show the custom message if internet

 disconnected
Posted
Updated 17-Jan-23 3:22am
Comments
OriginalGriff 17-Jan-23 7:15am    
And?
What have you tried?
(Apart from posting this before?)
What happened when you did?
Ramesh p 17-Jan-23 7:43am    
when the external api called directly error shown on browser due to internet disconnected
Dave Kreskowiak 17-Jan-23 7:59am    
Just repeating what you already wrote in the question does not help.

What you have written already is not sufficient to answer the question. Where in the code (server-side or client-side javascript) is this call to the API? Where is this try/catch block? What does this code look like?
Ramesh p 17-Jan-23 8:06am    
I didn't use client side script I had implement in razor.cs class like it is "@code{
}" for razor file
Ramesh p 17-Jan-23 8:09am    
try
{
// in this external api called
}
catch(HttpRequestException ex)
{

}

Expanding on @Mohamed_Elanssary[^] solution, the only time that you would need to check the online status is when the HttpRequestException is thrown. Then you can differentiate between a failed HTTP request and being offline.

1. add the following to your index.html:
JavaScript
<script>window.checkNetworkStatus = () => { return navigator.onLine;  }</script>

2. Test code:
XML
@page "/"

@inject HttpClient http
@inject IJSRuntime js

<h1>Hello, world!</h1>

@if (!string.IsNullOrWhiteSpace(error))
{
    <p> Status: Error</p>
   <p>Error: @error</p>
}
else
{
    <p> Status: @status</p>

}

<button @onclick="OnClickAsync">Test</button>

@code {

    string status = "idle";
    string error = "";

    protected async Task OnClickAsync()
    {
        error = "";
        status = "busy";
        try
        {
            var xxx = await http.GetAsync(new Uri("https://htxxxtpbin.org/get"));
            status = "success";
        }
        catch (HttpRequestException ex)
        {
            Console.WriteLine($"HttpRequestException: {ex}");
            bool isOnline = await js.InvokeAsync<bool>("checkNetworkStatus");
            status = isOnline? "online" : "offline";

            if (isOnline)
                error = ex.Message;
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Exception: {ex}");
            error = ex.Message;
        }
    }
}

Now run the code, open your web browser dev tools > Network tab, and change the state to "offline". Now click the button.
 
Share this answer
 
To handle this error in a Blazor WebAssembly application, you can use the JavaScript Interop feature to check the network status before making the API call. You can use the navigator.onLine property to check if the browser is online or offline. If it is offline, you can show a custom message to the user and prevent the API call from being made.

Here is an example of how you can use JavaScript Interop to check the network status and handle the error:

In your Razor component, add a reference to the JavaScript function that will check the network status:

<script src="path/to/check-network-status.js"></script>


In the JavaScript file, define the function that will check the network status:

window.checkNetworkStatus = async () => {
if (!navigator.onLine) { 
alert("You are offline. Please check your internet connection."); 
return false; 
} 
return true; 
}


In your Razor component, call the JavaScript function before making the API call:

@code { private async Task GetData() { 
bool isOnline = await JSRuntime.Current.InvokeAsync<bool>("checkNetworkStatus"); 
if (isOnline) { 
// Make API call 
} 
} 
}


This way, you check the network status before making the API call, and if the user is offline, you can show a custom message and prevent the API call from being made.

Note: This is a basic example, you can customize it to your needs.
 
Share this answer
 
v2
Comments
Ramesh p 17-Jan-23 8:17am    
I don't want to check the internet availability before making api cal. just I want to handle api failed due to internet disconnected then show custom error message because unnecessary resource execution does not require for checking internet availability
Graeme_Grant 17-Jan-23 8:50am    
Check it when you fail to fetch then. This will differentiate between a bad URI and offline. Blazor HttpClient under the hood is using JavaScript fetch api.
Andre Oosthuizen 17-Jan-23 8:51am    
I don't see any fault in this solution. @Ramesh, you say you do not want to check if online is available but you still want to throw an error message. Very confusing. If you use the above, you do the check, if internet is not available you show the relevant message, if it is available, do the call to your API.
Graeme_Grant 17-Jan-23 8:53am    
What he wants and what is possible are not the same thing. He needs to fail then check and report why the call failed.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900