1. Common causes of Electron application crashes
1.1. Possible crashes caused by the JavaScript layer
1) The actual width or height of the ArrayBuffer passed to WebGL rendering is zero
2) The width or height of the picture is zero, and it is passed to Canvas for drawing.
3) For Electron 12 and below, the ArrayBuffer from the node.js C++ add-on layer must be copied once, otherwise the rendering process will crash. Related bug address: https://github.com/electron/electron/issues/15538
1.2. Device access rights
If the camera and microphone are not authorized on Mac, direct access may cause the Electron application to crash. To solve this problem, you can refer to the Tencent Cloud real-time audio and video official website scenario problem avoidance .
1.3. Crash caused by C++ layer
When there is code related to Node.js C++ add-on, this layer is very likely to cause the application to crash. Common reasons are:
1) Null pointer access
2) Array out of bounds
3) Node.js C++ add-on API error call, parameter error, etc.
2. Electron application crash handling method
2.1. JavaScript layer causes crash
For crashes caused by JavaScript, you need to find the path where the crash occurs. Step-by-step debugging can basically find the cause of the problem, and you can avoid it by doing some defensive programming.
2.2. Crash caused by Node.js C++ add-on layer
The crash caused by this time is generally difficult to troubleshoot, especially for front-end developers. The solution given here is:
(1) Turn on the Electron Crash Reporter function, obtain the crash stack, and analyze the contents of the stack;
(2) Monitor Electron crash related events and record crash logs.
2.2.1. Open Electron Crash Reporter
After being started, you can collect the crash stack of Electron applications. Electron Crash Reporter supports uploading crash stacks to online third-party service platforms. Users can also upload their own servers through configuration (the server needs to be developed by themselves), or they can only generate crash stacks . The crash stack file is local and used to troubleshoot crash issues. The following will only introduce how to generate the crash stack file locally.
2.2.1.1. Enable crash stack file generation and obtain the crash file storage path.
You need to add the following code at the beginning of the JavaScript code of the main process to enable the Electron Crash Reporter capture function.
const { app, BrowserWindow, crashReporter, ipcMain, systemPreferences } = require('electron');
const path = require('path');
// 获取崩溃堆栈文件存放路径
let crashFilePath = '';
let crashDumpsDir = '';
try {
// electron 低版本
crashFilePath = path.join(app.getPath('temp'), app.getName() + ' Crashes');
console.log('————————crash path:', crashFilePath);
// electron 高版本
crashDumpsDir = app.getPath('crashDumps');
console.log('————————crashDumpsDir:', crashDumpsDir);
} catch (e) {
console.error('获取崩溃文件路径失败', e);
}
// 开启crash捕获
crashReporter.start({
productName: 'Your-Application-Name',
companyName: 'Your-Company-Name',
submitURL: 'https://www.xxx.com', // 上传到服务器的地址
uploadToServer: false, // 不上传服务器
ignoreSystemCrashHandler: false, // 不忽略系统自带的崩溃处理，为 true 时表示忽略，崩溃时不会生成崩溃堆栈文件
});The above code does not guarantee that the crash stack will be collected every time it crashes , but if the crashes are frequent, it is likely to be generated during a certain crash . If you find that a crash stack is generated, do not turn a blind eye. , for occasional crash problems, the crash stack file is very helpful in locating and troubleshooting the problem.
2.2.1.2. Write the crash stack file storage directory to the rendering process log
For applications executed through the installation package, the logs of the Electron main process are usually invisible or difficult to read (you can use the Node.js file API to write local log files). You can print the storage path of the crash stack file to the console of the rendering process. Convenient for inquiry. See the code below for implementation.
After the main process window loads the page, add the following code:
mainWindow.webContents.on('did-finish-load', function(event){
mainWindow.webContents.send('crash-file-path', `${crashFilePath} or ${crashDumpsDir}`);
});Add the following code to the rendering process preload:
const { ipcRenderer } = require('electron');
ipcRenderer.on('crash-file-path', (event, args) => {
console.warn('crash-file-path:', args);
});Examples of crash files and crash file path logs are as shown below. Crash files may be in the new, completed, or pending directories under the crash file storage directory:
2.2.2. Monitor Electron rendering process and GPU process crash events
Electron provides an event interface for monitoring the crashes of rendering processes and GPU processes. By monitoring these events, you can know when a crash occurs. However, the specific cause of the crash is generally not visible. You need to obtain the dump file of the crash stack.
In the startup script of the Electron main process, add the following code to monitor crash events and write these logs to local files.
Note: The rendering process may have crashed at this time and cannot be sent to the rendering process to print to the console of the window. It is best to write the log of the crash
app.on('gpu-process-crashed', (event, kill) => {
console.warn('app:gpu-process-crashed', event, kill);
});
app.on('renderer-process-crashed', (event, webContents, kill) => {
console.warn('app:renderer-process-crashed', event, webContents, kill);
});
app.on('render-process-gone', (event, webContents, details) => {
console.warn('app:render-process-gone', event, webContents, details);
});
app.on('child-process-gone', (event, details) => {
console.warn('app:child-process-gone', event, details);
});Note: event and webContents objects write files directly, and can be written after JSON.stringify().
2.2.3 Crash stack file analysis
The analysis of the crash stack file requires the symbol file when compiling the Node.js C++ add-on program. It is a pdb file under WIndows and a dSYM file under Mac. You need to find a relevant C++ developer to handle it. To analyze the crash stack file, you need to provide: crash stack file, SDK version number, operating system platform information, and SDK local log (optional, preferably provided).