Use Electron to handle form crashes and hangs

Application examples for this series of articles have been published GitHub: electron-api-demos-Zh_CN Clone or run it after downloading. Welcome to Star.

The Browser Window module will issue events when the renderer process crashes or hangs. You can listen for these events and reload them to the user, waiting for or closing the window.

Open in the browser Complete API documentation .

Overload Forms after Process Crash

Support: Win, macOS, Linux | Process: Main

In this example, we create a new window (through the remote module) and provide a link to force crash using the process.crash() method.

The current form is listening for a crash event, and when it occurs, it provides users with two options: reload or close.

Render process

const BrowserWindow = require('electron').remote.BrowserWindow
const dialog = require('electron').remote.dialog

const path = require('path')

const processCrashBtn = document.getElementById('process-crash')

processCrashBtn.addEventListener('click', function (event) {
  const crashWinPath = path.join('file://', __dirname, '../../sections/windows/process-crash.html')
  let win = new BrowserWindow({ width: 400, height: 320 })

  win.webContents.on('crashed', function () {
    const options = {
      type: 'info',
      title: 'Render process crash',
      message: 'This process has collapsed..',
      buttons: ['heavy load', 'Close']
    }
    dialog.showMessageBox(options, function (index) {
      if (index === 0) win.reload()
      else win.close()
    })
  })

  win.on('close', function () { win = null })
  win.loadURL(crashWinPath)
  win.show()
})

Overload Form after Process Hang

Support: Win, macOS, Linux | Process: Main

In this example, we create a new window (through the remote module) and provide a link to force the suspension of the process using the process.hang() method.

The current form is monitoring whether the process is really unresponsive (which may take up to 30 seconds). When this event occurs, it provides users with two options: reload or close.

Render process

const BrowserWindow = require('electron').remote.BrowserWindow
const dialog = require('electron').remote.dialog

const path = require('path')

const processHangBtn = document.getElementById('process-hang')

processHangBtn.addEventListener('click', function (event) {
  const hangWinPath = path.join('file://', __dirname, '../../sections/windows/process-hang.html')
  let win = new BrowserWindow({ width: 400, height: 320 })

  win.on('unresponsive', function () {
    const options = {
      type: 'info',
      title: 'Render process suspension',
      message: 'This process has been suspended..',
      buttons: ['heavy load', 'Close']
    }
    dialog.showMessageBox(options, function (index) {
      if (index === 0) win.reload()
      else win.close()
    })
  })

  win.on('close', function () { win = null })
  win.loadURL(hangWinPath)
  win.show()
})

Advanced skills

Wait for the process to respond again.

In the case of process suspension, the third option is to wait and see if the problem has been resolved, allowing the process to respond again. To this end, use the Browser Windows "responsive" event, as shown below:

win.on('responsive', function () {
  // What to do when the window responds again
})