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.
| Alan | Tür | Açıklama |
|---|---|---|
group |
dize | İsteğe bağlı. group adı belirtilmezse uç noktaya "varsayılan" adı verilir. |
max_age |
sayı | Zorunludur. Uç noktanın ömrünü saniye cinsinden tanımlayan negatif olmayan bir tam sayı. "0" değeri uç nokta grubunun, kullanıcı aracısının raporlama önbelleğinden kaldırılmasına neden olur. |
endpoints |
Dizi<Nesne> | Zorunludur. Rapor toplayıcınızın gerçek URL'sini belirten bir JSON nesneleri dizisi. |
include_subdomains |
boolean | İsteğe bağlı. Mevcut kaynağın ana makinesinin tüm alt alan adları için uç nokta grubunu etkinleştiren boole değeri. Atlanırsa veya "true" dışındaki herhangi bir değer varsa alt alan adları uç noktaya bildirilmez. |
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.comadlı kullanıcının NEL toplayıcısına bildirim gönderildiexample.comadlı 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}`);
});