崩溃报告
设置崩溃报告，自动收集并发送崩溃日志，帮助您发现并修复应用中的关键问题
崩溃报告 是 CoddyKit 上的免费 Electron Desktop App Development 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Electron Desktop App Development 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Electron Desktop App Development 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Why Crash Reports Matter
Ever had an app suddenly close without warning? That's a crash! Crash reporting is a vital tool that automatically collects information about these unexpected errors.
This data helps developers understand what went wrong, fix bugs, and improve the stability and reliability of their applications. It's like a black box for your app!
Electron's Built-in Tool
Electron comes with a powerful, built-in crashReporter module. This module monitors your application for crashes and, when one occurs, sends a report to a designated server.
It works for both the main process (Node.js) and renderer processes (web content), ensuring comprehensive coverage.
Starting the Crash Reporter
To enable crash reporting, you need to initialize it in your main process as early as possible, typically before any windows are created. Here's how:
const { app, crashReporter, BrowserWindow } = require('electron');
// IMPORTANT: Call crashReporter.start() as early as possible
crashReporter.start({
productName: 'MyElectronApp',
companyName: 'MyCompany',
submitURL: 'http://localhost:1127/post', // Replace with your actual crash server URL
uploadToServer: true,
});
app.whenReady().then(() => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
mainWindow.loadFile('index.html');
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
// In macOS, usually re-create a window in the app when the dock icon is clicked
// For this example, we'll just ensure the app doesn't quit on macOS by default
}
});Configuring Your Reports
When you call crashReporter.start(), you provide several important options:
productName: The name of your application.companyName: Your company's name.submitURL: This is the most crucial! It's the URL of the server endpoint that will receive your crash reports.uploadToServer: Set totrueto automatically send reports.
Without a valid submitURL pointing to a server that can accept these reports, they won't be sent anywhere!
Crashing the Main Process
You can intentionally crash the main process to test your setup. The process.crash() method will terminate the process immediately, triggering the crash reporter.
Remember, this is for testing! In a real app, crashes are usually unexpected. The crash reporter will send a report even if the app completely freezes.
const { app, crashReporter, BrowserWindow } = require('electron');
crashReporter.start({
productName: 'MyElectronApp',
companyName: 'MyCompany',
submitURL: 'http://localhost:1127/post',
uploadToServer: true,
});
app.whenReady().then(() => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
mainWindow.loadFile('index.html');
// Simulate a crash after 5 seconds for testing
setTimeout(() => {
console.log('Simulating main process crash...');
process.crash(); // This will crash the app!
}, 5000);
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
// In macOS, usually re-create a window in the app when the dock icon is clicked
}
});Handling Renderer Crashes
The crashReporter also monitors your renderer processes. If a renderer process crashes (e.g., due to a JavaScript error or a native module issue in the web content), Electron will detect it.
The main process will then attempt to send a crash report, similar to a main process crash. You can listen for the 'render-process-gone' event on a BrowserWindow to detect renderer crashes.
Attaching Extra Context
Crash reports are more useful with context! You can add custom key-value pairs to your crash reports using crashReporter.addExtraParameter().
This allows you to include information like the user's ID, current application state, or specific feature flags, which can be invaluable for debugging.
const { app, crashReporter, BrowserWindow } = require('electron');
crashReporter.start({
productName: 'MyElectronApp',
companyName: 'MyCompany',
submitURL: 'http://localhost:1127/post',
uploadToServer: true,
});
// Add extra parameters BEFORE a crash occurs
crashReporter.addExtraParameter('userId', 'user123');
crashReporter.addExtraParameter('appState', 'editing_document');
app.whenReady().then(() => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
mainWindow.loadFile('index.html');
// Simulate a crash for demonstration
setTimeout(() => {
console.log('Simulating crash with extra data...');
process.crash();
}, 5000);
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
// In macOS, usually re-create a window in the app when the dock icon is clicked
}
});Receiving Crash Reports
Once Electron sends a crash report, it needs a server to receive it. This server typically stores the report and might process it further, perhaps even symbolicate the stack traces.
You can set up your own basic HTTP endpoint or use a specialized crash reporting service like Sentry, Bugsnag, or Crashlytics, which provide robust dashboards and analytics.
Best Practices & Privacy
When implementing crash reporting, keep these in mind:
- Privacy: Be careful not to send sensitive user data in crash reports.
- Consent: Inform users that crash reports are being sent and give them an option to opt-out if possible.
- Testing: Always test your crash reporting setup thoroughly to ensure reports are being sent and received correctly.
- Symbolication: For native crashes, you'll need to symbolicate the reports to get human-readable stack traces.
Crash Reporting Quiz
Test your understanding of Electron's crash reporting.
Summary & What's Next
In this lesson, you learned how to set up crash reporting in your Electron application. We covered initializing the crashReporter, configuring its options, simulating crashes, and adding extra data to reports.
Implementing crash reporting is a crucial step towards building robust and reliable desktop applications. Next, consider exploring specific crash reporting services to manage and analyze your collected data more effectively!
常见问题解答
「崩溃报告」课时是免费的吗？
是的 — 「崩溃报告」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Electron Desktop App Development 课程的其余内容，请升级到 CoddyKit PRO。 Electron Desktop App Development 课程共包含 4 节课。
「崩溃报告」这节课中我会学到什么？
设置崩溃报告，自动收集并发送崩溃日志，帮助您发现并修复应用中的关键问题 你通过在浏览器中直接运行的动手代码来练习 Electron Desktop App Development，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Electron Desktop App Development 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Electron Desktop App Development 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「崩溃报告」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Electron Desktop App Development 课中编写并运行代码吗？
能。每节 Electron Desktop App Development 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。