fix: Error in JS invoke in OnAfterRenderAsync

[JamesNK]

🐛 Bug Report

It you put controls on a page and then rapidly refresh the browser you'll quickly get errors in logging from JS invoke calls from OnAfterRenderAsync.

I've observed this with FluentDivider and FluentInputLabel. I'm guessing the problem is common to all controls.

💻 Repro or Code Sample

Rapidly refresh browser with FluentDivider or FluentInputLabel on them, configured so that they call JS invoke when rendering.

Rapidly refresh browser.

🤔 Expected Behavior

No error

😯 Current Behavior

Error.

2024-03-11T07:04:04.4305521 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.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.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
         at Microsoft.FluentUI.AspNetCore.Components.FluentDivider.OnAfterRenderAsync(Boolean firstRender) in /_/src/Core/Components/Divider/FluentDivider.razor.cs:line 38
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

💁 Possible Solution

🔦 Context

Catch JSDisconnectedException from InvokeVoidAsync in OnAfterRender.

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[vnbaaij]

Adding a try...catch block in OnAfterRenderAsync never ends up in the catch block. On refresh the dispose functionality gets called and there you do end up in the try...catch block (which is already there).
We swllow the exception there but in VS you still get an error in the output window. I don't believethere is something we can do to prevent that.