blazorbootstrap Toast throw console error when closing/reloading the page

Hello. This issue is very similar to issue #390.

To Reproduce

The problem occurs when the toast progress bar is displayed and the page is refreshed by pressing F5.

Thrown exception message is

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
      Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
         at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at BlazorBootstrap.SimpleToast.DisposeAsync(Boolean disposing)
         at BlazorBootstrap.BlazorBootstrapComponentBase.DisposeAsync()
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass85_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()
warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
      Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
         at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at BlazorBootstrap.SimpleToast.DisposeAsync(Boolean disposing)
         at BlazorBootstrap.BlazorBootstrapComponentBase.DisposeAsync()
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass85_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()
warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
      Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
         at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at BlazorBootstrap.SimpleToast.DisposeAsync(Boolean disposing)
         at BlazorBootstrap.BlazorBootstrapComponentBase.DisposeAsync()
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass85_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()
warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
      Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
         at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at BlazorBootstrap.SimpleToast.DisposeAsync(Boolean disposing)
         at BlazorBootstrap.BlazorBootstrapComponentBase.DisposeAsync()
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass85_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'aFtxQM1b0ieC6VgSyYs9DPyorwy0ZEH7hw-ETzPz4cU'.
      System.AggregateException: Exceptions were encountered while disposing components. (JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.) (JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.) (JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.) (JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.)
       ---> Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
         at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at BlazorBootstrap.SimpleToast.DisposeAsync(Boolean disposing)
         at BlazorBootstrap.BlazorBootstrapComponentBase.DisposeAsync()
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass85_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()
         --- End of inner exception stack trace ---
       ---> (Inner Exception #1) Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
         at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at BlazorBootstrap.SimpleToast.DisposeAsync(Boolean disposing)
         at BlazorBootstrap.BlazorBootstrapComponentBase.DisposeAsync()
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass85_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()<---

       ---> (Inner Exception #2) Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
         at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at BlazorBootstrap.SimpleToast.DisposeAsync(Boolean disposing)
         at BlazorBootstrap.BlazorBootstrapComponentBase.DisposeAsync()
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass85_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()<---

       ---> (Inner Exception #3) Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
         at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at BlazorBootstrap.SimpleToast.DisposeAsync(Boolean disposing)
         at BlazorBootstrap.BlazorBootstrapComponentBase.DisposeAsync()
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass85_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()<---`

I figured out this problem is due to call JS function when page rerender requested, toast disposing but JS is null that time. so i complemented code like this

protected override async ValueTask DisposeAsyncCore(bool disposing)
    {
        if (disposing)
        {
            try
            {
                if (JSRuntime is not null)
                {
                    await JSRuntime.InvokeVoidAsync("window.blazorBootstrap.toasts.dispose", Id);
                }

            }
            catch (JSDisconnectedException)
            {

            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error during DisposeAsync: {ex.Message}");
            }
            finally
            {
                if (objRef != null)
                {
                    objRef.Dispose();
                }
            }
        }
        await base.DisposeAsyncCore(disposing);
    }

this code doesn't throw exception but i'm worry about memory leak and others that i don't know i'm noob in blazor, please check this issue. And Big Thanks for make and manage usefull library.

Version

.NET Version: .NET 8
BlazorBootstrap: 3.0.0
Blazor WebAssembly / Server: Server
Browser chrome, edge

Sep 06 '24 07:09 Kskimcle

@Kskimcle Thank you for using BlazorBootstrap. I'll investigate.

Sep 06 '24 15:09 gvreddy04

Same issue here but just when attempting to create a toast after clicking a button to perform an action. Error prints out to Visual Studio's Output tab. I don't know if it's helpful, but I'm using @rendermode InteractiveServer

.NET 8 BlazorBootstrap 3.0.0 Blazor Server

Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
   at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at BlazorBootstrap.SimpleToast.DisposeAsyncCore(Boolean disposing)
   at BlazorBootstrap.BlazorBootstrapComponentBase.DisposeAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass85_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()

Sep 06 '24 17:09 ahwm

Hello, I got the same issue on very simple example

It is happening on my local machine It is happening when the SimpleToast is Shown and you force reload the page with F5 It is happening only if the SimpleToast is Shown and not dissmissed It is NOT happening on the advanced toast with the title header, icon It is happening in Microsoft Edge browser Version 128.0.2739.79 (Official build) (64-bit) It is NOT happening in Google Chrome Version 128.0.6613.138 (Official Build) (64-bit)

Nothing helps to prevent that, I tried everything. Thanks for the investigating hope this helps :)

Sep 16 '24 19:09 krtek2k

Any fixes?

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
      Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
         at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at BlazorBootstrap.SimpleToast.DisposeAsyncCore(Boolean disposing)
         at BlazorBootstrap.BlazorBootstrapComponentBase.DisposeAsync()
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass85_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]

Jan 03 '25 13:01 kacperpikacz

Still happening on 3.3.1. Experimented with different render modes, but no luck.

Mar 29 '25 03:03 ahwm