Retry loading a webpage when failed in electron

Question

I'm using electron to display some webpages. Below is my coding:

var app = require('app');
var ipc = require('ipc');
var BrowserWindow = require('browser-window');
var settings = require('./settings');

var mainWindow = null;

app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

app.on('ready', function(){
    var mainWindow = new BrowserWindow({
        fullscreen: true,
        autoHideMenuBar: true
     })

     mainWindow.loadUrl('file://' + __dirname + '/index.html') // FIRST WEBPAGE

    mainWindow.on('closed', function() {
    mainWindow = null;
    });

ipc.on('redirect', function(){
    mainWindow.loadUrl('http://192.168.1.10/page2')  // SECOND WEBPAGE

    mainWindow.webContents.on("did-fail-load", function() {
        console.log("did-fail-load");

        mainWindow.loadUrl('file://' + __dirname + '/index.html');   
 // REDIRECT TO FIRST WEBPAGE AGAIN
    });

});

It will first go into the first webpage, then after it received a command "redirect" from the javascript using ipc module, it will redirect to a second webpage. But I need to check whether or not the second webpage can be connected. If it cannot be connected (did-fail-load), it will go to the first webpage again. And the cycles goes on.

I use the console.log("did-fail-load") to check whether or not it had failed to connect to the second page. But I found out that it had duplicated the call. The first time it fail to connect to second webpage, there is one console.log("did-fail-load"), when it retry the second time, there is two console.log("did-fail-load") appear, and the 3rd time it retry, there is three console.log("did-fail-load") appear. Is it that it some how got duplicated calls on mainWindow?

What is the best way to retry loading a webpage when it failed in electron?

mainWindow.loadUrl('file://' + __dirname + '/index.html') works for me — Chandler Bing, May 06 '21 at 12:32

score 5 · Answer 1 · answered Mar 18 '19 at 22:11

This is an old post, but I feel the question was never actually answered for OP.

You are seeing multiple console.log messages because a new did-fail-load callback is added everytime a redirect happens. You need to add the callback only once, outside of the ipc.on('redirect') callback. Example:

app.on('ready', function(){
  var mainWindow = new BrowserWindow({
    fullscreen: true,
    autoHideMenuBar: true
  })

  mainWindow.loadUrl('file://' + __dirname + '/index.html') // FIRST WEBPAGE

  mainWindow.on('closed', function() {
    mainWindow = null;
  });

  /* Set did-fail-load listener once */
  mainWindow.webContents.on("did-fail-load", function() {
    console.log("did-fail-load");

    mainWindow.loadUrl('file://' + __dirname + '/index.html');
  });
});

/* This is called every time a redirect occurs, 
 * so don't add any listeners here. Only add code
 * to handle the redirect
 */
ipc.on('redirect', function(){
  mainWindow.loadUrl('http://192.168.1.10/page2')  // SECOND WEBPAGE
});

score 2 · Answer 2 · edited Dec 27 '18 at 19:36

You have to ask yourself the question: "Why did the load fail?" and "Would it load now?"

The why defines the best way how to check if your webpage would load. When you check the url/server before you load you make sure that it can be loaded. Then it won't be a need to reload.

From your code I would guess, that you want to check if the server inside your network is running. To do that you could use the node module node-net-ping https://github.com/stephenwvickers/node-net-ping

Install the module via npm inside your app:

npm install node-net-ping --save

Load the module on top via require:

var ping = require ("net-ping");

Check if their server is available:

var session = ping.createSession ();

session.pingHost ('192.168.1.10', function (error, target) {
    if (!error)
        // Load second page
});

Another maybe better solution is to check the request before you load the url. This is also done with the node.js part of electron. Answer is copied from here: Node.js - How to check status of a URL within a http request

var request = require('request'); 
request('http://www.google.com', function (error, response, body) {
    if (!error && response.statusCode == 200) {
      console.log("URL is OK") 
      // Load second page
    }

Depending on the answer to "Why did the load fail?" you should create the check.

Retry loading a webpage when failed in electron

2 Answers2