[V2] Mac: The page not rendering

[cxt90730]

Description

@leaanthony @stffabi I have written code to reproduce the render problem. The following are expected and unexpected result. Expected:

UnExpected:

To Reproduce

1. wails build (--debug)
2. open / close App repeatedly and repeatedly...
3. sometimes the page will not render
4. (I guess) If you click jump, the probability of occcuring problems will increase

Expected behaviour

solve it - -

Screenshots

No response

Attempted Fixes

No response

System Details

unnecessary...

Additional context

No response

[cxt90730]

https://github.com/cxt90730/wailsbugcode

[stffabi]

Thanks for creating this followup issue 🙏. Could you please also post your system details, so we know which version of MacOS you are running?

I've just taken a brief look into the code and it seems like you are not using the fix of #1664 in your go.mod. Can you please bump the wails dependency to master to include this fix?

go get -d github.com/wailsapp/wails/v2@master 

Your should then see something like require github.com/wailsapp/wails/v2 v2.0.0-beta.42.0.20220728075325-a224236b2213 in the go.mod file.

Thank you very much.

[cxt90730]

@stffabi Hi, my MacOS version is 10.15.7. I have updated the go module to main branch, and rebuild App, the problem also occurs -. -

wails doctor:

❯ wails doctor
Wails CLI v2.0.0-beta.42

Scanning system - Please wait (this may take a long time)...Done.

System
------
OS:		MacOS
Version: 	10.15.7
ID:		199506
Go Version:	go1.18.4
Platform:	darwin
Architecture:	amd64

Wails
------
Version: 	v2.0.0-beta.42
Revision:	3f1de712b060d285c145fb90e0e24a1770080679
Modified:	true

Dependency			Package Name	Status		Version
----------			------------	------		-------
xcode command line tools 	N/A		Installed	2373
npm 				N/A		Installed	8.0.0
*upx 				N/A		Available
*nsis 				N/A		Installed	v3.06.1

* - Optional Dependency

Diagnosis
---------
Your system is ready for Wails development!
Optional package(s) installation details:
  - upx : Available at https://upx.github.io/

[stffabi]

Thanks, at the moment I'm unable to reproduce it. In the meantime, what are you seeing in the network tab when the page load didn't work? Do you see all requests there?

[cxt90730]

@stffabi Yeah , It's kind of hard to reproduce, maybe it needs to take few minutes to open/close App repeatedly and repeatedly... On network tab, the most obvious is that the picture cannot be loaded

[cxt90730]

my previous app has the same problem...

[stffabi]

Can you try to reproduce it with reloads when the dev tools are open? Then take a look if you see any errors in the console tab and take a look if the index.html contains the links to the images.

[stffabi]

If the network tab doesn't show the request I suspect that either somewhere the link to the images don't get in or WkWebView doesn't initiate the request.

[cxt90730]

@stffabi I can reproduce it by clicking repeatedly reloads button on the dev tools. No error log shows on Console tab, Network tab and terminal. But, the obvious thing is that fetching Helloworld.xxxx.js are blocked !! I find this problem on the Network tab. The following is the desktop capture.

[stffabi]

@cxt90730 awesome thanks for this information. The hanging request is causing your problem, and I think I know what's going on...

I'm going to create a PR which should fix the problem. I'll let you know when it's up...

[cxt90730]

@stffabi Respect for your hard work, and thank you very much for your support ! I also want to know what caused this incredible problem... hope your answer ~

[stffabi]

Sorry didn't have enough time to write down the details earlier.

In the callback from the native WKWebView a task object needs to be hold, then there's a callback into the go side where the request is processed (asynchronously). In order to finish the request Wails calls into the native part, gets the task object and finishes the request. The task object is hold in a dictionary indexed by the request url. If now two identical requests are sent (which seems to be the case for you) and it happens that the first request is still running, the second might overwrite the entry in the dictionary. So one of the tasks can never be finished and the attached request will remain in pending state.

The minimal reproduction guide to trigger the issue:

• wails init -t plain
• wails build --debug
• Start the app and open the dev tools
• In console tab execute fetch("assets/images/logo-universal.png");fetch("assets/images/logo-universal.png");
• See one request remain in pending state in the network tab.

[cxt90730]

@stffabi Thank you for your reply ~ In fact, I don't know if this problem is the same as the problem that Vuerouter.push not works when the "Login button" clicked I mentioned before (although the results is same that the picture assets cannot be loaded), maybe current issue is a new problem... I personally feel, according to your description, it needs to make the callback name have uniqueness in the dictionary or add lock or mutex on the key in the dictionary? I'm sorry I have limited ability to modify wails source code and to debug and fix it :(

[stffabi]

I personally feel, according to your description, it needs to make the callback name have uniqueness in the dictionary or add lock or mutex on the key in the dictionary?

Yeah exactly, I've already started fixing it. I will let you know when you can test the PR.

I'm sorry I have limited ability to modify wails source code and to debug and fix it :(

No worries, testing and giving detailed feedback like you do is very valuable 🙏 . Thank you very much for improving Wails.

[stffabi]

@cxt90730 PR #1681 is up which should fix your issue. Would it be possible for you to give it a try?

[cxt90730]

@stffabi That's great ! I've tried about half an hour and the rendering problem not occurs again 👍 And same fix with my previous App :)

[stffabi]

Awesome, thanks so much for testing the PR. 🙏