fix: Exception in FluentAnchor

[JamesNK]

🐛 Bug Report

💻 Repro or Code Sample

I left a Blazor page open for a while in the background. When I came back to it there was an error from FluentAnchor:

2024-03-07T17:49:39.8637041 warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: A task was canceled.
      System.Threading.Tasks.TaskCanceledException: A task was canceled.
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at Microsoft.JSInterop.Implementation.JSObjectReference.DisposeAsync()
         at Microsoft.FluentUI.AspNetCore.Components.FluentAnchor.DisposeAsync() in /_/src/Core/Components/Anchor/FluentAnchor.razor.cs:line 151
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.<ProcessDisposalQueueInExistingBatch>g__GetHandledAsynchronousDisposalErrorsTask|79_0(Task result)

🤔 Expected Behavior

No error.

😯 Current Behavior

Error.

💁 Possible Solution

Error comes from here:

fluentui-blazor/src/Core/Components/Anchor/FluentAnchor.razor.cs

Lines 145 to 159 in 4237806

	public async ValueTask DisposeAsync()
	{
	try
	{
	if (_jsModule is not null)
	{
	await _jsModule.DisposeAsync();
	}
	}
	catch (JSDisconnectedException)
	{
	// The JSRuntime side may routinely be gone already if the reason we're disposing is that
	// the client disconnected. This is not an error.
	}
	}

It appears to throw JSDisconnectedException or OperationCanceledException. Catch both?

🔦 Context

🌍 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]

[JamesNK]

I also saw this with a list:

2024-03-07T20:33:43.5306944 warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: A task was canceled.
      System.Threading.Tasks.TaskCanceledException: A task was canceled.
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at Microsoft.JSInterop.Implementation.JSObjectReference.DisposeAsync()
         at Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.DisposeAsync() in /_/src/Core/Components/List/ListComponentBase.razor.cs:line 595
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.<ProcessDisposalQueueInExistingBatch>g__GetHandledAsynchronousDisposalErrorsTask|79_0(Task result)

I suggest you add a utility method for disposing JSObjectReference and have it catch the two errors, then use that where ever you dispose.