Browser windows not initializing correctly


#1

Would like to know if anyone has come across a problem with Electron on Windows (7 64bit) (the current and previous versions all seem to show the same behavior in both 32bit and 64bit builds). If you have an Electron process that creates multiple BrowserWindows, which in turn host a simple webview, occasionally (seems to be unpredictable) the browser window will not correctly initialize in one of two ways:

  1. Either the initial loadURL from the main process doesn’t do anything and you have an empty window. This is less common but quite fatal as the Renderer process is then left in a strange zombied state.

-or-

  1. The hosted page fails to receive a did-finish-load from the webview so the page is left with the two Renderer processes in an unusable state.

I have reproduced this very simply by looping and creating 50 browser windows. My repro app will open a browser window that will be white if the first issue occurs or will be left red if the second occurs else the electron home page will be loaded.

Either one of these happen often enough to be a problem for us.

Has anyone else come across this?

My current work around is more about detecting the issue by having a ping ipc from the renderer process back to the main process after the webview has fire did-finish-load and a timeout. if the timeout fires then the window is destroyed and restarted. Seems to work well but is obviously far from ideal.

My main.js file is as follows:
“use strict”;
const electron = require( “electron” );
const {app} = electron;
const {BrowserWindow} = electron;

app.on( 'ready', function ()
{
    let startXPos = 0; let offsetXPos = startXPos; let offsetYPos = 0;
    for ( let i = 0; i < 50; i++ )
    {
        let options = { x: offsetXPos,  y: offsetYPos, width: 200, height: 100 };
        var newWindow = new BrowserWindow( options );
        newWindow.loadURL( `file://${__dirname}/pluginhost.html` );
        offsetYPos += options.height;
        if ( offsetYPos >= 8 * options.height )
        {
            offsetYPos = 0;
            offsetXPos += options.width;
        }
    }
} );

// Quit when all windows are closed.
app.on( 'window-all-closed', function ()
{
    app.quit();
} );

My pluginhost.html is as follows:

<!DOCTYPE html>
<html>
	<head>
		<title>NOT LOADED</title>
	</head>
	<body id="docBody" style="background-color: #ffff00">
		<webview id="webView"  src="http://electron.atom.io/"></webview>
		<script>
			var loadstop = function()
			{
				document.title = "DONE";
				document.getElementById("docBody").style.backgroundColor="#00ff00";
			}

			var handleCrashed = function()
			{
				document.title = "CRASHED";
				document.getElementById("docBody").style.backgroundColor="#00ffff";
			}

			document.addEventListener('DOMContentLoaded', function()
			{
				document.getElementById("docBody").style.backgroundColor="#ff0000";
				document.getElementById("webView").addEventListener("did-finish-load", loadstop);
				document.getElementById("webView").addEventListener("did-start-loading", function() { console.info("did-start-loading"); } );
				document.getElementById("webView").addEventListener("crashed", handleCrashed);
			});
		</script>
	</body>
</html>

Any help or feedback would be appreciated.

Thanks
Andy


#2

Hi

Any response to this?