Network Error Loggingでブラウザのネットワークエラーを検知する

20180528 追記
Chrome devに来たので試した
asnokaze.hatenablog.com

20180301 追記
結構代わりました
NELヘッダは、json形式で表現するようになりました。また、report APIに準拠する形になりました

NEL: {"report-to": "network-errors", "max-age": 2592000}
report-to: { "url": "https://asnokaze.com/report", "group": "network-errors", "max-age": 10886400 }

Webアプリケーションの特性を測定することは非常に大切だが、DNSによる名前解決・接続のタイムアウト・接続のリセットといったユーザ側による読み込み失敗などを知るすべはありません。

Network Error Loggingでは、ユーザエージェントにネットワークエラーをレポートする仕組みを定義することでそのような問題を解決する。

Network Error Logging

現在W3Cでは仕様策定がすすんでおり、現在 Draft 05(http://www.w3.org/TR/2015/WD-network-error-logging-20150305/)となっている。

NELヘッダ

以下の様に、HTTPレスポンスのNELヘッダによってユーザエージェントに通知されます。

HTTP/1.1 200 OK
...
NEL: report-uri="/report"; max-age=2592000

report-uri: レポートを提出するURL(絶対パスでも可、複数指定も可)
max-age: このポリシーを適応する時間(秒)

このNELヘッダはTLS(証明書エラーなど無い)を使用された信頼できるオリジンである必要がある。

レポート形式

{
  "nel-report": [
   {
      "uri": "https://widget.com/thing.js",
      "referrer": "https://www.example.com/",
      "server-ip": "234.233.232.231",
      "protocol": "",
      "status-code": 0,
      "elapsed-time": 143,
      "age": 0,
      "type": "http.dns.name_not_resolved"
    }
  ]
}

ぱっと見でだいたいわかるが