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).

Solution 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>

Solution 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.

Solution 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:

Solution 4

My problem was that I was not loading a page such as index.html. Once I loaded problem went away.

  parentWindow = new BrowserWindow({
    title: 'parent'
  });
  parentWindow.loadURL(`file://${__dirname}/index.html`);
  parentWindow.webContents.openDevTools();

Solution 5

You can download Google Chrome Canary. I was facing this problem on Google Chrome where DevTools was crashing every time on the same spot. On Chrome Canary the debugger doesn't crash.

View more solutions

Comments

[Nisanio]

But Electron does not use Firefox.

[slowhand]

Likewise for me: Google Chrome 80.0.3987.87 (64 bit) always crashing at the same point when debugging with breakpoints. Installed Google Chrome 75.0.3770.100 (64 bit) instead -> FIXED.

[Shane Gannon]

"But the origin of the problem is certainly not in a browser, as Shane Gannon said". I did not say the problem was with a browser. I said it was a syntax error. Which is unlikely to be a browser problem.

[Mario Andrés]

You're right, that's what I wanted to say actually. I have edited the sentence to make it clear.

[Nathan Goings]

I am too having issues with sqlite3 but it should work on the renderer side shouldn't it?

[Nathan Goings]

Moving the require('sqlite3') inside a function and exposing that function to the window to be called from the HTML seems to have worked. Not sure if that's the preferred way. You can see the issue here: github.com/mapbox/node-sqlite3/issues/1504

[Youth overturn]

I update Chrome Canary. It works.