超簡単！BugSenseでスマホアプリ/サイトのクラッシュ統計をとろう

諏訪悠紀

2012.10.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

BugSenseとは

BugSense はスマホアプリ/サイトのクラッシュ時にレポートを送信するWebサービスです。 Android, iOS, WindowsPhone, HTML5 に対応しています。以下の3つのポイントが特長になっています。

1行で実装完了！

レポートを送信するために必要なことはライブラリを追加し、コードを1行追加するだけなので、ソースコードを汚さずにシンプルに実装することができます。

リアルタイムにレポート！

GooglePlay のクラッシュレポートなどはまとめて報告されるためタイムラグがありますが、BugSenseはクラッシュしたその時点でレポートがリアルタイムに送信されるので、バグを早期発見することができます。

統計データが分かりやすい！

クラッシュレポートの統計データは、グラフィカルに表示されるので、いつどのくらいクラッシュしたか一目で分かるようになっています。

登録手順

まずは公式ページにアクセスしましょう。

http://www.bugsense.com/

右上の「Sign Up」をクリックして新規登録ページにアクセスします。

登録フォームで必要な情報を入力するか、Googleアカウントを使用するか、いずれかの方法で登録を進めます。めんどいのでGoogleアカウントで登録してみます。登録が完了するとDaskboardページが開きます。

これで BugSense が使えるようになりました。簡単ですね！

Androidアプリで使ってみる

筆者はアンドロイダーなので、Android アプリで使ってみたいと思います。まずは先ほど開いたDashboardページから新規プロジェクトを作成します。プロジェクト名を入力し、プラットフォームを選択し、リリース用かテスト用か選択するだけです。

「Submit」をクリックするとプロジェクトが作成できます。初回時は下図のようなお知らせが表示されました。

簡単に説明すると、

ようこそ！APIキーをコピーしておきましょう。ドキュメントを読んでSDKダウンロードしてね！
わからないことがあったら FAQ を見るか直接連絡してね！
レポートはメールで受け取れるよ！あとはDashboardを更新してね！

という感じですね。というわけでドキュメントのリンクから SDK をダウンロードします。SDK は下記 URL からダウンロードできます。

https://www.bugsense.com/releases/android

現在の最新版は 3.0.5 のようです。jarファイルをダウンロードしたら eclipse で対象アプリのプロジェクトファイルの libs フォルダにコピーします。

あとは実装です。まずは AndroidManifest.xml にインターネットアクセスのパーミッションを設定します。

<uses-permission android:name="android.permission.INTERNET" />

そして onCreate() などの任意のタイミングで initAndStartSession() メソッドを呼びます。第一引数には Context 、第二引数には先ほどコピーしたAPIキーを渡します。

@Override
public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	// 開始
	BugSenseHandler.initAndStartSession(getApplication(), "a0429cac");
	setContentView(R.layout.activity_main);
}

あとは、、ないです。これで終わりなんです！なんてシンプルな実装なんでしょう！
本当にレポートが送信されるか心配すぎるので、わざとエラーを出してみます。

throw new OutOfMemoryError();

よく起こるやつです。これで実行するともちろんエラーで強制終了します。

Dashboardを更新してみると…クラッシュレポートが送信されています！

本当に一行のみでクラッシュレポートを送信する機能が実装できてしまいました。送信されたクラッシュレポートを見てみると、日付、OSのバージョン、アプリのバージョン、クラッシュが発生したクラス名とソース行が確認できます。クラッシュの解析に必要な最低限の情報は入っているようですね。
さらに数件のエラーを発生させてみました。

インフォグラフィックスが素敵ですね！クラッシュレポートなのにもっと発生させて変化を見たい！って思ってしまうほどです。クラッシュレポートのリストからレポートを選択すると、レポートの詳細を閲覧することができます。

クラッシュ数や発生日、バージョンなどのほかに、クラッシュの原因のエラーのスタックトレースも見ることができます。シンプルにまとまってて見やすいですね。
また Quality Metrix ページではクラッシュレポートの各項目の統計情報を概要としてまとめて閲覧することができます。

HTML5で使ってみる

HTML5でも使ってみたいと思います。まずはjsファイルをダウンロードします。

https://www.bugsense.com/releases/html5

一番簡単な実装方法は JQuery の ajaxError() でハンドリングする方法です。そのため JQuery を使用していることが最低条件になります。また、bugsense.js 内で underscore.js が使用されているので、 underscore.js もダウンロードしておきます。

http://underscorejs.org/

下記のような 404 エラーが発生する HTML を作ってみました。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <script src="jquery.js"></script>
    <script src="underscore.js"></script>
    <script src="bugsense.js"></script>
  </head>
  <body>
    <script>
    $(document).ajaxError(function(event, xhr, settings, error) {
	 	Bugsense.notify({
		    request: xhr,
		    settings: settings,
		    error: error
	  	});
	});
	$.get("test.php"); // 存在しないファイル
    </script>
  </body>
</html>

また、bugsense.js の中身も少し書き換えます。まずは 18 行目に APIキーを定義しているところがあるので、作成したプロジェクトのAPIキーに書き換えます。

this.defaults = {
	apiKey: 'APIキーを入れる', // modify me
	url: 'https://bugsense.appspot.com/api/errors?api_key=' // SSL
	// url: 'http://www.bugsense.com/api/js/errors?api_key=' // NON-SSL
};

次に、404エラーを無視しているところがあるのでそこをコメントアウトします。12〜14行目です。

// if (this.errorFilters()) {
// 	return;
// }

これでブラウザで作成したhtmlにアクセスするとエラーがレポートされます。

エラー名が Unknown になっていますが、 bugsense.js の中を修正していけばエラーの種類もレポートすることができます。その他の項目も bugsense.js の中で作っているリクエストパラメータをレポートしたい内容にカスタマイズしていく必要があります。

他のプラットフォームでも簡単に実装できます

本稿ではAndroidアプリとHTML5で実装を試してみましたが、iOS, WindowsPhone でも簡単に実装できるようです(ドキュメントを見る限り、iOSは導入までが少し複雑そう)。導入方法は公式ページのドキュメントを見ながらぜひ試してみてください。

まとめ

登録から実装までの流れをひと通り試してみましたが、特に引っかかるところもなく簡単に組み込むことができました。今回は無料ライセンスで試したのでいくつかの制約はあるものの、最低限必要な機能は含まれているので無料ライセンスでも問題はないかなぁといった感じです。クラッシュレポートがもっと見たかったり複数人で管理したいなどといった場合には有料ライセンスへのアップグレードが必要になります。
クラッシュレポートをとるしくみをシンプルに実装したい、即時的なクラッシュレポートが欲しい、統計データをもっと分かりやすくしたいなどとお考えの場合はぜひ導入を検討してみてください！