Intermittent Exceptions

[Mike-E-angelo]

Greetings,

This component is working really well for me, thank you again for taking the time to develop it. I do appear to be getting some intermittent exceptions, however, and was hoping to track them down.

To start, there's this one that I was getting earlier today, which I have not seen until then: Added new issue: https://github.com/EdCharbeneau/BlazorSize/issues/91

Microsoft.JSInterop.JSException: Importing a module script failed.
undefined
   at async ValueTask<TValue> Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long targetInstanceId, string identifier, object[] args)
   at async Task BlazorPro.BlazorSize.MediaQueryService.CreateMediaQueryList(DotNetObjectReference<MediaQueryList> dotNetObjectReference)
   at async Task BlazorPro.BlazorSize.MediaQueryList.OnAfterRenderAsync(bool firstRender)
   at async Task Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Additionally, I have also seen this one as well: Added new issue: https://github.com/EdCharbeneau/BlazorSize/issues/90

Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
   at void Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(long asyncHandle, string identifier, string argsJson, JSCallResultType resultType, long targetInstanceId)
   at ValueTask<TValue> Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long targetInstanceId, string identifier, CancellationToken cancellationToken, object[] args)
   at async ValueTask<TValue> Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long targetInstanceId, string identifier, object[] args)
   at async ValueTask Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, string identifier, params object[] args)
   at async Task BlazorPro.BlazorSize.MediaQueryService.RemoveQuery(MediaQuery mediaQuery)
   at async Task BlazorPro.BlazorSize.MediaQueryList.RemoveQuery(MediaQuery mediaQuery)
   at async ValueTask BlazorPro.BlazorSize.MediaQuery.DisposeAsync()
   at async void Microsoft.AspNetCore.Components.RenderTree.Renderer.Dispose(bool disposing)+HandleAsyncExceptions(?)

No worries if they cannot be addressed. I wanted to report them and see if there is a best practice I am overlooking and/or if this is something that can indeed be addressed on your side.

Thank you for any consideration/assistance you can provide.

[EdCharbeneau]

Thanks for reporting this. I can check and see if there's something that can be done with JS runtime to prevent issues with (Blazor Server).

Is this happening at a specific time in the components lifecycle?

[Mike-E-angelo]

Thank you very much @EdCharbeneau. 🙏 As for lifecycle, the first one appears to occur in the OnAfterRenderAsync event and the second occurs on the component dispose. Unfortunately, that is all I can report at the moment. If you are looking for further detail I can keep an eye out for it (and/or append telemetry) and see if I can get it for you.

[joepvtl]

Hi,

We are also having the same exception as the first one. It some times occuress during the first render of the application. Probably because the JS BlazorSize module has not been loaded yet, but the blazor interop is already running?

System.Exception: Unhandled exception rendering component: Importing a module script failed.
undefined
at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.IJSObjectReference, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
at BlazorPro.BlazorSize.ResizeListener.Start()
at BlazorPro.BlazorSize.ResizeListener.<Subscribe>b__9_0()

[EdCharbeneau]

Are you seeing this on Blazor Server or WASM,?

[joepvtl]

Hi, we are experiencing this on WASM.

[Mike-E-angelo]

For the DisposeAsync, that one looks like it's consistently occurring when I close the browser tab containing a page with the component loaded.

[Mike-E-angelo]

FWIW I am also seeing the Importing a module script failed. in other parts of my application but again intermittent. It's as if the script/file/resource fails to load.

I think the reason why it occurs in BlazorSize more than others is that it is the first import to load on my page (one of the first components)

I saw #71 and see there's a reference to UseStaticWebAssets and am wondering if that may be a possible factor/mitigation? From what I understand, however, that only works for applications not using dotnet publish (which as I understand it, occurs when I publish as an AppService -- so it would not be useful here).

[joepvtl]

@EdCharbeneau is there any update regarding this? We are still experiencing this issue.. Can I just import the script in the index.html myself? Or will that cause issues with your import code?

[Mike-E-angelo]

I've ignored these errors in production but indeed still see them all the time in development. 😭

[joepvtl]

@Mike-E-angelo, is your project that this occurs on, upgraded from .net 5 to 6?

[Mike-E-angelo]

.NET7 here @joepvtl :)

[joepvtl]

@Mike-E-angelo do you have a reproducible scenario for the Import failed error?

[Mike-E-angelo]

I wouldn't call it consistently reproducible @joepvtl but it happens quite a lot 😬 Normal usage + page loads/unloads invoke it quite a bit. I just unhid mediaquery in my exception list and there's quite a bit over the past 6 hours alone

[joepvtl]

Yeah same here. It only happens for this package though, other packages are not having this issue. Do you know what happens when the error occurs? Does the end user see a error msg?

[Mike-E-angelo]

As best as I can tell no they do not, at least I have personally not seen it, which is why I have hidden it in my list and (begrudgingly) swept it under the rug for the time being. 😞

[EdCharbeneau]

I still haven't found a way of reproducing this. However, I do see the same error with Hot Reload's javascript when debugging in VS2022.

@joepvtl What other packages do you use? I would like to see if they're using lazy loading or plain JS references.

[EdCharbeneau]

@Mike-E-angelo Can you confirm that this is happening in release/prod. I have had similar issues when debugging on localhost with the Hot Reload javascript dependencies.

[Mike-E-angelo]

Indeed the screenshot provided above is from my production environment, @EdCharbeneau :)

[joepvtl]

I also use MudBlazor, but I see that I have just included that script myself in the index.html. I don't see it ever occuring on my local environment. Only on the release/production one. I saw that MudBlazor has their own Resize/Breakpoint implementation so I might just use that to avoid this issue.

[EdCharbeneau]

I believe MudBlazor borrowed BlazorSize's codebase. But I don't know at which version. It may have been prior to module loading.

[EdCharbeneau]

I'm trying to force the error so I can attempt to debug it. I removed the JavaScript module from the source code to see how what would happen. I get a different error.

Expected: Importing a module script failed.

Actual: Failed to fetch dynamically imported module

I need to understand what the difference is between the two errors now. If Failed to fetch means the module is not on disk, then what does Importing a module script failed actually mean is happening?

[SteveSandersonMS]

Is the message browser-specific? If I search for Importing a module script failed, lots of the results talk about Safari specifically. Is it possible that other browsers use a different phrasing, such as Failed to fetch dynamically imported module?

Or can you repro the Importing a module script failed message on all browsers?

[EdCharbeneau]

@Mike-E-angelo @joepvtl Can you verify which browser you're experiencing this error with?

Please see Steve's comment below. A browser or server issue would explain why the error is not commonly seen on all projects.

[SteveSandersonMS]

This issue: https://github.com/sveltejs/kit/issues/5208

... seems to imply the message is browser-specific, and that it can be triggered by the server returning a 500 instead of the JS module file. Is it possible the server, or some other proxy such as Cloudflare, is intermittently failing to return the content?

[EdCharbeneau]

I'm also seeing this issue, which is browser specific. https://mikaberglund.com/javascript-interop-error-in-blazor-jsexception-unexpected-token/

[Mike-E-angelo]

So poking around here the original post had 2 exceptions. The first one for importing a module script has actually not been reported in my logs since October of last year, so this appears addressed in my world. 👍

However, the second one is what I am seeing in my logs, with quite some frequency at that. 🤔

[EdCharbeneau]

JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.

Looks like I can fix this one by ignoring the exception

https://stackoverflow.com/questions/72488563/blazor-server-side-application-throwing-system-invalidoperationexception-javas

[EdCharbeneau]

So poking around here the original post had 2 exceptions. The first one for importing a module script has actually not been reported in my logs since October of last year, so this appears addressed in my world. 👍

However, the second one is what I am seeing in my logs, with quite some frequency at that. 🤔

Moving to a new issue https://github.com/EdCharbeneau/BlazorSize/issues/90

[EdCharbeneau]

@SteveSandersonMS Thanks again, I think you helped get the discussion back on the right track.

@Mike-E-angelo @joepvtl Closing this issue and moving the two topics to new issues to avoid confusion.

Microsoft.JSInterop.JSException: Importing a module script failed. Moved and closed. Appears to be a browser and or server issue not a bug in the BlazorSize codebase. Ref issue #91

Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed. Will fix in the next version, issue #90