我是 Electron.js 和 Node.js 的新手。我正在使用 Electron.js 使用 sqlite3 模块构建一个简单的库存桌面应用程序。当 BrowserWindow 加载新的 html 页面时，我的应用程序崩溃了。 Ctrl+R reload 解决了。
例如。在 main.js (IPCMain) 中，我这样做:
win = new BrowserWindow({
width: 1000,
height: 800,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile(appPath+'/src/html/index.html');
我试图像这样处理未处理的异常(渲染器进程)......
window.onerror = function(error, url, line) {
ipcRenderer.send('error-in-window', error);
};
ipcMain.on('error-in-window', function(event, data) {
console.log(data);
});
win.webContents.on('crashed', (e) => {
console.log(e);
});
{
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] }
}
}
任何帮助将不胜感激!
编辑 : 添加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>
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);
}
最佳答案
这使应用程序崩溃。 const sqlite3 = require('sqlite3').verbose();注释掉该行会删除该功能，但不会导致渲染器崩溃。崩溃与 node-pre-gyp 有关。 :
Electron crashes when requiring sqlite3 native module in forked process
我用过 Electron 9.1.1 和 sqlite3 5.0.0。但是，从 sqlite3 npm 页面 (https://www.npmjs.com/package/sqlite3)，
The sqlite3 module works with Node.js v11.x, v12.x, v13.x and v14.x. Electron v6.0.x, v6.1.x, v7.0.x, v7.1.x, v8.0.x, v8.1.x and v8.2.x
我将 Electron 版本更改为 8.2.0，现在可以正常工作了。
关于node.js - Electron 应用程序渲染器进程在加载新的 html 页面时崩溃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63101970/