[Electron] クラッシュレポートの自動送信に対応する

Electronにはアプリがクラッシュした際に自動的にダンプファイルや各種情報を指定サーバへ送信する機能が用意されています。今回は受信サーバも含めて実装してみます。

最終的なファイル

GitHubにこのページのファイルの一覧をアップしました。必要に応じてご利用ください。

katsube/electron-sample-crashreport

https://github.com/katsube/electron-sample-crashreport

Electronでクラッシュレポートを自動的にサーバへ送信、またそれを受信するサーバのサンプル。. Contribute to katsube/electron-sample-crashreport development by creating an account on GitHub.

GitHub

基本的な原理

クライアント

メインプロセス内でcrashReporter.start()を呼ぶだけです。めっちゃ簡単ですね。引数として送信先のURLを指定します。

const { crashReporter } = require('electron')

crashReporter.start({
  submitURL: 'http://localhost:3000/receive'
});

引数

crashReporter.start()の引数はsubmitURLが必須となっていますが、任意で以下の引数を追加することができます。

compressはtrueが推奨らしくfalseにすると以下の警告が表示されます。将来的に廃止されるようですね。

(electron) Sending uncompressed crash reports is deprecated and will be removed in a future version of Electron. Set { compress: true } to opt-in to the new behavior. Crash reports will be uploaded gzipped, which most crash reporting servers support.

サーバへ任意の値を送信する

crashReporter.start()に「extra」または「globalExtra」を指定すると、その値がそのままサーバへ送信されます。

const { crashReporter } = require('electron')

crashReporter.start({
  submitURL: 'http://localhost:3000/receive',

  // メインプロセスがクラッシュ
  extra:{
    foo1: 'bar1',
    foo2: 'bar2'
  },

  // すべてのプロセスが対象（変更不可）
  globalExtra: {
    hoge1: 'fuga1',
    hoge2: 'fuga2'
  }
});

start()時ではなく任意の箇所で値を追加したい場合には専用のメソッドも用意されています。

crashReporter.addExtraParameter(key, value)

なお次の制限があるのでご注意を。

• keyの文字列長は39バイト未満
• valueは20,320バイト未満、指定できるのは文字列のみ

意図的にクラッシュさせる

開発やデバッグなどで強制的にクラッシュさせるためには以下のメソッドを実行します。これが無いと辛いですからねｗ メインプロセスとレンダラープロセスの両方で利用できます。

process.crash()

受信サーバ

クライアントからサーバへは以下のような形式で通信が行われます。

通信方式

• POSTメソッド
• multipart/form-data

クエリー

ソースコード

アプリを起動するとメインプロセス側で1秒後にクラッシュします。事前に受信サーバの方を起動してから試してください。

メインプロセス

const { app, BrowserWindow, crashReporter } = require('electron')

// クラッシュリポートを開始
crashReporter.start({
  // 必須
  submitURL: 'http://localhost:3000/receive',

  // 以降は任意
  productName: app.name,   // アプリ名
  uploadToServer: true,    // サーバにアップロードするか
  ignoreSystemCrashHandler: false, // メインプロセスで発生したクラッシュをシステムクラッシュハンドラに転送しない
  rateLimit: false,        // アップロードする回数を1時間に1度にする(Windows,macOS)
  compress: false,         // アップロード時にgzipで圧縮するか
});


let mainWin;

/**
 * ウィンドウを作成する
 */
function createWindow () {
  // ウィンドウを新たに開く
  mainWin = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // ファイルを開く
  mainWin.loadFile('public/index.html')
}

// 初期化が終了
app.whenReady().then(()=>{
  // ウィンドウを新規に作成する
  createWindow()

  // 1秒後にクラッシュ
  setTimeout(()=>{
    process.crash();
  }, 1000)
})


// すべてのウィンドウが閉じられたときの処理
app.on('window-all-closed', () => {
  // macOS以外はアプリを終了する
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// アプリがアクティブになった時の処理
// (macOSはDocのアイコンがクリックされたとき）
app.on('activate', () => {
  // ウィンドウがすべて閉じられている場合は新しく開く
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

受信サーバ

WebサーバはExpress、データの保存はNeDBで実装した例です。nodeコマンドで起動してください。

$ node serve.js

クライアントでcompressをtrueにしgzipで圧縮して送ると動きません。実装がちょっと面倒なんでサボりましたｗ

/**
 * crashReorter受信サーバ
 *
 * @version 1.0.0
 * @author M.Katsube
 */

//-----------------------------------
// 定数
//-----------------------------------
const PORT = 3000   // Webサーバのポート番号
const DATA_FILE  = 'crashlist.nedb' // クラッシュ情報のファイル
const UPLOAD_DIR = 'uploads/'       // ダンプファイルの保存先

//-----------------------------------
// モジュール
//-----------------------------------
const Datastore = require('nedb')
const multer = require('multer')
const express = require('express')
const app  = express()

//-----------------------------------
// 初期設定
//-----------------------------------
// NeDB
const db = new Datastore({filename:DATA_FILE, autoload:true});

// express
const upload = multer({dest:UPLOAD_DIR})
app.use(express.urlencoded({extended: true}))

//-----------------------------------
// ルーティング
//-----------------------------------
app.post('/receive', upload.single('upload_file_minidump'), (req, res) =>{
  const data = {
    dumpfile: req.file.filename,
    ...req.body
  }

  db.insert(data, (err, newDoc)=>{
    if (err) throw err;
  });

  res.send('OK')
});

// HTTPサーバを起動する
app.listen(PORT, () => {
  console.log(`listening at http://localhost:${PORT}`)
});

おまけ

ダンプファイルを閲覧する

macOSの場合、Google謹製のBreakpadを利用した方法を以下にまとめました。試していませんがWindowsやLinuxでも利用できるようです。

[macOS] breakpadでminidump形式のファイルを閲覧する

https://blog.katsubemakito.net/macos/breakpad

minidump形式のファイルの中身を覗きたくなったのでGoogle謹製のBreakpadをインストールしました。macOSでインストールというとアイコンをドラッグ＆ドロップか、次へボタンを連打する方式を思い浮かべますが、残念ながらこの子はmakeコマンドでコンパイルする必要があります。HomeBrewにもいません(´・ω・｀)Breakpadをインストール準備コンパイラなど開発者向けのコマンドが必要になりますので、事前にXCode CommandLineToolsを入れます。すでに入っている方は次のステップへどうぞ。$ xcode-select --installリポジトリを取得普通に...

ねこの足跡R

参考ページ

• crashReporter | Electron

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま

- Sponsored Link -