Tips on solving 'DevTools was disconnected from the page' and Electron Helper dies

Question

I've a problem with Electron where the app goes blank. i.e. It becomes a white screen. If I open the dev tools it displays the following message.

In ActivityMonitor I can see the number of Electron Helper processes drops from 3 to 2 when this happens. Plus it seems I'm not the only person to come across it. e.g.

• Facing "Devtools was disconnected from the page. Once page is reloaded, Devtools will automatically reconnect."
• Electron dying without any information, what now?

But I've yet to find an answer that helps. In scenarios where Electron crashes are there any good approaches to identifying the problem?

For context I'm loading an sdk into Electron. Originally I was using browserify to package it which worked fine. But I want to move to the SDKs npm release. This version seems to have introduced the problem (though the code should be the same).

Answer 1

A good bit of time has passed since I originally posted this question. I'll answer it myself in case my mistake can assist anyone.

I never got a "solution" to the original problem. At a much later date I switched across to the npm release of the sdk and it worked.

But before that time I'd hit this issue again. Luckily, by then, I'd added a logger that also wrote console to file. With it I noticed that a JavaScript syntax error caused the crash. e.g. Missing closing bracket, etc.

I suspect that's what caused my original problem. But the Chrome dev tools do the worst thing by blanking the console rather than preserve it when the tools crash.

Code I used to setup a logger

/*global window */ const winston = require('winston'); const prettyMs = require('pretty-ms');  /**  * Proxy the standard 'console' object and redirect it toward a logger.  */ class Logger {   constructor() {     // Retain a reference to the original console     this.originalConsole = window.console;     this.timers = new Map([]);      // Configure a logger     this.logger = winston.createLogger({       level: 'info',       format: winston.format.combine(         winston.format.timestamp(),         winston.format.printf(({ level, message, timestamp }) => {           return `${timestamp} ${level}: ${message}`;         })       ),       transports: [         new winston.transports.File(           {             filename: `${require('electron').remote.app.getPath('userData')}/logs/downloader.log`, // Note: require('electron').remote is undefined when I include it in the normal imports             handleExceptions: true, // Log unhandled exceptions             maxsize: 1048576, // 10 MB             maxFiles: 10           }         )       ]     });      const _this = this;      // Switch out the console with a proxied version     window.console = new Proxy(this.originalConsole, {       // Override the console functions       get(target, property) {         // Leverage the identical logger functions         if (['debug', 'info', 'warn', 'error'].includes(property)) return (...parameters) => {           _this.logger[property](parameters);           // Simple approach to logging to console. Initially considered           // using a custom logger. But this is much easier to implement.           // Downside is that the format differs but I can live with that           _this.originalConsole[property](...parameters);         }         // The log function differs in logger so map it to info         if ('log' === property) return (...parameters) => {           _this.logger.info(parameters);           _this.originalConsole.info(...parameters);         }         // Re-implement the time and timeEnd functions         if ('time' === property) return (label) => _this.timers.set(label, window.performance.now());         if ('timeEnd' === property) return (label) => {           const now = window.performance.now();           if (!_this.timers.has(label)) {             _this.logger.warn(`console.timeEnd('${label}') called without preceding console.time('${label}')! Or console.timeEnd('${label}') has been called more than once.`)           }           const timeTaken = prettyMs(now - _this.timers.get(label));           _this.timers.delete(label);           const message = `${label} ${timeTaken}`;           _this.logger.info(message);           _this.originalConsole.info(message);         }          // Any non-overriden functions are passed to console         return target[property];       }     });   } }  /**  * Calling this function switches the window.console for a proxied version.  * The proxy allows us to redirect the call to a logger.  */ function switchConsoleToLogger() { new Logger(); } // eslint-disable-line no-unused-vars 

Then in index.html I load this script first

<script src="js/logger.js"></script> <script>switchConsoleToLogger()</script> 

Answer 2

I had installed Google Chrome version 79.0.3945.130 (64 bit). My app was going to crash every time when I was in debug mode. I try all the solutions I found on the web but no one was useful. I downgrade to all the previous version:

1. 78.x Crashed
2. 77.x Crashed
3. 75.x Not Crashed

I had to re-install the version 75.0.3770.80 (64 bit). Problem has been solved. It can be a new versions of Chrome problem. I sent feedback to Chrome assistence.

Answer 3

The trick to debugging a crash like this, is to enable logging, which is apparently disabled by default. This is done by setting the environment variable ELECTRON_ENABLE_LOGGING=1, as mentioned in this GitHub issue.

With that enabled, you should see something along the lines of this in the console: