Main thread frozen handling interval, sending accumulated data with enormous delay

Question

I have written an application in Tauri, Rust + JS React. When the machine connected to the app stops working, the app sends to database equivalent of the injection but in other state like machine failure to indicate how many injections could have happened during the machine failure and look:

I, [2024-03-28T03:29:07.845214 #723418]  INFO -- : [373a6e4c-86cf-47d5-8e6a-ac31ce78d1bc]   Parameters: {"cycles"=>[{"injector"=>"ST 70", "state"=>3, "length"=>55, "current_time"=>"3:29:7", "current_date"=>"2024-3-28"}], "cycle"=>{"cycles"=>[{"injector"=>"ST 70", "state"=>3, "length"=>55, "current_time"=>"3:29:7", "current_date"=>"2024-3-28"}]}}
I, [2024-03-28T03:29:07.854491 #723418]  INFO -- : [373a6e4c-86cf-47d5-8e6a-ac31ce78d1bc] Completed 200 OK in 9ms (Views: 0.3ms | ActiveRecord: 0.0ms | Allocations: 2381)

This is last log from Rails that was send from my app to Rails server. This request sending is handled by Interval in JS that is fired each 55 seconds as you can see, the length is set to 55, and the request is made with axios library. Everything would be fine if not this - the next request from app came 43 minutes later, as if the app has fallen asleep:

I, [2024-03-28T04:13:40.365444 #723418]  INFO -- : [6dae3bff-6f3f-44c4-9961-0b8b2b41f7c2]   Parameters: {"cycles"=>[{"injector"=>"ST 70", "state"=>3, "length"=>55, "current_time"=>"3:30:2", "current_date"=>"2024-3-28"}], "cycle"=>{"cycles"=>[{"injector"=>"ST 70", "state"=>3, "length"=>55, "current_time"=>"3:30:2", "current_date"=>"2024-3-28"}]}}
I, [2024-03-28T04:13:40.360601 #723418]  INFO -- : [6e537b40-79c4-4cec-82f1-5b348731f892] Started POST "/cycles" for *** at 2024-03-28 04:13:40 +0100
I, [2024-03-28T04:13:40.369729 #723418]  INFO -- : [6e537b40-79c4-4cec-82f1-5b348731f892] Processing by CyclesController#create as HTML
I, [2024-03-28T04:13:40.369892 #723418]  INFO -- : [6e537b40-79c4-4cec-82f1-5b348731f892]   Parameters: {"cycles"=>[{"injector"=>"ST 70", "state"=>3, "length"=>55, "current_time"=>"3:31:52", "current_date"=>"2024-3-28"}], "cycle"=>{"cycles"=>[{"injector"=>"ST 70", "state"=>3, "length"=>55, "current_time"=>"3:31:52", "current_date"=>"2024-3-28"}]}}
I, [2024-03-28T04:13:40.365232 #723418]  INFO -- : [89cb0939-2fd8-48f7-b8e1-c8a7f3667771] Started POST "/cycles" for *** at 2024-03-28 04:13:40 +0100
I, [2024-03-28T04:13:40.371292 #723418]  INFO -- : [89cb0939-2fd8-48f7-b8e1-c8a7f3667771] Processing by CyclesController#create as HTML
I, [2024-03-28T04:13:40.374927 #723418]  INFO -- : [89cb0939-2fd8-48f7-b8e1-c8a7f3667771]   Parameters: {"cycles"=>[{"injector"=>"ST 70", "state"=>3, "length"=>55, "current_time"=>"3:32:47", "current_date"=>"2024-3-28"}], "cycle"=>{"cycles"=>[{"injector"=>"ST 70", "state"=>3, "length"=>55, "current_time"=>"3:32:47", "current_date"=>"2024-3-28"}]}}

The app sent all data that was generated during this "hung up" time at once - even though the request came 4:13, the request included data 43 minutes old, as you can see (current_time). And it was like the server was bombed with the data that appeared during this 43 minutes, like JS has realised that he has to send all data to the server. All axios request have been maintained in "cache?" somehow and when the app had woken up, it sent it all at once. The problem is JavaScript is single threaded, I'm aware of this, and in this case there is a lot stuff going on on main thread, but to be honest - I've seen app that handle much more and everything works completely fine. What happened guys? Need help. Is there any known issue JS getting frozen for a period of time?

EDIT:

I'm trying to investigate my case, it seems like there is some JS or WebView heap size oversize. I've found somewhere on the Internet a case where someone's app got frozen after certain time for 20 seconds, afterwards all functions that were to be called during hung up, has been called. And it all happened due to JS heap size exceeded. Has anyone tackled with such a thing?

UPDATE:

So far I discovered that it might not be related to the code itself. JS code doesn't issue any memory leaks, heap size is of constant size, but there is a problem with Tauri's WebView2. Whenever it runs for a longer period of time, like 2/3 weeks, its instance in memory grows significantly. I'm sure there are some sort of memory leaks in WebView2 itself, but got no clue how to tackle them. 2 days ago it was like 42 MB, now it is around 58 so the difference is quite noticeable, cause it is only 2 days.

Answer 1

Please provide a minimal reproducible code, so we can take a look. I'll update this answer once you do.

Couple notes:

• Tauri uses serializes data sent between JavaScript and Rust using String (and JSON) format. No binary format.
• Axios always takes extra time to send requests
• Depending on OS, web browser that executes your JavaScript can have lesser execution priority (or even put to sleep to save energy, etc.)
• If sending these requests to your backend is a priority, then consider sending them from Rust (i.e. reqwest, and other libraries)