Is is possible to add a Dispose() or DisposeAsync() method to the Datasheet component? #135

A-she-ton · 2024-11-26T23:29:21Z

A-she-ton
Nov 26, 2024

Hello again!

I previously mentioned in a separate discussion that I was having some async issues around the disposing of the Datasheet component.

I have the Datasheet displaying on one page, but it's possible to navigate to another page while the initial page is still loading. In the event that navigation occurs, I'm using CancellationTokenSource and IDipose.Dispose() in hopes of doing proper cleanup of resources. However, when debugging, I've noticed that even after I've attempted to dispose of the Datasheet component, the OnAfterRenderAsync() method still continues execution, resulting in several exceptions as various resources have been removed by this point.

Here are some examples where the OnAfterRenderAsync() continues to execute and results in exceptions:

I've seen exceptions surrounding the following:

BlazorDatasheet.Renderer.Headings.ColumnHeadingRenderer.OnAfterRenderAsync() -> BlazorDatasheet.Services.WindowEventService.RegisterMouseEvent()
BlazorDatasheet.Menu.SheetMenuTarget.OnAfterRenderAsync() -> Microsoft.JSInterop.JSRuntime.InvokeAsync()
BlazorDatasheet.Datasheet.OnAfterRenderAsync() -> BlazorDatasheet.Services.SheetPointerInputService.Init()
BlazorDatasheet.Menu.SheetMenu.OnAfterRenderAsync() -> BlazorDatasheet.Services.MenuService.RegisterMenu()

I noticed that the Datasheet component used to implement the Dispose method, but it appears to have been removed/refactored in this commit: 87c51ed#diff-ff4473cd595899241346035c252c1b9bb3a08b543ec315405b6a3a9b3fa25161L831

Would it be possible to add the Dispose method back to the Datasheet to ensure that it properly disposes of all resources/stops executing async tasks that are no longer needed?

I'm not sure if this will help, but here is what I'm currently doing to try to dispose of the Datasheet:

// Unsubscribe from the SelectionChanged event
this._sheet.Selection.SelectionChanged -= this.OnSelectionChanged;

// Unsubscribe from the CellsChanged event
this._sheet.Cells.CellsChanged -= this.OnCellChange;

// Dispose of the DataSheet
// this._datasheet.Dispose();
this._datasheet = null;

If this doesn't make sense, please let me know and I'll attempt to clarify further.

Thank you in advance. :)

anmcgrath · 2024-11-27T03:14:29Z

anmcgrath
Nov 27, 2024
Maintainer

Hi @A-she-ton. I couldn't reproduce any of your errors but I've attempted to fix this in #136. If you update the nuget packages to 0.5.2.0 and try this version I would be interested to see if it fixes it for you.

2 replies

A-she-ton Nov 27, 2024
Author

Hi @anmcgrath, I updated the version and tried to call the new DisposeAsync method, but unfortunately it did not resolve the issue I'm seeing.

What I'm doing to have the exceptions thrown:
Note: The BlazorDatasheet is displayed on Page 1

Be on any page that is not Page 1 (so no Datasheet to render)
Navigate to Page 1
- this page takes some time (~5-10 seconds) to render because I'm loading in some data to display in the Datasheet
While the Datasheet is still loading/rendering, navigate away from Page 1
Wait a few seconds and then observe the exception

I call the new DisposeAsync() like so:

protected override async Task OnInitializedAsync()
{
    // Instantiate CancellationTokenSource to cancel async operations
    this._cancellationTokenSource = new CancellationTokenSource();

    // Subscribe to LocationChanged event to detect when user navigates away from this page & cancel all active async operations
    this.NavigationManager.LocationChanged += this.CancelAsyncOperations;
}

private void CancelAsyncOperations(object? sender, LocationChangedEventArgs args)
{
    // Unsubscribe from the SelectionChanged event
    this._sheet.Selection.SelectionChanged -= this.OnSelectionChanged;

    // Unsubscribe from the CellsChanged event
    this._sheet.Cells.CellsChanged -= this.OnCellChange;

    // Reset the sheet
    this._sheet = new(numRows: Constants.DataSheetSettings.NumOfRows, numCols: Constants.DataSheetSettings.NumOfColumns);

    // Dispose of the DataSheet
    _ = this._datasheet.DisposeAsync(); // Fire-and-forget
    this._datasheet = null;
    
    // Request cancellation of async operations
    this._cancellationTokenSource.Cancel();

    // Dispose of the CancellationTokenSource & remove reference
    this._cancellationTokenSource.Dispose();
    this._cancellationTokenSource = null;
}

Because I'm attempting to dispose of the BlazorDatasheet within the NavigationManager.LocationChanged event handler, I'm not able to await this._datasheet.DisposeAsync() but instead must simply fire it off and then proceed.

Here are some more exceptions that I'm seeing around the BlazorDatasheet control in this instance:

Unhandled exception rendering component: "Cannot access a disposed object.
Object name: 'Microsoft.JSInterop.DotNetObjectReference`1[[BlazorDatasheet.Services.WindowEventService, BlazorDatasheet, Version=0.5.2.1, Culture=neutral, PublicKeyToken=null]]'."
=-=-=-=-=-=-=-=
Exception:
System.ObjectDisposedException: Cannot access a disposed object.
Object name: 'Microsoft.JSInterop.DotNetObjectReference`1[[BlazorDatasheet.Services.WindowEventService, BlazorDatasheet, Version=0.5.2.1, Culture=neutral, PublicKeyToken=null]]'.
   at Microsoft.JSInterop.JSRuntime.TrackObjectReference[TValue](DotNetObjectReference`1 dotNetObjectReference)
   at Microsoft.JSInterop.Infrastructure.DotNetObjectReferenceJsonConverter`1.Write(Utf8JsonWriter writer, DotNetObjectReference`1 value, JsonSerializerOptions options)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.ArrayConverter`2.OnWriteResume(Utf8JsonWriter writer, TElement[] array, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonCollectionConverter`2.OnTryWrite(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.WriteCore(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Metadata.JsonTypeInfo`1.Serialize(Utf8JsonWriter writer, T& rootValue, Object rootValueBoxed)
   at System.Text.Json.JsonSerializer.WriteString[TValue](TValue& value, JsonTypeInfo`1 jsonTypeInfo)
   at System.Text.Json.JsonSerializer.Serialize[TValue](TValue value, JsonSerializerOptions options)
   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 BlazorDatasheet.Services.WindowEventService.CreateDotnetHelperIfNotExists()
   at BlazorDatasheet.Services.WindowEventService.RegisterMouseEvent(String eventType, Func`2 handler, Int32 throttleInMs)
   at BlazorDatasheet.Render.Layers.AutofillLayer.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Unhandled exception rendering component: "Could not find 'createWindowEventsService' ('createWindowEventsService' was undefined).
Error: Could not find 'createWindowEventsService' ('createWindowEventsService' was undefined).
    at https://localhost:5001/_framework/blazor.server.js:1:537
    at Array.forEach (<anonymous>)
    at l.findFunction (https://localhost:5001/_framework/blazor.server.js:1:505)
    at _ (https://localhost:5001/_framework/blazor.server.js:1:5248)
    at https://localhost:5001/_framework/blazor.server.js:1:3041
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:1:3004)
    at Xt._invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:60890)
    at Xt._processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:58279)
    at Xt.connection.onreceive (https://localhost:5001/_framework/blazor.server.js:1:51920)"
=-=-=-=-=-=-=-=
Exception:
Microsoft.JSInterop.JSException: Could not find 'createWindowEventsService' ('createWindowEventsService' was undefined).
Error: Could not find 'createWindowEventsService' ('createWindowEventsService' was undefined).
    at https://localhost:5001/_framework/blazor.server.js:1:537
    at Array.forEach (<anonymous>)
    at l.findFunction (https://localhost:5001/_framework/blazor.server.js:1:505)
    at _ (https://localhost:5001/_framework/blazor.server.js:1:5248)
    at https://localhost:5001/_framework/blazor.server.js:1:3041
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:1:3004)
    at Xt._invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:60890)
    at Xt._processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:58279)
    at Xt.connection.onreceive (https://localhost:5001/_framework/blazor.server.js:1:51920)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at BlazorDatasheet.Services.WindowEventService.CreateDotnetHelperIfNotExists()
   at BlazorDatasheet.Services.WindowEventService.RegisterMouseEvent(String eventType, Func`2 handler, Int32 throttleInMs)
   at BlazorDatasheet.Render.Headings.ColumnHeadingRenderer.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

In addition, after the update and during my first test of the new DisposeAsync() method, I just saw the same behavior/exceptions I've been seeing. However, any further subsequent attempts to even just load the Datasheet (so not navigating away during setup, but just sitting and waiting for the page to fully load) keep throwing this exception now:

Unhandled exception rendering component: "Could not find 'createWindowEventsService' ('createWindowEventsService' was undefined).
Error: Could not find 'createWindowEventsService' ('createWindowEventsService' was undefined).
    at https://localhost:5001/_framework/blazor.server.js:1:537
    at Array.forEach (<anonymous>)
    at l.findFunction (https://localhost:5001/_framework/blazor.server.js:1:505)
    at _ (https://localhost:5001/_framework/blazor.server.js:1:5248)
    at https://localhost:5001/_framework/blazor.server.js:1:3041
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:1:3004)
    at Xt._invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:60890)
    at Xt._processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:58279)
    at Xt.connection.onreceive (https://localhost:5001/_framework/blazor.server.js:1:51920)"
=-=-=-=-=-=-=-=
Exception:
Microsoft.JSInterop.JSException: Could not find 'createWindowEventsService' ('createWindowEventsService' was undefined).
Error: Could not find 'createWindowEventsService' ('createWindowEventsService' was undefined).
    at https://localhost:5001/_framework/blazor.server.js:1:537
    at Array.forEach (<anonymous>)
    at l.findFunction (https://localhost:5001/_framework/blazor.server.js:1:505)
    at _ (https://localhost:5001/_framework/blazor.server.js:1:5248)
    at https://localhost:5001/_framework/blazor.server.js:1:3041
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:1:3004)
    at Xt._invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:60890)
    at Xt._processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:58279)
    at Xt.connection.onreceive (https://localhost:5001/_framework/blazor.server.js:1:51920)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at BlazorDatasheet.Services.WindowEventService.CreateDotnetHelperIfNotExists()
   at BlazorDatasheet.Services.WindowEventService.RegisterMouseEvent(String eventType, Func`2 handler, Int32 throttleInMs)
   at BlazorDatasheet.Render.Headings.ColumnHeadingRenderer.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

A-she-ton Nov 27, 2024
Author

In the meantime, I also tried to circumvent this issue by simply not rendering the Datasheet until after the data had been loaded. (My thought was that if I didn't render the Datasheet, then all of these async setup steps wouldn't be triggered to begin with, and I wouldn't have to worry about the timing of when resources get disposed versus when the setup tries to use those resources.)

So I tried something like this:

Razor page:

@if (this._plants is null || this._plants.Count == 0)
{
    <MudPaper Elevation="0" Outlined="false">
        <h4>Please select one or more Plants to show data.</h4>
    </MudPaper>
}
else
{
    <MudPaper Elevation="0" Outlined="false" Width="100%">
        <Datasheet @ref="this._datasheet" Sheet="this._sheet" 
            OverscanRows="500" OverscanColumns="20" ShowColHeadings="true" ShowRowHeadings="true" StickyHeaders="true"
            MenuOptions="@(new BlazorDatasheet.Menu.SheetMenuOptions{ SortRangeEnabled = false, InsertColsEnabled = false, DeleteColsEnabled = false, InsertRowsEnabled = false, DeleteRowsEnabled = false, MergeEnabled = false, AlignmentEnabled = false, FilterColumnEnabled = false, ContextMenuEnabled = false })"
            CustomCellTypeDefinitions="this._customTypes" Virtualise="true" />
    </MudPaper>
}

When the page is first loaded, no plants are selected, so the Datasheet is not rendered
Select a plant in order to read data, wait for the data to be read, then the UI is re-rendered & the Datasheet is now displayed
Undo plant selection so that no plants are selected; this will re-render the UI and now the Datasheet is not displayed
Select a plant again, re-render the UI after data is fetched, wait a few seconds, and then an exception occurs:

Exception:
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'parentElement')
TypeError: Cannot read properties of null (reading 'parentElement')
    at Virtualiser2d.findScrollableAncestor (https://localhost:5001/_content/BlazorDatasheet/js/virtualise-2d.js:4:30)
    at Virtualiser2d.calculateViewRect (https://localhost:5001/_content/BlazorDatasheet/js/virtualise-2d.js:41:27)
    at https://localhost:5001/_framework/blazor.server.js:1:3047
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:1:3004)
    at Xt._invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:60890)
    at Xt._processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:58279)
    at Xt.connection.onreceive (https://localhost:5001/_framework/blazor.server.js:1:51920)
    at s.onmessage (https://localhost:5001/_framework/blazor.server.js:1:80026)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at BlazorDatasheet.Virtualise.Virtualise2D.CalculateViewRect(ElementReference reference)
   at BlazorDatasheet.Virtualise.Virtualise2D.RefreshView()
   at BlazorDatasheet.Render.Headings.HeadingRenderer.RefreshView()
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0(Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.PostAsync[TState](Task antecedent, Action`1 callback, TState state)

This exception doesn't occur if I don't have the Datasheet component wrapped within an else clause and instead have it always render, like so:

@if (this._plants is null || this._plants.Count == 0)
{
    <MudPaper Elevation="0" Outlined="false">
        <h4>Please select one or more Plants to show data.</h4>
    </MudPaper>
}

<MudPaper Elevation="0" Outlined="false" Width="100%">
    <Datasheet @ref="this._datasheet" Sheet="this._sheet" 
        OverscanRows="500" OverscanColumns="20" ShowColHeadings="true" ShowRowHeadings="true" StickyHeaders="true"
        MenuOptions="@(new BlazorDatasheet.Menu.SheetMenuOptions{ SortRangeEnabled = false, InsertColsEnabled = false, DeleteColsEnabled = false, InsertRowsEnabled = false, DeleteRowsEnabled = false, MergeEnabled = false, AlignmentEnabled = false, FilterColumnEnabled = false, ContextMenuEnabled = false })"
        CustomCellTypeDefinitions="this._customTypes" Virtualise="true" />
</MudPaper>

anmcgrath · 2024-11-27T22:07:20Z

anmcgrath
Nov 27, 2024
Maintainer

Thanks for the detailed response. Can you please try the pre-release version 0.5.2.2-alpha from nuget? I would also suggest clearing your cache or running in incognito and that should get rid of the errors you're having from the WindowEventsService.

13 replies

anmcgrath Dec 4, 2024
Maintainer

What web browser are you using?

A-she-ton Dec 6, 2024
Author

@anmcgrath Sorry for the delay!

I had previously tried uncommenting @*rendermode InteractiveServer*@, but it still threw the NullReferenceException for me, so I left it commented. (Since I thought with how I had the project setup, components should be rendering in Interactive mode by default, but I could be wrong about this expectation.)

I went ahead and uncommented it again, and it still throws the exception for me. Here is a GIF to try to help capture what behavior I'm seeing.

I use Google Chrome for my testing. :)

anmcgrath Dec 7, 2024
Maintainer

Interesting that Visual Studio shows you the exception when it's inside a try-catch block. I think there's a setting in VS that will disable that? I'm using Rider so I've never had this.

Regardless I've tried to stop this from happening and published 0.5.2.3 on nuget with these changes. Please let me know if that fixes.

A-she-ton Dec 16, 2024
Author

@anmcgrath Sorry for my absence! I updated to v0.5.2.3 and the Datasheet is rendering now. :) I will continue to work on this sample so that I can replicate that data loading async-related issue that this post was originally about, and then I'll reach back out with an update. :)

A-she-ton Jan 27, 2025
Author

@anmcgrath Apologies for the delay again!! No matter what I tried, I was unable to get my sample application to reliably reproduce the issues I was experiencing. I was able to reproduce it a few times, but it wasn’t consistent, and therefore I didn’t think it’d be much help to you in attempting to troubleshoot the issues.

I adjusted my requirements some and was able to implement a workaround so that I could still use the BlazorDatasheet component.

Thank you for your help with this!! :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is is possible to add a Dispose() or DisposeAsync() method to the Datasheet component? #135

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 15 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Is is possible to add a Dispose() or DisposeAsync() method to the Datasheet component? #135

A-she-ton Nov 26, 2024

Replies: 2 comments · 15 replies

anmcgrath Nov 27, 2024 Maintainer

A-she-ton Nov 27, 2024 Author

A-she-ton Nov 27, 2024 Author

anmcgrath Nov 27, 2024 Maintainer

anmcgrath Dec 4, 2024 Maintainer

A-she-ton Dec 6, 2024 Author

anmcgrath Dec 7, 2024 Maintainer

A-she-ton Dec 16, 2024 Author

A-she-ton Jan 27, 2025 Author

A-she-ton
Nov 26, 2024

Replies: 2 comments 15 replies

anmcgrath
Nov 27, 2024
Maintainer

A-she-ton Nov 27, 2024
Author

A-she-ton Nov 27, 2024
Author

anmcgrath
Nov 27, 2024
Maintainer

anmcgrath Dec 4, 2024
Maintainer

A-she-ton Dec 6, 2024
Author

anmcgrath Dec 7, 2024
Maintainer

A-she-ton Dec 16, 2024
Author

A-she-ton Jan 27, 2025
Author