How to handle the error when the external api failed due to internet disconnected

Question

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 17-Jan-23 0:53am

Ramesh p

Updated 17-Jan-23 3:22am

Add a Solution

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)
{

}

Ramesh p 17-Jan-23 8:11am

Actually I had use blazor typehead for autocomplete box. blazor typehead have search method. when ever search something at the time request hit to the search method.this search method have external api in try block

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Graeme_Grant · Answer 1 · 2023-01-17T03:22:00

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.

Mohamed Elanssary · Answer 2 · 2023-01-17T02:02:00

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.

How to handle the error when the external api failed due to internet disconnected

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0