Electronのアプリが落ちたり、画面がまっしろになっってしまった時の、問題の追い方

Electron javascript

Electronアプリでのエラーの追い方。

アプリが起動もしないで落ちる時

アプリをクリックして起動したら、そのまま落ちる時。
最初に追うのは main processの初期化まわりで問題が起きていないか。
electron-logを入れて、ログ出力するのが良いと思う。


electron-logを入れる (https://github.com/megahertz/electron-log)

npm install --save electron-log

main processのjavascriptコードの上の方に、エラーを拾うコードを追加する。
便利だから、このコードは入れっぱなしでリリースしても良いと思う。 

var log = require('electron-log');

process.on('uncaughtException', function(err) {
  log.error('electron:event:uncaughtException');
  log.error(err);
  log.error(err.stack);
  app.quit();
});

electron-logで出力されたエラーログを見に行く。
↓この場所に出力されます。
アンインストール方法という資料があるなら、このログファイルを消す手順も追加しておきましょう。 

view $HOME/Library/Logs/YourAppName/log.log

画面がまっしろになる

アプリの画面がまっしろ。何も表示されない。

  • renderer process側で、読み込めていないリソースがあるか、
  • JavaScriptでエラーが起きているのではないか？

Developer Toolを開いて、エラーが起きていないか確認しましょう。

なんらかの操作をしたら、プチっとアプリが落ちる

なんらかの操作をトリガーとして、突然、アプリが落ちる。
↑で紹介した、electron-logのログに何か出てるのではないか？
例えば、このように。
このログは main process で読み込んでいるnpm moduleが見つからなかったエラー。 

[2018-10-17 20:11:26:0174] [error] Error: Cannot find module 'about-window'
    at Module._resolveFilename (module.js:485:15)
    at Function.Module._resolveFilename (/Users/taku-o/Desktop/myukkurivoice/release/myukkurivoice/MYukkuriVoice-darwin-x64/MYukkuriVoice.app/Contents/Resources/electron.asar/common/reset-search-paths.js:35:12)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)

自分はファンクションのパラメータ名と、
変数のスペル名を間違えていて、アプリが落ちる現象に遭遇したことがある。
エラーログが出なくて苦労した。

ダイナミックライブラリを読み込んで、
誤った操作した時も、もちろんアプリが無言で落ちた。
こちらは実装している人には原因がわかりやすい。

アプリにパッケージングしてない状態では動く。パッケージングすると動かない。

electron .

では正しく動作する。electron-packagerなどでアプリに固めると、動かなくなる現象。


どこで動かなくなっているかにもよるけれど、

  • 片方にしか入っていないファイルは無いか？
  • アプリケーションのapp.asarの中に、想定通りのファイルは入っているか？
# asarコマンドで、app.asarの中を覗ける
npm install -g asar
asar e YourAppName.app/Contents/Resources/app.asar dest
  • electron-packagerのコマンドオプションでasar.unpackDirを指定していて、アプリで実行した時にはファイルパスが間違っていたりしない？
  • 実行権限の必要なファイルを、app.asarの中に入れてしまっていないか
  • electron-packagerのコマンドオプションignoreで、実行に必要なファイルを指定してないか

electron-packagerのignoreオプションはRegExpのmatchです。
typescriptのファイルを除こうとして、".ts"と指定したら 

contents

という文字列にマッチして、アプリが動かなくなったことがある。

まとめ

アプリが落ちたり、エラーが出たりはしないけど、うまく動かない、は自力で追って欲しい。
まとめたら、個人開発だけど、いろんなトラブルを拾ったなぁ。