このページは Cloud Translation API によって翻訳されました。

ネットワークエラーロギング（NEL）

Eric Bidelman

Maud Nalpas

はじめに

ネットワークエラーロギング（NEL）は、オリジンからクライアントサイドネットワークエラーを収集する。

NEL HTTP レスポンスヘッダーを使用して、ネットワークエラーを収集するようブラウザに指示し、Reporting API と統合してエラーをサーバーに報告します。

注意: サイトにネットワークエラーロギングを設定するには、Report-To ヘッダーに依存する従来の Reporting API を使用する必要があります。これは、Reporting-Endpoints ヘッダーに依存する新しい Reporting API がネットワークエラーロギングをサポートしていないためです。詳しくは、ブラウザのサポートをご覧ください。今後、ネットワークエラーロギングの新しいメカニズムが開発される予定です。この機能が利用可能になったら、従来の Reporting API から新しいメカニズムに切り替えてください。

以前の Reporting API の概要

以前の `Report-To` ヘッダー

以前の Reporting API を使用するには、Report-To HTTP レスポンスヘッダーを設定する必要があります。その value は、ブラウザのエンドポイントグループを記述するオブジェクトです。に報告できます。

Report-To:
{
    "max_age": 10886400,
    "endpoints": [{
    "url": "https://analytics.provider.com/browser-errors"
    }]
}

エンドポイント URL が自分のサイトと異なるオリジンにある場合、 CORS プリフライトリクエストをサポートする必要があります。（例: Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS; Access-Control-Allow-Headers: Content-Type, Authorization, Content-Length, X-Requested-With）。

この例では、メインページとともにこのレスポンスヘッダーを送信し、ブラウザによって生成された警告を報告するようにブラウザを設定しますエンドポイント https://analytics.provider.com/browser-errors に max_age 秒間接続します。なお、ページによって後続の HTTP リクエストはすべて、（画像、スクリプトなど）は無視されます。構成はメインページのレスポンスが返されます

ヘッダーフィールドの説明

各エンドポイント構成には、group 名、max_age、endpoints が含まれます。あります。また、レポートの作成時にサブドメインを考慮するかどうかも指定できます。 include_subdomains フィールドを使用して、すべてのエラーを検出できます。

フィールド	タイプ	説明
`group`	文字列	省略可。`group` 名が指定されていない場合、エンドポイントには「default」の名前が付けられます。
`max_age`	数値	必須。エンドポイントの存続期間（秒単位）を定義する負でない整数。値「0」エンドポイントグループは、ユーザーエージェントのレポートキャッシュから削除されます。
`endpoints`	Array<Object>	必須。レポートコレクタの実際の URL を指定する JSON オブジェクトの配列。
`include_subdomains`	ブール値	省略可。現在のオリジンのホストのすべてのサブドメインに対してエンドポイントグループを有効にするブール値。省略した場合や「true」以外の場合、サブドメインはエンドポイントに報告されません。

group 名は、文字列を関連付けるために使用される一意の名前です。エンドポイントです統合する他の場所でこの名前を使用する特定のエンドポイント・グループを参照できます。

max-age フィールドも必須です。このフィールドに、ブラウザはエンドポイントを使用してエラーを報告する必要があります。

endpoints フィールドは、フェイルオーバーとロードバランシングを行う配列です。説明します。フェイルオーバーとロードバランシングのセクションをご覧ください。です。重要な点として、ブラウザはエンドポイントを 1 つだけ選択します。グループが endpoints に複数のコレクタをリストしている場合。メッセージを送信したい場合は、同時に複数のサーバーにレポートを送信する場合、バックエンドはできます。

ブラウザはどのようにレポートを送信しますか？

ブラウザでは定期的にレポートがバッチ処理され、レポートに送信されます。構成するエンドポイントです。

レポートを送信するために、ブラウザは POST を発行します。リクエストを Content-Type: application/reports+json と、キャプチャされた警告/エラーの数です

ブラウザはいつレポートを送信しますか？

レポートはアプリから帯域外で配信されます。つまり、ブラウザがサーバーにレポートを送信するタイミングを制御します。

ブラウザは、キューに入ったレポートを適切なタイミングで配信する準備が整い次第、すぐにデベロッパーにタイムリーにフィードバックを提供する）でも、ブラウザが配信を遅らせることもあります。処理がビジー状態になったり、ユーザーが低速または混雑していたネットワークです。ブラウザは、ブラウザがユーザーの頻繁にアクセスしているユーザーの場合、まず特定のオリジンに関するレポートを作成します。

パフォーマンス上の問題はほとんど、またはまったくない（アプリとのネットワーク競合など）に対処できます。また、また、キューに入れられたレポートをブラウザから送信するタイミングを制御することもできません。

複数のエンドポイントの構成

単一のレスポンスで、複数のエンドポイントを同時に構成するには、複数の Report-To ヘッダー:

Report-To: {
             "group": "default",
             "max_age": 10886400,
             "endpoints": [{
               "url": "https://example.com/browser-reports"
             }]
           }
Report-To: {
             "group": "network-errors-endpoint",
             "max_age": 10886400,
             "endpoints": [{
               "url": "https://example.com/network-errors"
             }]
           }

単一の HTTP ヘッダーにまとめることもできます。

Report-To: {
             "group": "network-errors-endpoint",
             "max_age": 10886400,
             "endpoints": [{
               "url": "https://example.com/network-errors"
             }]
           },
           {
             "max_age": 10886400,
             "endpoints": [{
               "url": "https://example.com/browser-errors"
             }]
           }

Report-To ヘッダーを送信すると、ブラウザはエンドポイントをキャッシュに保存します。それらのコンソールの max_age 値に従って追加することをおすすめします

フェイルオーバーとロードバランシング

ほとんどの場合、グループごとに 1 つの URL コレクタを構成します。ただし、レポートによって大量のトラフィックが生成されるため、仕様にはフェイルオーバーが含まれています。ロードバランシングの機能を SRV レコード。

ブラウザは、最大で 1 つのエンドポイントにレポートを配信するように最善を尽くします。グループ化できます。エンドポイントには、負荷を分散するために weight を割り当てることができます。トラフィックの一部を受信しているエンドポイントに送信しますエンドポイントがまた、フォールバックコレクタを設定する priority も割り当てられます。

フォールバックコレクタは、プライマリコレクタへのアップロードに失敗した場合にのみ試行されます。

例: https://backup.com/reports にフォールバックコレクタを作成します。

Report-To: {
             "group": "endpoint-1",
             "max_age": 10886400,
             "endpoints": [
               {"url": "https://example.com/reports", "priority": 1},
               {"url": "https://backup.com/reports", "priority": 2}
             ]
           }

ネットワークエラーロギングの設定

セットアップ

NEL を使用するには、Report-To ヘッダーをコレクタを使用します。

Report-To: {
    ...
  }, {
    "group": "network-errors",
    "max_age": 2592000,
    "endpoints": [{
      "url": "https://analytics.provider.com/networkerrors"
    }]
  }

次に、NEL レスポンスヘッダーを送信してエラーの収集を開始します。NEL 以降が送信元でオプトインされている場合、ヘッダーの送信は 1 回だけで済みます。NEL と Report-To は、同じオリジンに対する今後のリクエストに適用され、続行されますセットアップに使用した max_age 値に従ってエラーを収集します。表示されます。

ヘッダー値は、max_age を含む JSON オブジェクトにする必要があります。また、 report_to フィールド。後者を使用すると、名前の付け方に応じて、ネットワークエラーコレクタ:

GET /index.html HTTP/1.1
NEL: {"report_to": "network-errors", "max_age": 2592000}

注意: Report-To ヘッダーにはハイフンが使用されています。ここで、report_to はアンダースコアを使用しています。

サブリソース

例: example.com が foobar.com/cat.gif を読み込み、そのリソースが失敗した場合次のように読み込みます。

foobar.com の NEL コレクタに通知が送信されます
example.com の NEL コレクタに通知されません

「おおまかに言えば、NEL はサーバー側のログを必要があります。

example.com は foobar.com のサーバーにアクセスできないため NEL レポートも参照できません

レポート構成のデバッグ

サーバーにレポートが表示されない場合は、 chrome://net-export/。このページは次のユーザーにとって有用です正しく設定され、レポートが送信されていることを確認必要があります。

ReportingObserver とは

ReportingObserver は関連していますが、異なるレポートメカニズムです。これは JavaScript 呼び出しに基づいています。ネットワークエラーのため、ネットワークエラーのロギングには適していない 渡すことはできません。

サーバーの例

以下に、Express を使用するノードサーバーの例を示します。ネットワークエラーのレポートを構成する方法と、結果をキャプチャする専用のハンドラを作成する方法を示します。

const express = require('express');

const app = express();
app.use(
  express.json({
    type: ['application/json', 'application/reports+json'],
  }),
);
app.use(express.urlencoded());

app.get('/', (request, response) => {
  // Note: report_to and not report-to for NEL.
  response.set('NEL', `{"report_to": "network-errors", "max_age": 2592000}`);

  // The Report-To header tells the browser where to send network errors.
  // The default group (first example below) captures interventions and
  // deprecation reports. Other groups, like the network-error group, are referenced by their "group" name.
  response.set(
    'Report-To',
    `{
    "max_age": 2592000,
    "endpoints": [{
      "url": "https://reporting-observer-api-demo.glitch.me/reports"
    }],
  }, {
    "group": "network-errors",
    "max_age": 2592000,
    "endpoints": [{
      "url": "https://reporting-observer-api-demo.glitch.me/network-reports"
    }]
  }`,
  );

  response.sendFile('./index.html');
});

function echoReports(request, response) {
  // Record report in server logs or otherwise process results.
  for (const report of request.body) {
    console.log(report.body);
  }
  response.send(request.body);
}

app.post('/network-reports', (request, response) => {
  console.log(`${request.body.length} Network error reports:`);
  echoReports(request, response);
});

const listener = app.listen(process.env.PORT, () => {
  console.log(`Your app is listening on port ${listener.address().port}`);
});

ネットワーク エラー ロギング（NEL）

はじめに

以前の Reporting API の概要

以前の Report-To ヘッダー

ヘッダー フィールドの説明

ブラウザはどのようにレポートを送信しますか？

ブラウザはいつレポートを送信しますか？

複数のエンドポイントの構成

フェイルオーバーとロード バランシング

ネットワーク エラーロギングの設定

セットアップ

サブリソース

レポート構成のデバッグ

ReportingObserver とは

サーバーの例

関連情報

ネットワークエラーロギング（NEL）

以前の `Report-To` ヘッダー

ヘッダーフィールドの説明

フェイルオーバーとロードバランシング

ネットワークエラーロギングの設定