Electronの一般的な問題のデバッグとトラブルシューティング

Electronアプリがクラッシュ、フリーズ、または過剰なメモリを消費する場合、根本原因を迅速に特定することが重要です。本ガイドでは、最も一般的なElectronの問題に対する実践的なデバッグ技術を提供し、最初に確認すべき項目と使用すべきツールに焦点を当てています。

レンダラープロセスのクラッシュとフリーズの診断

レンダラー問題のクイックチェック

レンダラープロセスがクラッシュまたは応答しなくなった場合、以下の即座のチェックから始めます:

1. クラッシュが発生する前にDevToolsをプログラム的に開く:

win.webContents.openDevTools({ mode: 'detach' });

2. コンソールでキャッチされていない例外を確認する - ほとんどのレンダラークラッシュは、未処理のJavaScriptエラーに起因します。

3. Chrome DevToolsのPerformanceタブでメモリ使用量を監視する - クラッシュ前のメモリスパイクを探します。

DevToolsによるレンダラープロセスのデバッグ

持続的なレンダラー問題の場合:

• クラッシュレポートを有効にする: win.webContents.on('crashed', (event) => {})を追加してクラッシュイベントをキャプチャ
• メモリスナップショットを使用する: DevTools(Memoryタブ)でヒープスナップショットを取得し、リークしているオブジェクトを特定
• テスト用にハードウェアアクセラレーションを無効にする: app.disableHardwareAcceleration() - GPU関連のクラッシュを排除

クイック検証: ハードウェアアクセラレーションを無効にして問題が消える場合、GPU問題を特定できています。

メインプロセス問題のデバッグ

VS Code Electronデバッグのセットアップ

この最小限のlaunch.jsonでメインプロセスのデバッグ用にVS Codeを構成します:

{
  "type": "node",
  "request": "launch",
  "name": "Debug Main Process",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
  "program": "${workspaceFolder}/main.js",
  "outputCapture": "std"
}

メインプロセスのトラブルシューティング

メインプロセス問題の最初のステップ:

1. stdout/stderrを確認する: "outputCapture": "std"を追加してネイティブモジュールエラーを確認
2. ライフサイクルイベントにブレークポイントを設定する (app.on('ready'), app.on('before-quit'))
3. プロセスメモリを監視する: process.memoryUsage()を使用してRSS値をログ記録

修復アプローチ:

• 高RSSの場合: 保持されているBrowserWindow参照を確認 - クローズ後にwin = nullを確実に実行
• クラッシュの場合: app.setPath('crashDumps', path)でコアダンプを有効化
• フリーズの場合: --inspectフラグとChrome DevToolsでCPU使用率をプロファイリング

メモリリークと高RSS

Electronメモリプロファイリング技術

メモリリークを体系的に特定する:

1. ヒープスナップショットを比較する: リークが疑われる操作の前後でスナップショットを取得
2. RSSとヒープを監視する: RSSにはネイティブメモリが含まれる - RSSが増加してもヒープが増加しない場合、ネイティブモジュールを確認
3. IPCリスナーを追跡する: 登録解除されていないリスナーは一般的なリーク源

IPCリスナーリーク防止

一般的なIPCメモリリークパターン:

// 悪い例: レンダリングごとに新しいリスナーを作成
ipcRenderer.on('data-update', handler);

// 良い例: アンマウント時に削除
const handler = (event, data) => { /* ... */ };
ipcRenderer.on('data-update', handler);
// クリーンアップ時:
ipcRenderer.removeListener('data-update', handler);

検証: ipcRenderer.listenerCount('event-name')でリスナー数を確認

設定とセキュリティの問題

デバッグモード露出の防止

本番環境での重要なチェック:

1. 本番環境でDevToolsを無効にする:

if (app.isPackaged) {
  win.webContents.on('devtools-opened', () => {
    win.webContents.closeDevTools();
  });
}

2. デバッグメニュー項目を削除する: 本番メニューからデバッグオプションを削除
3. remoteモジュールを無効にする: webPreferencesでenableRemoteModule: falseを設定

エスカレーションのタイミング

問題を報告する前に最小限の再現を作成します:

1. 問題を分離する: すべての非必須コードを削除
2. バニラElectronでテストする: ベースラインとしてminimal-reproを使用
3. 正確に文書化する: 正確なRSS/ヒープ数値、Electronバージョン、プラットフォームを含める

Electron/Chromiumの問題を報告する際に提供するもの:

• 最小限の再現可能なコード
• メモリ測定値(RSSとヒープ)
• 影響を受けるプロセスタイプ(main/renderer)
• 利用可能な場合はクラッシュダンプ

ベストプラクティス

3つの必須デバッグプラクティス

1. 本番ビルドを保護する: デバッグ機能を有効にする前に常にapp.isPackagedを確認。DevToolsにアクセス可能な状態で出荷しない。

2. IPCリスナーをクリーンアップする: すべてのIPCリスナーに対してクリーンアップパターンを実装。コンポーネントのアンマウント時にremoveListener()またはremoveAllListeners()を使用。

3. ヒープと並行してRSSを監視する: JavaScriptヒープスナップショットはネイティブメモリを表示しない。完全なメモリ調査には常にprocess.memoryUsage().rssを追跡。

最後のヒント: 複雑なデバッグシナリオには、electron-debugを使用して、最小限のセットアップでDevToolsショートカットやその他のデバッグ機能を追加できます。

まとめ

Electronアプリケーションのデバッグには、問題がメインプロセスとレンダラープロセスのどちらで発生しているかを特定するための体系的なアプローチが必要です。レンダラー問題用のDevToolsからメインプロセス問題用のVS Codeデバッグまで、適切なツールを使用することで、クラッシュ、メモリリーク、パフォーマンス問題を迅速に分離して修正できます。本番ビルドを常に保護し、クリーンなIPC通信パターンを維持して、一般的な問題の発生を未然に防ぐことを忘れないでください。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.