การบันทึกข้อผิดพลาดเกี่ยวกับเครือข่าย (NEL)

Eric Bidelman

มูด นัลปัส

เกริ่นนำ

การบันทึกข้อผิดพลาดเกี่ยวกับเครือข่าย (NEL) เป็นกลไกในการรวบรวมข้อผิดพลาดเกี่ยวกับเครือข่ายฝั่งไคลเอ็นต์จากต้นทาง

โดยใช้ส่วนหัวการตอบกลับ HTTP NEL เพื่อบอกเบราว์เซอร์ให้รวบรวมข้อผิดพลาดเกี่ยวกับเครือข่าย จากนั้นผสานรวมกับ Reporting API เพื่อรายงานข้อผิดพลาดไปยังเซิร์ฟเวอร์

ข้อควรระวัง: ในการตั้งค่าการบันทึกข้อผิดพลาดเกี่ยวกับเครือข่ายสำหรับเว็บไซต์ คุณจะต้องใช้ Reporting API เดิม ที่ใช้ส่วนหัว Report-To เนื่องจาก Reporting API ใหม่ที่ใช้ส่วนหัว Reporting-Endpoints ไม่รองรับการบันทึกข้อผิดพลาดของเครือข่าย ดูข้อมูลเพิ่มเติมในการรองรับเบราว์เซอร์ โดยจะพัฒนากลไกใหม่สำหรับการบันทึกข้อผิดพลาดเกี่ยวกับเครือข่ายแทนในอนาคต เมื่อพร้อมให้ใช้งานแล้ว ให้เปลี่ยนจาก Reporting API เดิมเป็นกลไกใหม่ดังกล่าว

ภาพรวมของ Reporting API เดิม

ส่วนหัว Report-To เดิม

หากต้องการใช้ Reporting API เดิม คุณจะต้องตั้งค่าส่วนหัวการตอบกลับ HTTP Report-To ค่าของออบเจ็กต์คือออบเจ็กต์ที่อธิบายกลุ่มปลายทางเพื่อให้เบราว์เซอร์รายงานข้อผิดพลาดไปยัง

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	string	ไม่บังคับ หากไม่ได้ระบุชื่อ group ปลายทางจะมีชื่อเป็น "ค่าเริ่มต้น"
max_age	ตัวเลข	ต้องระบุ จำนวนเต็มที่ไม่เป็นลบที่กำหนดอายุการใช้งานของปลายทางเป็นวินาที ค่า "0" จะทำให้ระบบนำกลุ่มปลายทางออกจากแคชการรายงานของ User Agent
endpoints	อาร์เรย์<ออบเจ็กต์>	ต้องระบุ อาร์เรย์ของออบเจ็กต์ JSON ที่ระบุ URL จริงของเครื่องมือรวบรวมรายงาน
include_subdomains	boolean	ไม่บังคับ บูลีนที่เปิดใช้กลุ่มปลายทางสำหรับโดเมนย่อยทั้งหมดของโฮสต์ต้นทางปัจจุบัน หากไม่ระบุหรือระบุอื่นที่ไม่ใช่ "true" ระบบจะไม่รายงานโดเมนย่อยไปยังปลายทาง

ชื่อ group เป็นชื่อที่ไม่ซ้ำกันซึ่งใช้เพื่อเชื่อมโยงสตริงกับปลายทาง ใช้ชื่อนี้ในที่อื่นๆ ที่ผสานรวมเข้ากับ Reporting API เพื่ออ้างถึงกลุ่มปลายทางที่เฉพาะเจาะจง

นอกจากนี้ ยังต้องระบุช่อง max-age และระบุระยะเวลาที่เบราว์เซอร์ควรใช้ปลายทางและรายงานข้อผิดพลาดไปยังปลายทาง

ช่อง endpoints เป็นอาร์เรย์สำหรับให้ฟีเจอร์เฟลโอเวอร์และการจัดสรรภาระงาน โปรดดูหัวข้อเฟลโอเวอร์และการจัดสรรภาระงาน โปรดทราบว่าเบราว์เซอร์จะเลือกเพียงปลายทางเดียว แม้ว่ากลุ่มจะแสดงรายชื่อนักสะสมหลายคนใน endpoints ก็ตาม หากคุณต้องการส่งรายงานไปยังเซิร์ฟเวอร์หลายรายการพร้อมกัน แบ็กเอนด์จะต้องส่งต่อรายงาน

เบราว์เซอร์ส่งรายงานอย่างไร

เบราว์เซอร์จะจัดกลุ่มรายงานเป็นระยะๆ และส่งไปยังปลายทางการรายงานที่คุณกำหนดค่าไว้

หากต้องการส่งรายงาน เบราว์เซอร์จะออกคำขอ POST ที่มี Content-Type: application/reports+json และเนื้อความที่มีอาร์เรย์ของคำเตือน/ข้อผิดพลาดที่บันทึกไว้

เบราว์เซอร์จะส่งรายงานเมื่อใด

รายงานจะส่งมาจากนอกขอบเขตแอปของคุณ ซึ่งหมายความว่าเบราว์เซอร์จะควบคุมเวลาส่งรายงานไปยังเซิร์ฟเวอร์ของคุณ

เบราว์เซอร์จะพยายามส่งรายงานในคิวในเวลาที่เหมาะสม ซึ่งอาจทำได้ทันทีที่พร้อม (เพื่อให้ความคิดเห็นแก่นักพัฒนาซอฟต์แวร์ได้ทันท่วงที) แต่เบราว์เซอร์อาจชะลอการส่งได้หากไม่ว่างที่จะประมวลผลงานที่มีลำดับความสำคัญสูงกว่า หรือถ้าผู้ใช้อยู่ในเครือข่ายที่ช้าและ/หรือหนาแน่นในขณะนั้น เบราว์เซอร์ยังอาจให้ความสำคัญกับการส่งรายงานเกี่ยวกับต้นทางหนึ่งๆ ก่อน หากผู้ใช้เป็นผู้เข้าชมบ่อย

มีข้อกังวลเรื่องประสิทธิภาพเล็กน้อยหรือไม่มีเลย (เช่น มีการแย่งชิงเครือข่ายกับแอปของคุณ) เมื่อใช้ Reporting API ทั้งยังไม่มีวิธีควบคุมเวลาที่เบราว์เซอร์ส่งรายงานในคิว

การกำหนดค่าปลายทางหลายจุด

การตอบกลับรายการเดียวจะกำหนดค่าปลายทางหลายแห่งพร้อมกันได้โดยการส่งส่วนหัว 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 แล้วส่งคำเตือน/ข้อผิดพลาดที่ไม่เหมาะสมทั้งหมดในคอนโซลไปยัง URL ของคุณ

เฟลโอเวอร์และการจัดสรรภาระงาน

โดยมากแล้ว คุณจะต้องกำหนดค่าเครื่องมือรวบรวม URL 1 รายการต่อกลุ่ม อย่างไรก็ตาม เนื่องจากการรายงานสามารถสร้างการรับส่งข้อมูลจำนวนมาก ข้อกำหนดจึงมีฟีเจอร์เฟลโอเวอร์และการจัดสรรภาระงานที่ได้รับแรงบันดาลใจจากระเบียน SRV ของ DNS

เบราว์เซอร์จะพยายามอย่างดีที่สุดเพื่อส่งรายงานไปยังปลายทางไม่เกิน 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 เป็นการเลือกใช้สำหรับต้นทาง คุณจึงต้องส่งส่วนหัวเพียงครั้งเดียวเท่านั้น ทั้ง NEL และ Report-To จะมีผลกับคำขอไปยังต้นทางเดียวกันในอนาคต และจะยังคงรวบรวมข้อผิดพลาดตามค่า max_age ที่ใช้ตั้งค่าผู้รวบรวม

ค่าของส่วนหัวควรเป็นออบเจ็กต์ JSON ที่มีช่อง max_age และ report_to ใช้ตัวหลังเพื่ออ้างอิงชื่อกลุ่มของผู้รวบรวมข้อผิดพลาดเกี่ยวกับเครือข่าย

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

ข้อควรระวัง: ส่วนหัว Report-To มีขีดกลาง ในที่นี้ report_to จะใช้เครื่องหมายขีดล่าง

ทรัพยากรย่อย

ประเด็นหลัก: NEL จะทำงานกับการไปยังส่วนต่างๆ และทรัพยากรย่อยที่ดึงมา แต่สำหรับทรัพยากรย่อย หน้าที่มีวิดีโอจะไม่เห็นรายงาน NEL เกี่ยวกับคำขอข้ามต้นทางที่สร้างขึ้น

ตัวอย่าง: หาก example.com โหลด foobar.com/cat.gif และทรัพยากรนั้นโหลดไม่สำเร็จ

• ผู้รวบรวม NEL ของ foobar.com ได้รับแจ้งแล้ว
• ผู้รวบรวม NEL ของ example.com ไม่ได้รับการแจ้งเตือน

กฎทั่วไปคือ NEL สร้างบันทึกฝั่งเซิร์ฟเวอร์ที่เพิ่งสร้างขึ้นในไคลเอ็นต์

เนื่องจาก example.com เข้าถึงบันทึกของเซิร์ฟเวอร์ foobar.com ไม่ได้ จึงไม่มีระดับการเข้าถึงรายงาน NEL ด้วย

การแก้ไขข้อบกพร่องของการกำหนดค่ารายงาน

หากไม่เห็นรายงานแสดงบนเซิร์ฟเวอร์ ให้ไปที่ chrome://net-export/ หน้าดังกล่าวเป็นประโยชน์ในการตรวจสอบว่าสิ่งต่างๆ ได้รับการกำหนดค่าอย่างถูกต้องและมีการส่งรายงานอย่างถูกต้อง

แล้ว ReportingObserver ล่ะ

ReportingObserver เป็นกลไกการรายงานที่เกี่ยวข้อง แต่มีความแตกต่างแตกต่างกัน โดยอิงตามการเรียก JavaScript ไม่เหมาะสำหรับการบันทึกข้อผิดพลาดเกี่ยวกับเครือข่ายเนื่องจากข้อผิดพลาดเกี่ยวกับเครือข่ายจะสกัดกั้นผ่าน 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}`);
});

อ่านเพิ่มเติม

• ตรวจสอบเว็บแอปพลิเคชันด้วย Reporting API (โพสต์หลักเกี่ยวกับ Reporting API)
• คำแนะนำในการย้ายข้อมูลจาก Reporting API เวอร์ชัน 0 เป็นเวอร์ชัน 1
• ข้อกำหนดเฉพาะ: Reporting API เดิม (v0)
• ข้อกำหนด: Reporting API ใหม่ (v1)