0Pricing
Electron Desktop App Development · レッスン

クラッシュレポート

クラッシュログを自動的に収集・送信するクラッシュレポートを設定し、アプリケーションの重大な問題の特定と修正に役立てます。

「クラッシュレポート」はCoddyKit上の無料Electron Desktop App Developmentレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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 to true to 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!

よくある質問

「クラッシュレポート」レッスンは無料ですか？

はい。「クラッシュレポート」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Electron Desktop App Developmentコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Electron Desktop App Developmentコースには全4レッスンが含まれています。

「クラッシュレポート」で何を学びますか？

クラッシュログを自動的に収集・送信するクラッシュレポートを設定し、アプリケーションの重大な問題の特定と修正に役立てます。 ブラウザで直接実行するハンズオンコードでElectron Desktop App Developmentを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Electron Desktop App Developmentを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのElectron Desktop App Developmentは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「クラッシュレポート」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このElectron Desktop App Developmentレッスンでコードを書いて実行できますか？

はい。すべてのElectron Desktop App Developmentレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. アプリケーションのライフサイクルイベント管理
  2. 自動更新の実装
  3. クラッシュレポート
  4. ディープリンクとプロトコルハンドラー
← Electron Desktop App Developmentに戻る