How to prevent crashing app while using IOHOOK in electron app

Introduction

Building a robust and crash-free application is paramount in the front-end development landscape. Iohook, a Node.js module for intercepting keyboard and mouse input, allows developers to build cross-platform desktop applications with Electron apps, a framework for building cross-platform desktop applications.

Although iohook can be helpful in Electron apps, maintaining stability can be challenging. In this blog, you will learn best practices, strategies, and how to prevent crashing apps while using IOHOOK in Electron apps. And how a crash-resistant system is maintained when integrating iohook functionality into the electron application.

What are electron apps?

Electron framework uses web technologies like HTML5, CSS3, and JavaScript to build desktop applications that are intended to run on various platforms with a single codebase. Moreover it incorporates chromium for drawing and NODE. JS for backend functionalities, which gains developers the ability to develop their own apps for Windows, MacOS, and Linux using the same development tools they already know.

Understanding the Challenge of Electron-based Apps

Developers must understand the challenges of integrating iohook into apps that use electron. If handled incorrectly, chromium and Node.js combine in Electron’s architecture, which can result in memory leaks, performance issues, and crashes. Iohook can disrupt an app’s stability while providing powerful input interception when not appropriately handled.

1. Leveraging Memory Management

The building Applications With Electron that makes use of Electron requires efficient memory management to avoid the application crashing in the event of a memory leak. In addition, developers can adopt garbage collection techniques presented in Node JS packages. js for use in managing allocation of memory resources for the app to meet the stability target for electron. Applied models such as ChromeDev can plot memory usage and the developers can observe how the memory is employed. This provides a clue on how to fix and optimize memory leaks and enhance the application ability to migrate.

2. Thorough Testing and Error Handling

Testing the applications produced based on Electron is a must for developers. Along with, they need to create the all-inclusive test cases that join various usage situations, like interactions iohook. Apart from that, developers are able to take advantage of the automated testing frameworks like Spectron that helps in overcoming the challenges. Reinforce user input validation mechanisms to handle situations where unpredicted data is entered by the user, to prevent system crashes.

3. Isolating and Sandboxing

Determining and separating the unstable sources within your Electron desktop application will stop the crashes and make the application run better and without outages. Electron’s context isolation enables you to cap at different render processes the hooks-specific code of IOhook. On top of that, this makes electron apps more sensitive to disruptions of iohook interactions.

4. Prioritize Regular Updates

Electron and iohook ecosystem development is multifaceted, as it is often necessary to improve security issues and stabilize the system manually. As for the developers, they should constantly ensure their electron-based apps are updated which guarantees the stable functioning of the app. Additionally, staying updated provides several benefits to the developers such as bug fixes, reliability improvements, and improves performance.

5. Optimize Performance

The performance bottlenecks often lead to electron app crashes. Furthermore, developers must leverage performance profiling tools to recognize resource-intensive areas. Additionally, optimize code performance, and reduce unnecessary computations to accelerate the entire process. It will enhance user experience and minimizes the chances of app crashes caused by resource exhaustion.

Understanding the iohook Library

Before we dive into the strategies for preventing app crashes, let’s get a clear idea about the iohook library. iohook is a Node.js native module that captures input events at a low level and streamlines the tasks like keyboard and mouse event monitoring. Additionally, this capability empowers the functionality of apps made with the electron and enhances the possibility of stability issues.

1. Purpose of use Iohook

Iohook handles the keyboard and mouse activity of users so the admin can keep track of the activity of users’ work.

Admin can count percentages of user’s activity during the work.

From this percentage, the admin can easily figure out the activity of users.

2. Configuration & Installation steps

Before installing the iohook package module, you will need to set a runtime version in your package.json.

When developing, you will need the Node.js runtime.

In production, your Electron app will need the Electron version.

Check out your ABI for node.js or electron (opens new window). The example below uses Node.js v12.X and Electron v8.X

For knowing the target of node and electron follow the below steps.

Install this package node-abi: npm install node-abi

• Import this module for usage : const nodeAbi = require(‘node-abi’)

• Get target of node and electron like this : nodeAbi.getAbi(‘7.2.0’, ‘node’) //51 nodeAbi.getAbi(‘1.4.10’, ‘electron’) //50

• Also you can get version of node and electron by giving target as an argument : Ex. nodeAbi.getTarget(’51’, ‘node’) // ‘7.2.0’ nodeAbi.getTarget(’50’, ‘electron’) // ‘1.4.15’

• Also you can get all target by using this syntax : Ex. nodeAbi.allTargetsOutput. [ { runtime: ‘node’, target: ‘0.10.48’, abi: ’11’, lts: false }, { runtime: ‘node’, target: ‘0.12.17’, abi: ’14’, lts: false }, { runtime: ‘node’, target: ‘4.6.1’, abi: ’46’, lts: true }, { runtime: ‘node’, target: ‘5.12.0’, abi: ’47’, lts: false }, { runtime: ‘node’, target: ‘6.9.4’, abi: ’48’, lts: true }, { runtime: ‘node’, target: ‘7.4.0’, abi: ’51’, lts: false }, { runtime: ‘electron’, target: ‘1.0.2’, abi: ’47’, lts: false }, { runtime: ‘electron’, target: ‘1.2.8’, abi: ’48’, lts: false },

  { runtime: 'electron', target: '1.3.13', abi: '49', lts: false },
                           { runtime: 'electron', target: '1.4.15', abi: '50', lts: false }
                           ]

Now you know your target of node and electron. Now added below configuration inside package.json file.

"iohook": {
                               "targets": [
                                     "Node-72",
                                   "Electron-76"
                                     ]
                                "platforms": [
                                     "win32",
                                     "darwin"
                                     "linux"
                                     ],
                                "arches": [
                                    "x64",
                                    "ia32"
                                     ]
                         }

After the above configuration, put it inside the package.json file. Install the iohook package using npm i iohook. It will add dependencies inside the package.json file.

“dependencies”: {

“iohook”: “^0.9.0”

}

Installation was done.

3. Available events in the iohook package

• Keypress (NOT WORKING AT THIS MOMENT, USE keydown/keyup)

Calls when the user presses and releases a key. Event contain next object: {keychar: ‘f’, keycode: 19, raw code: 15, type: ‘keypress’}

• keydown

Calls when the user presses a key. Event contain next object: { keychar: ‘d’, keycode: 46, rawcode: 8, type: ‘keydown’ }

• Keyup

Calls when the user releases a key. Event contain next object: {keychar: ‘f’, keycode: 19, rawcode: 15, type: ‘keup’}

• Mouseclick

Calls when the user clicks the mouse button. Event contain next object: { button: 1, clicks: 1, x: 545, y: 696, type: ‘mouseclick’ }

• Musedown

Calls when the user presses and releases a key. Event contain next object: { button: 1, clicks: 1, x: 545, y: 696, type: ‘mousedown’ }

• Mouseup

Calls when the user presses and releases a key. Event contain next object: { button: 1, clicks: 1, x: 545, y: 696, type: ‘mouseup’ }

• Mouse move

Calls when the user presses and releases a key. Event contain next object: { button: 0, clicks: 0, x: 521, y: 737, type: ‘mousemove’ }

• Mouse drag

Calls when the user presses and releases a key. Event contain next object: { button: 0, clicks: 0, x: 373, y: 683, type: ‘mousedrag’ }

• Mouse wheel

Calls when the user presses and releases a key. Event contain next object: { amount: 3, clicks: 1, direction: 3, rotation: 1, type: ‘mousewheel’, x: 466, y: 683 }

4. How to use IOHOOK In Electron Apps?

Import iohook package.

• const ioHook = require(‘iohook’); Use any one of the methods as per your requirement.

• ioHook.on(‘mousemove’, (event) => { console.log(event); // { type: ‘mousemove’, x: 700, y: 400 } });

Now Register and start the hook.

• ioHook.start();

5. Issues I face

Normally, Iohook code we place in the electron file. and It’s working fine in both os windows and mac.

It gives accurate keycodes of pressed keys by a user and left/right click information of mouse activity.

But in mac, when you press the caps lock key and some media keys, it crashes the electron application. All other keys are working fine.

6. The solution I find (IOHOOK In Electron Apps)

For mac, you have to place your iohook code inside the renderer process, which means inside react.js, the main entry point file where you have your routes. And after that, you send these activity details using ipcRenderer to the electron file.

After placing iohook code inside the renderer process file then it won’t crash the application and gives proper accurate keyboard and mouse events data.

You can see the code in below attachment snap.

class App extends PureComponent{
                         componentDidMount(){
                         const ipcRenderer = window.require('electron').ipcRenderer;
                         let system = ipcRenderer.sendSync('getSystem');
               
                         if(system == 'Mac'){
                         const ioHook = window.require('ioHook');
                         ioHook.start();
               
                         ioHook.on('mouseclick',(event) => {
                         if(event.button == 1){
                         ipcRenderer.sendSync('mouseLeftClick');
                         }
                         if(event.button == 2){
                         ipcRenderer.sendSync('mouseRightClick');
                         }
                         });
                         ioHook.on('mouseWheel',(event) => {
                         if(event.rotation == -1){
                         ipcRenderer.sendSync('mouseUpWheel');
                         }
                         if(event.rotation == 1){
                         ipcRenderer.sendSync('mouseDownWheel');
                         }
                         });
                         ioHook.on('keydown',(event) => {
                         ipcRenderer.sendSync('keyboardKeydown');
                         });

After applying the above solution, Now, Iohook is working fine.

Best Practices for Preventing Crashes

Below we highlighted a few tips to prevent crashes in electron apps.

1. Thorough Error Handling

Handling the errors is the cornerstone of preventing crashes in your Electron-based app. Furthermore, developers can handle errors by executing thorough error-handling mechanisms to prevent your application from crashing unexpectedly. Additionally, developers should leverage try-catch blocks and robust error messages to provide meaningful feedback to users.

2. Memory Management

Developers should follow best memory management practices to prevent memory leaks and crashes. Furthermore, developers should release resources properly when working with iohook. Failure to release resources will lead to excessive memory consumption and app crashes.

3. Testing and Quality Assurance

Developers should conduct comprehensive testing to examine and resolve crash-inducing scenarios. Furthermore, prepare various use cases and perform unit, integration, and end-to-end tests.

Additionally, Continuous integration and continuous deployment (CI/CD) pipelines allow developers to test the code thoroughly before delivering it in the production environments.

How Bigscal helps in building electron projects?

Bigscal is a reputable company that offers top-notch Software Development Services, with a particular focus on creating electron apps for businesses.

With expertise in building cross-platform applications, we empower companies to deliver robust, user-friendly software. Our solutions ensure optimal performance and scalability, enabling businesses to engage users across various devices and platforms.

Conclusion

In this blog post, we provide developers with practical tips, best practices, and real-life examples to help them avoid common pitfalls while integrating Iohook into their electron applications without crashes or performance issues.

FAQ