ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime. In any application, Error, and Exception handling is a critical part of development. For Error and Exception Handling in NodeJS, Refer to the article: Exception Handling in Node. For Error and Exception Handling using JavaScript, Refer to the articles:
- Javascript | Error and Exceptional Handling With Examples
- JavaScript | Errors – Throw and Try to Catch
Most languages and platforms provide built-in support for Error and Exception handling. Developers while developing an application irrespective of the language or the platform, should take care of some of the common exceptions which can occur in code, such as Handling NULL, dividing a number by 0, etc. Developers usually generically handle exceptions and errors apart from a few specific use cases which are related to their functionality. The list of Exceptions that can be thrown is non-exhaustive. We have already covered Error and Exception handling in NodeJS and JavaScript. The same techniques can also be used while developing an Electron application. However, many times a situation arises wherein a working code might break for unknown reasons or a bug in the application may cause an Exception or an Error to be thrown which can break the execution flow. They may also possess a security issue with the application. In such cases, we need a generic way to handle these Exceptions safely without breaking the application and it should also be compliant with the native system. In this tutorial, we will look at Error and Exception handling in an Electron application using the electron-unhandled external npm package. We assume that you are familiar with the prerequisites as covered in the above-mentioned link. For Electron to work, node and npm need to be pre-installed in the system.
- Project Structure:
Example: Follow the Steps given in Dynamic Styling in ElectronJS to set up the basic Electron Application. Copy the Boilerplate code for the main.js file and the index.html file as provided in the article. We will continue building our application using the same code base. Additionally, install the electron-unhandled package using npm. Using this external package, we can catch Unhandled Errors and Promise Rejections in our Electron Applications and handle them safely.
npm install electron-unhandled --save
Also, perform the necessary changes mentioned for the package.json file to launch the Electron Application. We will continue building our application using the same code base. The basic steps required to set up the Electron application remain the same.
package.json:
{
"name": "electron-catch",
"version": "1.0.0",
"description": "Catch Unhandled Errors and Promise Rejections in Electron",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [
"electron"
],
"author": "Radhesh Khanna",
"license": "ISC",
"dependencies": {
"electron": "^8.3.0",
"electron-unhandled": "^3.0.2"
}
}Output:
Error Handling in Electron: The electron-unhandled npm package can be directly used in the Main Process and the Renderer Processes of the application to catch unhandled Errors. This package requires Electron 5+ to work without any issues. This package is compliant and works without any errors as of Electron v8.3.0 and it is regularly updated. For more detailed information on this package, version updates and changelogs, refer to the link: https://www.npmjs.com/package/electron-unhandled. This package has been adopted and is used by Electron itself for demo purposes.
- index.html: Add the following snippet in that file.
<h3>Catch Unhandled Errors and Promise Rejections in Electron</h3>
<button id="generate">
Generate Errors
</button>
<!-- Adding Individual Renderer Process file --> |
- index.js: The Generate Errors button does not have any functionality associated with it yet. In this tutorial, we will be throwing a Generic Error from the Error Interface and passing a custom message to it. To change this, add the following code snippet in the index.js file.
const electron = require('electron')
const electron = require('electron');
// Importing unhandled.const unhandled = require('electron-unhandled');
unhandled({ logger: () => {
console.error();
},
showDialog: true,
reportButton: (error) => {
console.log('Report Button Initialized');
}
});unhandled.logError(Error, { title: 'Title of the Box'
});let generate = document.getElementById('generate');
// Throwing a Generic Error from the Error Interfacegenerate.addEventListener('click', () => {
throw new Error('THIS IS AN ERROR');
}); |
Explanation: In the above application, upon clicking the HTML DOM Button element, we are throwing a new Error with a message. Since we have not used try-catch block, this is an unhandled Error and we will handle this using the electron-unhandled npm package. The unhandled(options) Instance method does not have a return type and it takes in the following parameters.
-
options: object We can pass custom configurations that define the way we want them caught Errors to be handled, printed, and reported. It consists of the following parameters.
- logger: Function (Optional) This function is an optional parameter. This parameter defines a Custom function which can be used to log/print the caught errors. It defaults to the console.error of the global console object in JavaScript. This parameter is extremely useful if we are using an external tool to track the errors such as sentry or log them to an external file on the user’s native system directory. Sentry is an Error Tracking and Performance monitoring tool for JavaScript applications.
- showDialog: Boolean (Optional) This parameter is an optional parameter. This parameter is set to true, will present a native System Error Dialog box with the title as Unhandled Error in case of errors or Unhandled Promise Rejection in case of promises. The default buttons present in the dialog box are OK, which is supported on all platforms and an additional Copy error button on the Windows platform. Besides this, we can add another Report… button which is covered below. For more detailed information on dialog boxes in Electron, refer to the article: Custom Messages in ElectronJS. By default, this dialog box is only shown in a Production staging environment i.e. when the Electron application is running in Production mode.
- reportButton: Function (Optional) This parameter is an optional parameter. This parameter when defined, will display a Report… button in the Error Dialog box as discussed in the showDialog parameter. By default, this parameter is undefined i.e. it will not be included in the Error Dialog box. This function receives an error: String as an argument representing the caught error object. The default behaviour of this function is to execute another function under the hood which redirects the user to the GitHub Issues page of the electron-unhandled package and reports the caught error to the Author of this package. This internal function makes use of the electron-util external package to redirect to the Github Issues page. The electron-util external package adds useful debugging and utility functions to the Electron application, which will be covered in a separate article. The default behavior of this function can be overridden as we have done in the above code sample. In our code, we are simply printing a Console statement with the custom message and the error object whenever this Report… button is clicked. Refer to the output for better understanding.
The electron-unhandled package also provides us with the unhandled.logError(error, options) Instance method which can be used to log/print/display caught errors in Error Handling such as in catch block of the try-catch statement. This Instance method uses the same configurations as defined in the unhandled() Instance method or calls the default configurations. Hence, in our case, we have chosen to display an Error Dialog box in the unhandled() Instance method and the same will be done for this method as well. It takes in the following parameters.
- error: Object This parameter represents the error object of the caught Error which needs to be logged.
- options: Object This parameter simply takes in a title: String parameter which represents the title of the Error Dialog box to be shown in case the showDialog parameter is set in the unhandled() Instance method configurations. By default, the title of the Error Dialog box will be displayed as: ${appName} encountered an error, where appName is the name of your Electron application as defined in the package.json file. In our case, we have simply caught a generic Error Interface which should be displayed at the start of the Electron application.
At this point, upon launching the Electron application, we should be able to see the electron-unhandled package produce two custom Error Dialog boxes, one at the launch of the application and the other at the Generate Errors button click.
Output:
