I have created built in both windows and ubuntu,the app runs properly. But when build in mac, the build is created successfully but it shows just white blank screen no html page rendered. while when run using npm start it runs perfectly. I have problem only with mac build

below is the package.json

{
  "name": "collab",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "homepage": "someurl",
  "scripts": {
    "start": "electron .",
    "dist:linux": "electron-builder --linux",
    "dist:windows": "electron-builder --windows",
    "dist:mac": "electron-builder -m",
    "postinstall": "electron-builder install-app-deps",
    "package": "electron-packager . --production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@slack/web-api": "^6.7.2",
    "auto-launch": "^5.0.5",
    "axios": "^0.27.2",
    "base64-img": "^1.0.4",
    "dotenv": "^16.0.1",
    "electron-log": "^4.4.8",
    "ext-ip": "^0.3.9",
    "geoip-lite": "^1.4.5",
    "geolib": "^3.3.3",
    "moment": "^2.29.3",
    "mongoose": "^5.13.2",
    "open": "^8.4.0",
    "screenshot-desktop": "^1.12.3",
    "socket.io-client": "^3.0.4",
    "sqlite3": "^5.1.2"
  },
  "devDependencies": {
    "@types/node": "^18.0.0",
    "electron": "^11.1.0",
    "electron-rebuild": "^3.2.9"
  },
  "build": {
    "appId": "collab",
    "linux": {
      "target": [
        "deb"
      ],
      "icon": "build/icons/icon_256x256.png",
      "category": "Utility"
    },
    "mac": {
      "target": "dmg",
      "icon": "build/icons/icon_512x512.png"
    },   
  }
}

Few functions that I use in app.js

app.whenReady().then(() => {
    connectivityCheck();
});
function connectivityCheck() {
    connectivityInterval = setInterval(function () {
        dns.resolve("www.google.com", function (err, addr) {
            if (err) {
                let reminder = new Notification({
                    title: 'Collab:Error',
                    body: 'No internet connectivity found'
                });
                reminder.show();
            } else {
                let reminder = new Notification({
                    title: 'Collab',
                    body: 'Internet connection found'
                });
                reminder.show();
                connectivityStatus = true;
                appReadyProcess();
            }
        });
    }, 10000);
}
function appReadyProcess() {
    setUpWindow().then(() => {
        askPermission().then(() => {
            if (connectivityStatus) {
                clearInterval(connectivityInterval);
                manageDBConnection();
            }
        });
    });
}
function manageDBConnection() {
    connectDB(process.env.MONGO_URI).then(() => {
        socket.emit("join-message", "hello");
        open(process.env.SERVER_URL   "/setLocation");
        loginScreen();
        verifyUserTimer();
    }).catch((err) => {
        appLogs.error(err);
    });
}

Few functions that i use in method.js file

function setUpWindow() {
    return new Promise((resolve, reject) => {
        if (BrowserWindow.getAllWindows().length === 0) {
            window_app = new BrowserWindow({
                width: 500,
                height: 660,
                resizable: false,
                webPreferences: {
                    nodeIntegration: true,
                },
            });
            window_app.removeMenu();
            //window_app.webContents.openDevTools(); // Opening inspect elements    
            window_app.tray = new Tray(nativeImage.createEmpty());
            const menu = Menu.buildFromTemplate([
                {
                    label: "Actions", submenu: [
                        {
                            label: "Open Collab", click: (item, window, event) => {
                                window_app.show();
                            }
                        },
                    ]
                },
                { type: "separator" },
                {
                    label: 'Quit', click: function () {
                        window_app.removeAllListeners('close');
                        window_app.close();
                        app.quit();
                    }
                }
            ]);
            window_app.tray.setContextMenu(menu);
            window_app.icons = new BrowserWindow({
                show: false, webPreferences: { offscreen: true }
            });
            window_app.icons.loadURL("https://trends.google.com/trends/hottrends/visualize");
            window_app.icons.webContents.on("paint", (event, dirty, image) => {
                if (window_app.tray) window_app.tray.setImage(image.resize({ width: 16, height: 16 }));
            });
            window_app.on('close', (event) => {
                if (app.quitting) {
                    window_app = null
                } else {
                    event.preventDefault()
                    window_app.hide()
                }
            });
            resolve(true);
        }
    }).catch((err) => {
        logs.error(err);
    });
}
function askPermission() {
    return new Promise((resolve, reject) => {
        if (process.platform === 'darwin' || process.platform === 'win32') {
            systemPreferences.getMediaAccessStatus('screen');
            resolve(true);
        } else {
            resolve(true);
        }
    }).catch((err) => {
        logs.error(err);
    });
}
function loginScreen() {
    let login = false;
    new Promise((resolve, reject) => {
        db = new DBFuntions();
        query = "select * from user_data";
        db.getDetails(query).then((data) => {
            if (data.length === 0) { // || (Number(data[0].expire_token_date) < currentTs)
                login = true;
            }
            let filename;
            if (login) {
                filename = `file://${__dirname}/login.html`;
                window_app.loadURL(filename);
            } else {
                getUserByEmail(data[0].email).then((DBUser) => {
                    userDetails = DBUser;
                });
                filename = `file://${__dirname}/index.html`;
                window_app.loadURL(filename);
            }
            resolve(true);
        });
    }).catch((err) => {
        logs.error(err);
    });
}

even app icon and tray icon are properly shown when app open. It works fine for windows and ubuntu only problem with mac built. while it runs properly in local/development for mac when run using npm start app.js

CodePudding user response：

I was able to solve the issue with the use of logs by using

const appLogs=require('electron-log');
appLogs.transports.console.level = false;

I was able to get the required details from the logs that helped me to solve the issue.The exception or error was generated by something else.