April 6, 2013

TraceKitを使ってブラウザ側でJavaScriptのエラーを購読して、エラー発生時にサーバへ送信するサンプル

昨夜、SentryをUbuntuにインストールしてみました。

UbuntuにSentryをインストールしてみた
http://madroom-project.blogspot.jp/2013/04/ubuntusentry.html

Sentryを使ってJavaScriptのエラーレポートを集計してみた
http://madroom-project.blogspot.jp/2013/04/sentryjavascript.html

SentryでJavaScriptのエラーレポート集計が可能になりますが、簡易版みたいなものを自作しようかなと考えています。そしたら、TraceKitというJavaScriptのエラーを購読出来るライブラリが有りました。Sentryもこれを使っているようです。ライセンスはMITと記されています。
https://github.com/occ/TraceKit

早速、使い方を確認してみました。JavaScriptのエラーを購読して、サーバ(PHP)に送信するまでのサンプルを書いておきます。

index.html
* tracekit.jsは前述のGitHubのURL先からDLしました。
* TraceKit自体はjQueryを必要としません。AjaxでPHPに送信する為に使用しています。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="tracekit.js"></script>
<script>
TraceKit.report.subscribe(function myLogger(errorReport) {
    console.log(errorReport);
    $.post("receiver.php", { report: errorReport } );
});
</script>
</head>
<body>
<script>
var result = undefined_1 + undefined_2;
</script>
</body>
</html>
receiver.php
<?php

file_put_contents('trace.log', print_r($_POST, true), FILE_APPEND);
index.htmlにアクセスしてJavaScriptのエラーを発生させると、その内容がreceiver.phpに送信され、trace.logへ出力されます。

trace.log
Array
(
    [report] => Array
        (
            [mode] => onerror
            [message] => Uncaught ReferenceError: undefined_1 is not defined
            [url] => http://example.com/index.html
            [stack] => Array
                (
                    [0] => Array
                        (
                            [url] => http://example.com/index.html
                            [line] => 14
                            [func] => myLogger
                            [context] => Array
                                (
                                    [0] => });
                                    [1] => </script>
                                    [2] => </head>
                                    [3] => <body>
                                    [4] => <script>
                                    [5] => var result = undefined_1 + undefined_2;
                                    [6] => </script>
                                    [7] => </body>
                                    [8] => </html>
                                    [9] => 
                                )

                        )

                )

            [useragent] => Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.43 Safari/537.31
        )

)

これは便利だ。。。

No comments:

Post a Comment