I have no idea what's going on, to be honest.

I've been keeping an eye to the icon and it just vanishes after a few minutes. No, it does not go to the arrow near the clock:

This is my icon showing up (the explosion in red):

I don't know how to debug if the icon is there but empty or if there's an event triggering it to hide, or if the tray process closes itself because of a bug. Nothing happens in the console or my app.

Could someone please help? Below is my whole index.js:

const {app, BrowserWindow, Tray, Menu} = require('electron');
const path = require('path');

var win = '',
    iconpath = path.join(__dirname, '/libs/img/icon.ico');

// Create the browser window
function createWindow () {

  // BrowserWindow size
  win = new BrowserWindow({
    width: 800,
    height: 720,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // tray menu
  var contextMenu = Menu.buildFromTemplate([
    {
        label: 'Show app', click: function () {
            win.show()
        }
    },
    {
        label: 'Quit', click: function () {
            app.isQuiting = true;
            app.quit();
        }
    }
  ]);

  // Creates tray menu with tray icon
  var appIcon = new Tray(iconpath);
  // Define menu
  appIcon.setContextMenu(contextMenu);

  win.on('close', function () {
    app.isQuiting = true;
    app.quit();
  });

  // Load the index.html of the app
  win.loadFile('./view/index.html');
}

app.on('ready', createWindow);

I have no idea what's going on, to be honest.

I've been keeping an eye to the icon and it just vanishes after a few minutes. No, it does not go to the arrow near the clock:

This is my icon showing up (the explosion in red):

I don't know how to debug if the icon is there but empty or if there's an event triggering it to hide, or if the tray process closes itself because of a bug. Nothing happens in the console or my app.

Could someone please help? Below is my whole index.js:

const {app, BrowserWindow, Tray, Menu} = require('electron');
const path = require('path');

var win = '',
    iconpath = path.join(__dirname, '/libs/img/icon.ico');

// Create the browser window
function createWindow () {

  // BrowserWindow size
  win = new BrowserWindow({
    width: 800,
    height: 720,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // tray menu
  var contextMenu = Menu.buildFromTemplate([
    {
        label: 'Show app', click: function () {
            win.show()
        }
    },
    {
        label: 'Quit', click: function () {
            app.isQuiting = true;
            app.quit();
        }
    }
  ]);

  // Creates tray menu with tray icon
  var appIcon = new Tray(iconpath);
  // Define menu
  appIcon.setContextMenu(contextMenu);

  win.on('close', function () {
    app.isQuiting = true;
    app.quit();
  });

  // Load the index.html of the app
  win.loadFile('./view/index.html');
}

app.on('ready', createWindow);

• javascript
• node.js
• electron
• trayicon

2 Answers 2

This is a well-known problem related to garbage collection, mentioned in the Electron FAQ page:

My app's window/tray disappeared after a few minutes.

So, a quick fix is to move up the declaration of the appIcon variable out of the createWindow function, next to the win variable for instance:

const {app, BrowserWindow, Tray, Menu} = require('electron');
const path = require('path');

var win = '',
    appIcon = null,
    iconpath = path.join(__dirname, '/libs/img/icon.ico');

// Create the browser window
function createWindow () {

  // BrowserWindow size
  win = new BrowserWindow({
    width: 800,
    height: 720,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // tray menu
  var contextMenu = Menu.buildFromTemplate([
    {
        label: 'Show app', click: function () {
            win.show()
        }
    },
    {
        label: 'Quit', click: function () {
            app.isQuiting = true;
            app.quit();
        }
    }
  ]);

  // Creates tray menu with tray icon
  appIcon = new Tray(iconpath);
  // Define menu
  appIcon.setContextMenu(contextMenu);

  win.on('close', function () {
    app.isQuiting = true;
    app.quit();
  });

  // Load the index.html of the app
  win.loadFile('./view/index.html');
}

app.on('ready', createWindow);

I was having the same problem, but I got the solution for this. This happens when your tray variable which is used to store the tray gets garbage collected.

You can get rid of this just by making the variable global.

In your case create appIcon variable out of the createWindow function like this:

let appIcon = null;

and then assign tray object like this:

appIcon = new Tray(iconpath);

ref: https://www.electronjs/docs/faq#my-apps-tray-disappeared-after-a-few-minutes