SPA でエラー収集・送信する。TraceKit を使ってみた

SPA の場合、「サーバサイド」がないので、SPA で発生したエラー情報を収集するにはひと手間必要だ。原始的にいえば window.onerror イベントでエラーオブジェクトの情報をどこかのサーバに Ajax 送信すれば良いワケだが、素のエラーオブジェクトをそのまま送信しただけでは問題解決の役に立たない。

そこで、今回紹介する TraceKit というツールを使って、エラー時にスタックトレースを組み立ててもらうことにする。

Bower でインストールする、なんて書いてあって、ちょっと古いライブラリだが…。

↑ コチラで CDN 配信されているので、コレを利用して CodePen でサンプルページを作ってみた。

ボタンを押すとエラーがスローされ、TraceKit で処理される。デモページではその TraceKit が生成したエラーレポートのオブジェクトをテキストエリアに出力している。

エラーが発生した関数名やコードの行数が記録される他、前後の行のコードが context 配列に載っていて良い感じ。ただこの感じだと、圧縮した JS コードを扱いづらいと思うけどね…。

自前でやるならこんな感じか。Datadog あたりが提供しているようなライブラリに任せた方が楽そうだ。w