Clean up Electron win listeners on app reload

[AtiqGauri]

Using events in renderer process throw error on development console
saying Attempting to call a function in a renderer window that has been closed or released.

win.on('maximize', toggleMaxRestoreButtons);
win.on('unmaximize', toggleMaxRestoreButtons);

This will cause error because you haven't cleaned up correctly and a listener exists on a remote object from a renderer that does not exist any more.

Solution - Avoid using remote or clean up your event handlers on remote objects if you have to use it

Add event remover in your code where you had added events code

window.onbeforeunload = (e) => {
    win.removeAllListeners();
};

This will remove ALL listeners attached to your window before unloading it.

Note - onbeforeunload will be called before page is refreshed or closed.

Screenshot-

Conclusion- update tutorial to adapt to solution

To reproduce-

This is not same as your tutorial but here too I am using win.on events for blur and focus and it throws errors.
https://gist.github.com/AtiqGauri/1cea1c548025faa77f9f29008ca5a5fe#file-main-js-L4

[Toby56]

Yeah I have implemented window.onbeforeunload / win.removeAllListeners(); in my own app because I was getting annoying warnings when react autoreloaded. It's a good idea.

[binaryfunt]

Implemented in 73a24df

[Toby56]

There is a problem with this, it's pretty likely you might have other event listeners on the win object that you might not want removed just because the webpage reloaded. Maybe only remove the ones that are for the window buttons?

[Toby56]

Not hard, even if you have a lot of events like this XD:

win.removeListener("page-title-updated", updateTitle);
win.removeListener("maximize", toggleMaximized);
win.removeListener("unmaximize", toggleMaximized);
win.removeListener("blur", toggleBlurred);
win.removeListener("focus", toggleBlurred);
win.removeListener("enter-full-screen", toggleFullScreen);
win.removeListener("leave-full-screen", toggleFullScreen);

[binaryfunt]

I suppose so... Perhaps one could even do something like

// Near top of file:
const trackedListeners = [];

// Later:
function addTrackedListener(win, event, handler) {
    win.on(event, handler);
    trackedListeners.push({'event': event, 'handler': handler});
}

function removeTrackedListeners(win) {
    for (listener of trackedListeners) {
        win.removeListener(listener.event, listener.handler);
    }
}

[Toby56]

Everything including adding and removing the listeners as well as the functions themselves:

let events = {
  "page-title-updated": () =>
    (document.getElementById("titlebar-text").innerHTML = document.title),
  "maximize, unmaximize": () =>
    document.body.classList[win.isMaximized() ? "add" : "remove"]("maximized"),
  "blur, focus": () =>
    document.body.classList[win.isFocused() ? "remove" : "add"]("blurred"),
  "enter-full-screen, leave-full-screen": () =>
    document.body.classList[win.isFullScreen() ? "add" : "remove"]("full-screen")
};

for (const event in events) {
  events[event]();
  event.split(", ").forEach(eventSplit => {
    win.on(eventSplit, events[event]);
    window.addEventListener("beforeunload", () => {
      win.removeListener(eventSplit, events[event]);
    });
  });
}