I am new to Electron.js and Node.js. I am building a simple inventory desktop app using Electron.js using sqlite3 module. My app crashes while the BrowserWindow is loading a new html page. Ctrl+R reload solves it.
Eg. In main.js (IPCMain), I do:
win = new BrowserWindow({
width: 1000,
height: 800,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile(appPath+'/src/html/index.html');
This loads the page alright. When I click on a link on the page to /src/html/groups.html, the Window renders a blank screen (crashes?). When I refresh (Ctrl+R), the page renders alright! This happens to each and every link. First, it crashes, and then, Ctrl+R solves it!
I tried to handle unhandled exception like so (renderer process)...
window.onerror = function(error, url, line) {
ipcRenderer.send('error-in-window', error);
};
and console.log it in the main process like this:
ipcMain.on('error-in-window', function(event, data) {
console.log(data);
});
but it didn't get caught. So I tried this in the main process and it worked...
win.webContents.on('crashed', (e) => {
console.log(e);
});
This is the log that I get:
{
preventDefault: [Function: preventDefault],
sender: WebContents {
webContents: [Circular],
history: [
'file:///D:/My%20Drive/dev/simple_inventory/src/html/index.html',
'file:///D:/My%20Drive/dev/simple_inventory/src/html/groups.html'
],
currentIndex: 1,
pendingIndex: -1,
inPageIndex: -1,
_events: [Object: null prototype] {
'navigation-entry-committed': [Function],
'-ipc-message': [Function],
'-ipc-invoke': [Function],
'-ipc-message-sync': [Function],
'-ipc-ports': [Function],
'pepper-context-menu': [Function],
crashed: [Array],
'render-process-gone': [Function],
'devtools-reload-page': [Function],
'-new-window': [Function],
'-add-new-contents': [Function],
login: [Function],
move: [Function],
activate: [Function],
'page-title-updated': [Function],
'render-view-deleted': [Array]
},
_eventsCount: 16,
_maxListeners: 0,
browserWindowOptions: { width: 1000, height: 800, webPreferences: [Object] }
}
}
I tried on both Ubuntu as well as Windows 10. I get the same error. I think the problem is with sqlite3 module, because when I comment out the db queries, it works alright!
Any help would be greatly appreciated!
Edit: Adding source code of groups.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Simple Inventory</title>
<!-- Bootstrap loading -->
<link rel="stylesheet" href="../lib/bootstrap-4.0.0/dist/css/bootstrap.css" />
<link rel="stylesheet" href="../css/style.css" />
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Simple Inventory</h3>
</div>
<div id="menuHolder">
</div>
</nav>
<div id="content" style="width:100%">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-secondary">
<i class="fas fa-align-left"></i>
<span>Menu</span>
</button>
</div>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="./index.html">Home</a></li>
<li class="breadcrumb-item">Master</li>
<li class="breadcrumb-item active" aria-current="page">Groups</li>
</ol>
</nav>
<div class="container-fluid" style="padding:20px;" id="contentDiv">
</div>
</div>
</div>
<!-- Bootstrap and jQuery loading -->
<script src="../lib/jquery-3.5.1/jquery-3.5.1.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
<script src="../lib/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/groups.js"></script>
</body>
</html>
groups.js (which is actually causing the crash)
const remote = require('electron').remote;
const ipcRenderer = require('electron').ipcRenderer;
const app = remote.app;
const commonModule = require('../../src/modules/commonModule.js');
const inventoryModule = require('../../src/modules/inventoryModule.js');
$(document).ready(()=>{
// Load side menu
commonModule.loadSideMenu('groups', (err, html)=>{
$('#menuHolder').html(html);
});
inventoryModule.getGroups((err, result) => {
if(err) {
$('#contentDiv').html('Error fetching data!');
console.log(err);
} else {
let resultHTML = `<table class="table table-sm table-light table-hover">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
</tr>
</thead>
<tbody>`;
let count = 0;
for(let key in result) {
if(result[key].id) {
count++;
resultHTML += `<tr class="groupRow clickable" id="row_${result[key].id}">
<td>${count}</td>
<td>${result[key].name}</td>
</tr>`;
}
}
resultHTML += `</tbody>
</table>`;
resultHTML += `<br />
<div class="container text-center">
<button class="btn btn-secondary" onclick="newGroup()">New Group</button>
</div>`;
$('#contentDiv').html(resultHTML);
}
})
});
$(document).on("click","tr.groupRow", function(e){
let groupID = commonModule.getRowID(e);
ipcRenderer.send('open-new-window', 'groupsDialog.html', [`id=${groupID}`], 800, 600);
});
window.onerror = function(error, url, line) {
ipcRenderer.send('error-in-window', error);
};
function newGroup() {
ipcRenderer.send('open-new-window', 'groupsDialogNew.html', [], 800, 600);
}
/src/html/groups.html- Alexander Leithner