node.js - Electron 应用程序渲染器进程在加载新的 html 页面时崩溃

问题描述

我是 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');

这可以正常加载页面。当我单击页面上指向 /src/html/groups.html 的链接时，窗口会呈现一个空白屏幕（崩溃？）。当我刷新 (Ctrl+R) 时，页面呈现正常！这发生在每个链接上。首先，它崩溃了，然后，Ctrl+R 解决了它！

我试图像这样处理未处理的异常（渲染器进程）......

window.onerror = function(error, url, line) {
    ipcRenderer.send('error-in-window', error);
};

和 console.log 在主进程中，如下所示：

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] }
  }
}

我在 Ubuntu 和 Windows 10 上都试过了。我得到了同样的错误。我认为问题出在 sqlite3 模块上，因为当我注释掉数据库查询时，它工作正常！

任何帮助将不胜感激！

编辑：添加 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 （这实际上是导致崩溃）

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);
}

标签： node.jselectronnode-sqlite3

node.js - Electron 应用程序渲染器进程在加载新的 html 页面时崩溃

问题描述

解决方案

推荐阅读