1. grapswiz

    Posted

    grapswiz
Changes in title
+ユーザのブラウザで起きた JavaScript のエラーを収集する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,79 @@
+## なぜエラーを収集するのか
+
+- バグ探し
+ - バグを見つけて潰していくため
+- ユーザからのバグ報告の補助
+ - ユーザに報告の負担をかけないため
+
+## エラーを取得する
+
+### 取得タイミング
+
+- `window.onerror`
+- フレームワーク毎の特定のタイミング
+
+#### `window.onerror`
+
+`window.onerror` にメソッドを登録しておくことでエラー発生時にそのメソッドが呼ばれる。try-catch でハンドリングしていないエラーが流れてくる。
+
+```javascript
+window.onerror = (message, file, lineNo, colNo, error) => {
+}
+```
+
+古いブラウザでは [error オブジェクト](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)が取得できないので注意すること。
+
+#### フレームワーク毎の特定のタイミング
+
+使用しているフレームワークによっては `window.onerror` でエラーを取得できない場合がある。例えば Angular では `ErrorHandler` として実装する必要がある。
+[Sentry のサイト](https://docs.sentry.io/clients/javascript/integrations/) を見ると各フレームワークでの雰囲気が掴める。
+
+### 取得する情報
+
+- スタックトレース
+- UserAgent
+- URL
+- 現象が起きたページ ID
+ - URL を割り振っていない場合とか
+- ユーザ情報
+ - 無名化
+- その他有るとバグの特定に便利なものを見つけたら教えてください
+
+#### stacktrace.js
+
+`window.onerror` で取得したエラー情報をそのまま文字列で送ってもいいけどライブラリを使うともっと扱いやすい。
+[stacktrace.js](https://www.stacktracejs.com/) を使うと sourcemaps を解釈してくれるので大変便利。
+sourcemaps ファイルを非公開にしている場合は [Sentry 等の仕組み](https://docs.sentry.io/clients/javascript/sourcemaps/#uploading-source-maps-to-sentry)に乗るか stacktrace.js 以外を検討する必要あり。
+
+## エラーを収集する
+
+### 収集先の選別
+
+- エラー収集系サービス
+ - [一覧](https://github.com/cheeaun/javascript-error-logging)
+ - 大抵 `window.onerror` でなく個別の仕組みが用意されている
+ - 既に使ってるサービスがあればそこに JavaScript のエラーも投げつけると良さそう
+- 自前サーバ
+ - Ajax でエラー内容を送りつける
+
+### 自前サーバに投げるときの注意点
+
+別ドメインにある JavaScript ファイルを読み込んでいる場合 CORS を突破する必要がある。
+さもないとエラー内容が全て `Script error.` に置き換わってしまう。とても悲しい。
+
+対応しないといけないのは以下の2つ。
+
+- crossorigin 属性
+- CORS ヘッダ
+
+#### crossorigin 属性
+
+スクリプトを読み込んでいる箇所に `crossorigin="anonymous"` を付与する。
+
+```html
+<script src="http://another-domain.com/app.js" crossorigin="anonymous"></script>
+```
+
+#### CORS ヘッダ
+
+JavaScript ファイルを提供するサーバのレスポンスに `Access-Control-Allow-Origin` ヘッダを付与する。