fix: Uncaught JSException in FluentSortableList when navigating away #4285
Description
🐛 Bug Report
In the FluentSortableList.OnAfterRenderAsync implementation, the invocation of the JS codebehind's init method which instantiates the Sortable is wrapped in a try/catch suppressing JSDisconnectedException or OperationCancelledException. The method's comments indicate:
This exception is expected when the user navigates away from the page
and the component is disposed. We can ignore it.
However, I see this exception thrown as a JSException which will go uncaught if not wrapped in an ErrorBoundary.
Logged as Microsoft.JSInterop.JSException: Sortable: el must be an HTMLElement, not [object Null].
💻 Repro or Code Sample
I can reproduce on the Fluent Blazor demo site by loading the sortable list and rapidly navigating to/from another component in the nav menu.
However, I think the site is wrapping these in an error boundary. The error can be seen in console
🤔 Expected Behavior
Microsoft.JSInterop.JSException would also be caught suppressed when it can be validated it is this specific error which can occur when navigating away.
😯 Current Behavior
Exception will be thrown.
💁 Possible Solution
If we could also catch the JS Exception but re-throw if it's not this specific issue, that might work. However, it seems a little flimsy to validate this based on the error message alone.
But our other option right now is to always remember to wrap the list in a custom error boundary that accounts for this scenario, which can be difficult to manage going forward (would always need to remember to wrap a FluentSortableList, or use a custom component that does the wrapping).
Any recommended ways to handle the scenario best would be appreciated. Thanks in advance.
🔦 Context
Using FluentSortableList in an SWA.
🌍 Your Environment
- OS & Device: MacOS, Windows
- Browser Microsoft Edge, Google Chrome
- .NET 9, and Fluent UI Blazor 4.12.1