<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Error Dialog</title> </head> <body> <div> <h1>Use system dialogs</h1> <h3> The <code>dialog</code> module in Electron allows you to use native system dialogs for opening files or directories, saving a file or displaying informational messages. </h3> <p> This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interrupting the visible elements in your page's renderer process. </p> <p> Open the <a href="https://electronjs.org/docs/api/dialog/"> full API documentation (opens in new window) </a> in your browser. </p> </div> <div> <div> <h2>Error Dialog</h2> <div> <div> <button id="error-dialog">View Demo</button> </div> <p> In this demo, the <code>ipc</code> module is used to send a message from the renderer process instructing the main process to launch the error dialog. </p> <p> You can use an error dialog before the app's <code>ready</code> event, which is useful for showing errors upon startup. </p> <h5>Renderer Process</h5> <pre> <code> const {ipcRenderer} = require('electron') const errorBtn = document.getElementById('error-dialog') errorBtn.addEventListener('click', (event) => { ipcRenderer.send('open-error-dialog') }) </code></pre> <h5>Main Process</h5> <pre> <code> const {ipcMain, dialog} = require('electron') ipcMain.on('open-error-dialog', (event) => { dialog.showErrorBox('An Error Message', 'Demonstrating an error message.') }) </code> </pre> </div> </div> </div> <script> // You can also require other files to run in this process require("./renderer.js"); </script> </body> </html>