Cannot load websites built on react.js

[lucysrausch]

Hey,

I'm using the latest qt-webkit-kiosk build with buildroot with great success so far. While javascript generally works, I'm unable to load any websites based on react.js. To test this, you can use any of these demos (https://reactjs.org/community/examples.html), e.g. https://github.com/ahfarmer/calculator

The browser finishes loading, but the page just remains blank.

Since I already built the application to be displayed in react.js, I would love to hear of an solution for this.

Thanks and best regards Niklas

[sergey-dryabzhinsky]

You can try to press F12 key to popup standard WebKit DeveloperTools window. And look into Console tab output.

Probably issue in old JavaScript engine in WebKit build.

There is may be only one solution - to port QWK to QtWebEngine 5.6+

[lucysrausch]

Hey!

Thanks for your answer! I've spent more time debugging, and here are some things I noticed. I rebuild qt-webkit-kiosk on my Ubuntu machine and on the target platform (an Orange Pi SBC) using recent Qt webkit versions. For my Laptop, with the browser being rendered in X, the react.js site loads perfectly. Here is the log:

Build with: Qt = 5.12.4 ; WebKit = 5.212.0
Runing with: Qt = 5.12.4 ; WebKit = "602.1"
>> Config option in command prompt...
Ini file:  "/home/niklas/qt-config.ini"
No signal BREAK defined
Application icon:  "/usr/share/icons/qt-webkit-kiosk.png"
>> Uri option in command prompt...
Page: check local file =  "http://192.168.179.134:8080/" , absolute path =  "/home/niklas/qt-webkit-kiosk/http:/192.168.179.134:8080/" , local uri =  "file:http://192.168.179.134:8080/"
Page: Remote URI
"Mi. Jan. 29 20:21:57 2020" Start loading...
"Mi. Jan. 29 20:21:57 2020" Loading progress:  50
"Mi. Jan. 29 20:21:57 2020" URL changes:  "http://192.168.179.134:8080/"
Screen size:  2880 x 1620
Move window to: ( 0 ; 0 )
"Mi. Jan. 29 20:21:57 2020" Loading progress:  100
MainWindow::hideScrollbars
Try to hide scrollbars...
"Mi. Jan. 29 20:21:57 2020" MainWindow::finishLoading -  ok = 1
MainWindow::disableSelection
Try to disable text selection...
... html head loaded ... hack inserted...
MainWindow::attachStyles
MainWindow::attachJavascripts
Try to activate window...
... by click simulation...

When I try to load the same page on the Orange Pi (rendered to fbdev), I get a similar log, but the page remains blank. It is almost as if on the Orange Pi, Qt decides to not execute the Javascript in the very last second :/

Log:

Build with: Qt = 5.12.5 ; WebKit = 5.9.1
Runing with: Qt = 5.12.5 ; WebKit = "538.1"
>> Config option in command prompt...
Ini file:  "/root/qt-config.ini"
No signal BREAK defined
Application icon:  "/usr/share/icons/qt-webkit-kiosk.png"
>> Uri option in command prompt...
Page: check local file =  "http://192.168.179.134:8080/" , absolute path =  "/root/http:/192.168.179.134:8080/" , local uri =  "file:http://192.168.179.134:8080/"
Page: Remote URI
"Wed Jan 29 19:20:26 2020" Start loading...
"Wed Jan 29 19:20:26 2020" Loading progress:  10
"Wed Jan 29 19:20:26 2020" Loading progress:  50
"Wed Jan 29 19:20:26 2020" URL changes:  "http://192.168.179.134:8080/"
"Wed Jan 29 19:20:26 2020" handleNetworkReply URL: "http://192.168.179.134:8080/"
"Wed Jan 29 19:20:26 2020" handleNetworkReply OK
"Wed Jan 29 19:20:26 2020" handleNetworkReply URL: "http://192.168.179.134:8080/static/css/2.84dfe09c.chunk.css"
"Wed Jan 29 19:20:26 2020" handleNetworkReply OK
"Wed Jan 29 19:20:26 2020" Loading progress:  50
MainWindow::hideScrollbars
"Wed Jan 29 19:20:26 2020" handleNetworkReply URL: "http://192.168.179.134:8080/static/css/main.9c9fa582.chunk.css"
"Wed Jan 29 19:20:26 2020" handleNetworkReply OK
"Wed Jan 29 19:20:26 2020" Loading progress:  50
"Wed Jan 29 19:20:26 2020" handleNetworkReply URL: "http://192.168.179.134:8080/static/js/main.c27781f9.chunk.js"
"Wed Jan 29 19:20:26 2020" handleNetworkReply OK
"Wed Jan 29 19:20:26 2020" Loading progress:  52
"Wed Jan 29 19:20:26 2020" Loading progress:  55
"Wed Jan 29 19:20:26 2020" Loading progress:  57
"Wed Jan 29 19:20:26 2020" Loading progress:  59
"Wed Jan 29 19:20:26 2020" Loading progress:  61
"Wed Jan 29 19:20:26 2020" Loading progress:  64
"Wed Jan 29 19:20:26 2020" Loading progress:  67
"Wed Jan 29 19:20:26 2020" Loading progress:  69
"Wed Jan 29 19:20:26 2020" Loading progress:  71
"Wed Jan 29 19:20:26 2020" Loading progress:  73
"Wed Jan 29 19:20:26 2020" Loading progress:  76
"Wed Jan 29 19:20:26 2020" Loading progress:  78
"Wed Jan 29 19:20:26 2020" Loading progress:  80
"Wed Jan 29 19:20:26 2020" Loading progress:  82
"Wed Jan 29 19:20:26 2020" Loading progress:  85
"Wed Jan 29 19:20:26 2020" handleNetworkReply URL: "http://192.168.179.134:8080/static/js/2.e34f65dd.chunk.js"
"Wed Jan 29 19:20:26 2020" handleNetworkReply OK
"Wed Jan 29 19:20:27 2020" Loading progress:  100
"Wed Jan 29 19:20:27 2020" MainWindow::finishLoading -  ok = 1
MainWindow::disableSelection
MainWindow::attachStyles
MainWindow::attachJavascripts
Try to activate window...
... by click simulation...

Unfortunately I cannot switch to WebEngine since I can't provide an OpenGL backend on the OrangePi. I can't open the Developer Tools since I have no X running on the OrangePi.

Edit: I also install the debian package of qt-webkit-kiosk 1.99.9, which was build with Qt 5.2.1 and WebKit: library v5.1.1. On my Ubuntu machine, it renders the react.js site correctly. I thus expect that the webkit version is not the problem?

Do you have any other suggestions to check why the page is not loading correctly?

Thanks and best regards Niklas

[sergey-dryabzhinsky]

Try latest code from master. Added new options for .ini-file that may be useful:

• browser/custom_user_agent_header - change User-Agent header completely
• browser/show_js_console_messages - output JavaScript error messages to console

Hope it will help with debug.