Ağ Hatası Günlük Kaydı (NEL)

Eric Bidelman

Maud Nalpas

Giriş

Ağ Hatası Günlük Kaydı (NEL), Bir kaynaktan istemci tarafı ağ hatalarını toplayabilir.

Tarayıcıya ağ hatalarını toplamasını bildirmek için NEL HTTP yanıt başlığını kullanır, ardından hataları bir sunucuya bildirmek için Reporting API ile entegre olur.

Eski Reporting API'ye genel bakış

Eski Report-To Başlığı

Eski Reporting API'yi kullanmak için Report-To HTTP yanıt başlığı ayarlamanız gerekir. Bu value, tarayıcı için bir uç nokta grubunu tanımlayan bir nesnedir hata bildiriminde bulunmak için:

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

Uç nokta URL'niz sitenizden farklı bir kaynakta bulunuyorsa uç nokta, CORS ön kontrol isteklerini desteklemelidir. (ör. 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).

Bu örnekte, bu yanıt başlığını ana sayfanızla göndermek tarayıcıyı, tarayıcı tarafından oluşturulan uyarıları raporlayacak şekilde yapılandırır max_age saniye boyunca https://analytics.provider.com/browser-errors uç noktasına kadar. Sayfa tarafından gönderilen sonraki tüm HTTP isteklerinin otomatik olarak (resimler, komut dosyaları vb. için) yoksayılır. Yapılandırma şu sırada kurulur: ana sayfanın yanıtıdır.

Başlık alanlarının açıklaması

Her uç nokta yapılandırması bir group adı, max_age ve endpoints içerir dizisidir. Ayrıca, raporlama sırasında alt alan adlarını dikkate alıp almayacağınızı seçebilirsiniz include_subdomains alanını kullanarak hataları kontrol edin.

group adı, bir dizeyi bir uç nokta. Bu adı entegre edilebilen diğer yerlerde kullanın belirli bir uç nokta grubuna referans verin.

max-age alanı da zorunludur ve uç noktayı kullanması ve hataları buna bildirmesi gerekir.

endpoints alanı, yük devretme ve yük dengelemeyi sağlayan bir dizidir özellikleri. Yük devretme ve yük dengeleme ile ilgili bölüme bakın. İnsanların tarayıcının yalnızca bir uç nokta seçeceğini, hatta grup, endpoints içinde birkaç toplayıcı listeleniyorsa. Rapor göndermek isterseniz birden fazla sunucuya aynı anda raporlayamazsanız arka ucunuzun raporlar.

Tarayıcı, raporları nasıl gönderir?

Tarayıcı, raporları düzenli aralıklarla toplu hale getirir ve raporlamaya gönderir. uç noktalarından yararlanırsınız.

Tarayıcı, rapor göndermek için bir POST işlemi gerçekleştirir şununla istek: Content-Type: application/reports+json ve tespit edilen uyarı ve hataları gösterir.

Tarayıcı, raporları ne zaman gönderir?

Raporlar, uygulamanızdan bant dışında sunulur, yani tarayıcı raporların sunucularınıza ne zaman gönderileceğini kontrol eder.

Tarayıcı, sıraya alınan raporları en uygun zamanda sunmaktır. Bu, hazır olduklarında (ilk olarak size geliştiriciye zamanında geri bildirim gönderebilirsiniz), ancak aynı zamanda yüksek öncelikli işleri yapmakla meşgulse ya da kullanıcı yavaş ve/veya ne olduğunu öğreneceğiz. Tarayıcı, Kullanıcı sık sık ziyaret ediyorsa ilk olarak belirli bir kaynak hakkında raporlar.

Performansla ilgili çok az sorun var veya yok (ör. uygulamanızla ağ çakışması). Evet, tarayıcının ne zaman sıraya alınmış raporları göndereceğini denetlemenin bir yolu yoktur.

Birden fazla uç nokta yapılandırma

Tek bir yanıt, birden fazla uç noktayı aynı anda birden çok Report-To üstbilgisi:

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"
             }]
           }

tek bir HTTP başlığında birleştirmeniz yeterlidir:

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 üstbilgisi gönderildikten sonra tarayıcı uç noktaları önbelleğe alır max_age değerlerine göre düzenler ve bu tehlikeli konsolların tümünü uyarılarını/hatalarını engeller.

Yük devretme ve yük dengeleme

Çoğu zaman, her grup için tek bir URL toplayıcı yapılandırırsınız. Ancak, raporlama yüksek miktarda trafik oluşturabileceğinden, DNS'ten ilham alan yük dengeleme özellikleri SRV kaydı.

Tarayıcı, en fazla bir uç noktaya rapor göndermek için elinden geleni yapar bir reklam grubunda yer alır. Yükü dağıtmak için uç noktalara weight atanabilir. Her bir raporlama trafiğinin belirli bir bölümünü alan uç nokta. Uç noktalar ayrıca, yedek toplayıcılar ayarlaması için bir priority atanmıştır.

Yedek toplayıcılar yalnızca birincil toplayıcılara yüklemeler başarısız olduğunda denenir.

Örnek: https://backup.com/reports adresinde bir yedek toplayıcı oluşturun:

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

Ağ Hatası Günlük Kaydını Ayarlama

Kurulum

NEL kullanmak için Report-To başlığını bir toplayıcı:

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

Sonra, hataları toplamaya başlamak için NEL yanıt başlığını gönderin. NEL'den beri üstbilgisi bir kaynak için etkinleştirilir. Üstbilgiyi yalnızca bir kez göndermeniz gerekir. Hem NEL hem de Report-To, aynı kaynağa ileride yapılacak isteklerde geçerli olacak ve devam edecek ayarlamak için kullanılan max_age değerine göre hataları toplamak üzere sahip olacak.

Başlık değeri, max_age ve report_to alanı. İkinci seçeneği kullanarak hesabınızın grup adını ağ hataları toplayıcı:

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

Alt kaynaklar

Örnek: example.com, foobar.com/cat.gif öğesini yüklüyor ve bu kaynak başarısız oluyorsa yüklemek için:

• foobar.com adlı kullanıcının NEL toplayıcısına bildirim gönderildi
• example.com adlı kullanıcının NEL toplayıcısına bildirim gönderilmez

İlgili içeriği oluşturmak için kullanılan temel kural olarak, NEL'in sunucu tarafı günlükleri yeniden oluşturmasıdır. teslim edilir.

example.com, foobar.com adlı kullanıcının sunucusunda görünmediği için günlüklerde de gösterilmez. Ayrıca, NEL raporlarını da göremez.

Hata ayıklama raporu yapılandırmaları

Sunucunuzda raporlar gösterilmiyorsa chrome://net-export/ Bu sayfa aşağıdakiler için yararlı olabilir: işlerin doğru şekilde yapılandırıldığını ve raporların gönderildiğini doğrulama düzgün şekilde kapatın.

ReportingObserver ile ilgili durum nedir?

ReportingObserver alakalı ancak farklı bir bildirme mekanizmasıdır. JavaScript çağrılarına dayanır. Ağ hataları nedeniyle ağ hatası günlük kaydına uygun değildir müdahale edilemez.

Örnek sunucu

Aşağıda, Express kullanan bir örnek Düğüm sunucusu verilmiştir. Ağ hataları için raporlamanın nasıl yapılandırılacağını gösterir ve sonucu yakalamak için özel bir işleyici oluşturur.

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}`);
});

Daha fazla bilgi

• Web uygulamanızı Reporting API ile izleme (Reporting API'deki ana yayın)
• Reporting API v0'dan v1'e geçiş rehberi
• Spesifikasyon: eski Reporting API (v0)
• Spesifikasyon: yeni Reporting API (v1)