Non-Deterministic React Failures on Electron

Bug Description:

When starting the Electron version of the IDE, there is a small random chance that React will fail and stop rendering. This is most notable when the global toolbar is active. Since the toolbar seems to be one of the last elements to be rendered, when this issue occurs, the toolbar will remain empty.

TheiaWithReloadIssue

While the IDE is in this state, elements are still interactable. However, some elements will no longer render properly (e.g. file view tree will fail to expand, certain dialog boxes will have no contents). Simply refreshing the IDE will restore the IDE’s complete functionality. Nevertheless, having the error occur in the first place is unfavorable for a product that will be used in production. When the error occurs, no error messages are printed to the console. However, trying to render new dialogs will sometimes show additional React error messages. Below is the complete console log of when the IDE encountered the React failure:

ConsoleLog

This bug occurs completely randomly on startup. I have not been able to track down an exact cause. However, I have noticed it happens more often when my computer is under a heavier load from running other processes. This may just be a coincidence. The best way to induce the error is to display the toolbar and use ctrl+r to reload the IDE until the toolbar fails to load. Note that this error still occurs when starting the IDE after completely closing all related processes. It's an issue with startup, not reloading.

I have created a Selenium script which I have been using to help automatically reload the IDE until the error occurs. This script and its dependencies can be downloaded here which help to reproduce the error. The “Steps to Reproduce” section has listed steps for running the script. While running the script, the console will constantly output the number of reloads that have occurred until the error is induced. From my tests, this number can be anywhere from 3 reloads to over 1500.

I have tried this on my own IDE I that have been developing, the electron example found in the GitHub repo, the installed Theia Blueprint application, and a custom IDE using as few Theia Extensions packages as possible using the official guide. All these versions have the React error.

I have also tried running this script on browser-based versions which do not use the electron or @theia/electron packages. After running the script for a couple of hours, the reload issue did not occur. This could be a very lucky streak, but I have yet to be able to reproduce this error on non-electron versions of Theia.

This issue was first noticed sometime after updating Theia to version 1.29.0 when Theia changed the React dependency to version 18. The error might have occurred before then; however, I only started noticing it after switching to version 1.29.0.

Steps to Reproduce:

Clone Theia's GitHub Repository.
Build the electron example (yarn; yarn electron build; yarn electron start;).
Turn on the global toolbar. The selenium script uses the toolbar to detect the issue.
Download the [Selenium Helper Script].(https://github.com/StefanSMicrochip/SeleniumHelperScript/raw/main/detectReactFailure.zip)
Extract and place the downloaded files into the theia/examples folder like so:

CopyFiles

Run the chromedriver binary. (You can also download chromedriver from here. Just be sure to run it from the examples directory as shown in the above image.)
Run the selenium script using NodeJS. (node .\examples\detectReactFailure.js)
Wait.
Eventually, React will fail to render the toolbar, and the selenium script will time out and print an error to the console. The IDE will remain open. (Note: as mentioned above, this bug is completely random so the React error may not occur right away.)

SeleniumConsoleError

Additional Information:

Operating System: Windows 10 Pro Version 21H2
Theia Version: master as of December 22nd, 2022
NodeJS Version: v16.13.0

eclipse-theia / theia