JSRuntime freeze on long calls

[vd3d]

Describe the bug

In a blazor application, I upload an image from a HTML page, then navigate to the next page a wich to send the image to this razor page.

The problem is that the application freeze (sometimes it work, let say 10% of the cases)

To Reproduce

In a Blazor page, I have 2 pages:

• uploadimage.html
• saveimage.razor

In the "uploadimage" I load an image and save it into the local storage with javascript, ie:

    // Save the image
    localStorage.setItem('editor.imageData', imageData);
    // Navigate to the next page
    window.location.assign('/saveimage');

In the razor page, I have the following code:

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
            if (firstRender)
                _imageData = await _jsRuntime.InvokeAsync<string>("localStorage.getItem", "editor.imageData");
    }

But the browser freeze with "attempting to reconnect to the server..."

Further technical details

• ASP.NET Core 3.1
• Visual Studio Pro

[javiercn]

@vd3d thanks for contacting us.

Are you sending the entire image at once or are you breaking it into chunks?

[mkArtakMSFT]

@vd3d do you see an error in your server logs? We think there should be exception there and that's causing the disconnect.

[mkArtakMSFT]

Also, can you please share the logs from the dev console?

[paulallington]

@mkArtakMSFT Ah ha. This is the issue I'm experiencing. I use the library "BlazorInputFile". Since blazor 3.2 I've been experiencing browser hanging (completely freezes and browser thinks it's actually crashed).

I created a sample repo to demonstrate: https://github.com/paulallington/BlazorInputFileIssue. I've dug through the code, and it seems to be the same problem as this issue (21375)

[javiercn]

This is likely a TaskCancelledException being thrown by the library that is not caught. I'm closing this issue in favor of #21384