Weird UI freezes

silverpark · August 25, 2023, 10:59am

Hi,

I’ve been having issues after updating from 5.6 to 5.7. I’m using Chrome and the tab just freezes. I’m seeing there are javascript errors in console after the freeze (i’ve seen two types of freezes, first is just a freeze and the site is still shown. Second is just a gray screen). The freezing happens quite randomly. I’m just navigating between clients and invoices and it randomly freezes.

The errors i’m seeing in console are these:

After having the frozen tab open for a while i’m seeing thousands of these errors in console. There are no errors in laravel.log or in my Apache errorlog. This seems to be a javascript problem.

What is have tried:
Updating to latest version (5.7.3)
Running “php artisan migrate”
Running “php artisan optimize”
Updating dependencies with “composer install”

I have not tested other browsers because our accountant uses Chrome. We are using the Flutter UI. Same thing happens on different computers.

After 5 minutes my console log was 430k rows. I put parts of that in these pastebin links:

This: main.foss.dart.js?v=5.7.3:135706 Uncaught TypeError: Cannot read properties of n - Pastebin.com

And this: canvaskit.js:163 Aborted()Na @ canvaskit.js:163a @ canvaskit.js:232$func35 - Pastebin.com

Do you have any ideas what more i could do to diagnose this?

silverpark · August 25, 2023, 12:31pm

I’ve done some more diagnosing. It seems to be some sort of memory leak because every time i navigate between different clients or invoice the chrome ram usage goes up. With only 1 tab open and invoiceninja loaded it starts at 400mb memory usage and goes up to 1700mb and then freezes. While frozen the cpu usage stays pretty high (70%+ on my machine). I wanted to check if the demo version does the same but it is not updated and is still on 5.6.28.

Edit: I got the same problem on 5.6.28 on the demo site at Invoice Ninja
All I did was open a client, open client list, open another client and repeat for about 30-40x and eventually memory usage with only 1 tab open went to 1700mb and the tab froze. I tried another PC and got the same result.

It seems that a similar issue is at flutter github: CanvasKit threw an exception while laying out the paragraph. The font was "MaterialIcons" · Issue #120977 · flutter/flutter · GitHub

What are my options? Tell the accountant to get used to React version?

hillel · August 25, 2023, 2:05pm

Hi,

Thank for details about the error, I’ll need to look into it.

Can you check try adding ?build=profile to the URL to check if you see a different error?

Also, is the desktop app working for you?

silverpark · August 25, 2023, 2:23pm

The desktop app does not seem to have the same issue. Ram usage remains steady and i have not had any freezes on the app.

I tried the ?build=profile but the errors seem to be the same and the flutter ui still freezes.

I forgot to mention this but a simple refresh fixes it for a while (until memory usage gets to around 1700mb again).

hillel · August 25, 2023, 3:07pm

Not sure, that doesn’t appear to be the profile build.

silverpark · August 28, 2023, 7:02am

I guess i was not using ?build=profile correctly. I was able to get the log file from the demo site. I put it in this pastebin: main.profile.dart.js?v=5.6.28:17811 Flutter Web Bootstrap: Auto.main.profile.d - Pastebin.com

Some parts that seem interesting:

canvaskit.js:9 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

main.profile.dart.js?v=5.6.28:17811 CanvasKit threw an exception while laying out the paragraph. The font was "MaterialIcons". Exception:
RuntimeError: Aborted(). Build with -sASSERTIONS for more info.

main.profile.dart.js?v=5.6.28:139644 RuntimeError: Aborted(). Build with -sASSERTIONS for more info.
main.profile.dart.js?v=5.6.28:139644     at abort (https://demo.invoiceninja.com/canvaskit/profiling/canvaskit.js:9:135902)
main.profile.dart.js?v=5.6.28:139644     at _abort (https://demo.invoiceninja.com/canvaskit/profiling/canvaskit.js:9:183585)
main.profile.dart.js?v=5.6.28:139644     at sk_malloc_flags(unsigned long, unsigned int) (wasm://wasm/022469ce:wasm-function[360]:0x10f14)
main.profile.dart.js?v=5.6.28:139644     at SkContainerAllocator::allocate(int, double) (wasm://wasm/022469ce:wasm-function[239]:0xa5f0)
main.profile.dart.js?v=5.6.28:139644     at SkTArray<skia::textlayout::Run, false>::checkRealloc(int, SkTArray<skia::textlayout::Run, false>::ReallocType) (wasm://wasm/022469ce:wasm-function[2611]:0x1236cb)
main.profile.dart.js?v=5.6.28:139644     at std::__2::__function::__func<skia::textlayout::OneLineShaper::shape()::$_3::operator()(skia::textlayout::SkRange<unsigned long>, SkSpan<skia::textlayout::Block>, float&, unsigned long, unsigned char) const::'lambda'(skia::textlayout::Block, SkTArray<SkShaper::Feature, true>), std::__2::allocator<skia::textlayout::OneLineShaper::shape()::$_3::operator()(skia::textlayout::SkRange<unsigned long>, SkSpan<skia::textlayout::Block>, float&, unsigned long, unsigned char) const::'lambda'(skia::textlayout::Block, SkTArray<SkShaper::Feature, true>)>, void (skia::textlayout::Block, SkTArray<SkShaper::Feature, true>)>::operator()(skia::textlayout::Block&&, SkTArray<SkShaper::Feature, true>&&) (wasm://wasm/022469ce:wasm-function[7282]:0x3c9537)
main.profile.dart.js?v=5.6.28:139644     at std::__2::__function::__func<skia::textlayout::OneLineShaper::shape()::$_3, std::__2::allocator<skia::textlayout::OneLineShaper::shape()::$_3>, float (skia::textlayout::SkRange<unsigned long>, SkSpan<skia::textlayout::Block>, float&, unsigned long, unsigned char)>::operator()(skia::textlayout::SkRange<unsigned long>&&, SkSpan<skia::textlayout::Block>&&, float&, unsigned long&&, unsigned char&&) (wasm://wasm/022469ce:wasm-function[7279]:0x3c7bb8)
main.profile.dart.js?v=5.6.28:139644     at skia::textlayout::ParagraphImpl::layout(float) (wasm://wasm/022469ce:wasm-function[7989]:0x3efd3d)
main.profile.dart.js?v=5.6.28:139644     at emscripten::internal::MethodInvoker<void (SkFont::*)(float), void, SkFont*, float>::invoke(void (SkFont::* const&)(float), SkFont*, float) (wasm://wasm/022469ce:wasm-function[2492]:0x112177)
main.profile.dart.js?v=5.6.28:139644     at ClassHandle.layout (https://demo.invoiceninja.com/canvaskit/profiling/canvaskit.js:9:162679)
main.profile.dart.js?v=5.6.28:139644 Another exception was thrown: Instance of 'ErrorSummary'
canvaskit.js:9 Aborted()

I hope this helps. If you need any more information or need something tested or diagnosed then let me know and I’ll try to help.

hillel · August 28, 2023, 9:29am

Thank you, that’s helpful!

I’m traveling this week but will look into this when I’m back next week.

silverpark · September 11, 2023, 6:49am

Any updates on this issue? Have you been able to figure out what is causing this?

hillel · September 11, 2023, 7:06am

I haven’t been able to reproduce the issue. We’re working to update to the latest version of the framework we’re using which may help.