ปัญหาที่พบบ่อยและการรายงานข้อบกพร่อง

เมื่อพบปัญหาเกี่ยวกับข้อความ Push บนเว็บ การแก้ไขข้อบกพร่องของปัญหาหรือการขอความช่วยเหลืออาจเป็นเรื่องยาก เอกสารนี้จะอธิบายปัญหาที่พบบ่อยบางประการและสิ่งที่คุณควรทำหากพบข้อบกพร่องใน Chrome หรือ Firefox

ก่อนที่เราจะเจาะลึกเรื่องการแก้ไขข้อบกพร่องของข้อความ Push คุณอาจพบปัญหาเกี่ยวกับการแก้ไขข้อบกพร่องของ Service Worker เอง ไฟล์ไม่อัปเดต ลงทะเบียนไม่สำเร็จ หรือโดยทั่วไปแล้วเป็นเพียงพฤติกรรมที่ผิดปกติ มีเอกสารที่ยอดเยี่ยมเกี่ยวกับการแก้ไขข้อบกพร่องของ Service Worker ที่เราขอแนะนำให้คุณอ่านหากคุณเพิ่งเริ่มพัฒนา Service Worker

การพัฒนาและทดสอบข้อความ Push บนเว็บมี 2 ขั้นตอนที่แตกต่างกัน ซึ่งแต่ละขั้นตอนก็มีปัญหาที่พบได้ทั่วไปแตกต่างกันไป ดังนี้

  • การส่งข้อความ: ตรวจสอบว่าส่งข้อความสำเร็จ คุณควรได้รับรหัส HTTP 201 หากคุณไม่ได้เป็นผู้ใช้ดังกล่าว ให้ทำดังนี้
  • การรับข้อความ: หากคุณส่งข้อความได้สำเร็จ แต่เบราว์เซอร์ไม่ได้รับข้อความ ให้ทำดังนี้

หากคุณไม่สามารถส่งและรับข้อความ Push และส่วนที่เกี่ยวข้องในเอกสารนี้ไม่ช่วยแก้ไขข้อบกพร่องของปัญหา แสดงว่าคุณอาจพบข้อบกพร่องในกลไก Push เอง ในกรณีนี้ โปรดดูส่วนการแจ้งรายงานข้อบกพร่องเพื่อส่งรายงานข้อบกพร่องที่ดีพร้อมข้อมูลที่จำเป็นทั้งหมดเพื่อเร่งกระบวนการแก้ไขข้อบกพร่อง

สิ่งหนึ่งที่ฉันอยากจะบอกก่อนที่เราจะเริ่มคือ Firefox และบริการ Mozilla AutoPush มีข้อความแสดงข้อผิดพลาดที่ยอดเยี่ยม หากคุณติดขัดและไม่แน่ใจว่าปัญหาคืออะไร ให้ทดสอบใน Firefox และดูว่าคุณได้รับข้อความแสดงข้อผิดพลาดที่เป็นประโยชน์มากขึ้นหรือไม่

ปัญหาเกี่ยวกับการให้สิทธิ์

ปัญหาเกี่ยวกับการให้สิทธิ์เป็นหนึ่งในปัญหาที่พบบ่อยที่สุดที่นักพัฒนาแอปพบเมื่อเริ่มใช้ข้อความ Push บนเว็บ โดยปกติแล้ว ปัญหานี้เกิดจากการกำหนดค่าคีย์เซิร์ฟเวอร์แอปพลิเคชัน (หรือที่เรียกว่าคีย์ VAPID) ของเว็บไซต์

วิธีที่ง่ายที่สุดในการรองรับข้อความ Push ทั้งใน Firefox และ Chrome คือการระบุ applicationServerKey ในการเรียก subscribe() ข้อเสียคือความคลาดเคลื่อนระหว่างคีย์ของฟรอนท์เอนด์และเซิร์ฟเวอร์จะส่งผลให้เกิดข้อผิดพลาดในการให้สิทธิ์

ใน Chrome และ FCM

สำหรับ Chrome ซึ่งใช้ FCM เป็นบริการพุช คุณจะได้รับการตอบกลับ UnauthorizedRegistration จาก FCM สำหรับข้อผิดพลาดต่างๆ ที่เกี่ยวข้องกับคีย์เซิร์ฟเวอร์แอปพลิเคชันทั้งหมด

คุณจะได้รับข้อผิดพลาด UnauthorizedRegistration ในสถานการณ์ต่อไปนี้

  • หากคุณไม่ได้กำหนดส่วนหัว Authorization ในคำขอไปยัง FCM
  • คีย์แอปพลิเคชันที่ใช้ในการสมัครใช้บริการของผู้ใช้ไม่ตรงกับคีย์ที่ใช้ในการรับรองส่วนหัวของการให้สิทธิ์
  • วันหมดอายุใน JWT ไม่ถูกต้อง เช่น วันหมดอายุเกิน 24 ชั่วโมงหรือ JWT หมดอายุแล้ว
  • JWT มีรูปแบบไม่ถูกต้องหรือมีค่าที่ไม่ถูกต้อง

การตอบกลับข้อผิดพลาดแบบเต็มจะมีลักษณะดังนี้

<html>
  <head>
    <title>UnauthorizedRegistration</title>
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    <h1>UnauthorizedRegistration</h1>

    <h2>Error 400</h2>
  </body>
</html>

หากคุณได้รับข้อความแสดงข้อผิดพลาดนี้ใน Chrome ให้ลองทดสอบใน Firefox เพื่อดูว่าจะให้ข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับปัญหาหรือไม่

Firefox และ Mozilla AutoPush

Firefox และ Mozilla AutoPush มีชุดข้อความแสดงข้อผิดพลาดที่เข้าใจง่ายสำหรับปัญหาเกี่ยวกับ Authorization

นอกจากนี้ คุณจะได้รับการตอบกลับข้อผิดพลาด Unauthorized จาก Mozilla AutoPush หากไม่มีส่วนหัว Authorization ในคำขอพุช

{
  "errno": 109,
  "message": "Request did not validate missing authorization header",
  "code": 401,
  "more_info": "http://autopush.readthedocs.io/en/latest/http.html#error-codes",
  "error": "Unauthorized"
}

หากวันหมดอายุใน JWT หมดอายุแล้ว คุณจะได้รับข้อผิดพลาด Unauthorized พร้อมข้อความที่อธิบายว่าโทเค็นหมดอายุแล้ว

{
  "code": 401,
  "errno": 109,
  "error": "Unauthorized",
  "more_info": "http://autopush.readthedocs.io/en/latest/http.html#error-codes",
  "message": "Request did not validate Invalid bearer token: Auth expired"
}

หากคีย์เซิร์ฟเวอร์ของแอปพลิเคชันแตกต่างกันระหว่างตอนที่ผู้ใช้สมัครรับข้อมูลและตอนที่ลงชื่อส่วนหัวการให้สิทธิ์ ระบบจะแสดงข้อผิดพลาด Not Found ดังนี้

{
  "errno": 102,
  "message": "Request did not validate invalid token",
  "code": 404,
  "more_info": "http://autopush.readthedocs.io/en/latest/http.html#error-codes",
  "error": "Not Found"
}

สุดท้าย หากคุณมีค่าที่ไม่ถูกต้องใน JWT (เช่น หากค่า "alg" เป็นค่าที่ไม่คาดคิด) คุณจะได้รับข้อผิดพลาดต่อไปนี้จาก Mozilla AutoPush

{
  "code": 401,
  "errno": 109,
  "error": "Unauthorized",
  "more_info": "http://autopush.readthedocs.io/en/latest/http.html#error-codes",
  "message": "Request did not validate Invalid Authorization Header"
}

รหัสสถานะ HTTP

มีปัญหาหลายอย่างที่อาจส่งผลให้เกิดโค้ดตอบกลับที่ไม่ใช่ 201 จากบริการพุช ด้านล่างนี้คือรายการรหัสสถานะ HTTP และความหมายที่เกี่ยวข้องกับข้อความ Push บนเว็บ

รหัสสถานะ คำอธิบาย
429 มีคำขอมากเกินไป เซิร์ฟเวอร์แอปพลิเคชันของคุณถึงขีดจำกัดอัตราคำขอด้วยบริการพุชแล้ว การตอบกลับจากบริการควรมีส่วนหัว "Retry-After" เพื่อระบุระยะเวลาก่อนที่จะส่งคำขออื่นได้
400 คำขอไม่ถูกต้อง ส่วนหัวรายการหนึ่งไม่ถูกต้องหรือจัดรูปแบบไม่ดี
404 ไม่พบ ในกรณีนี้ คุณควรลบ PushSubscription ออกจากแบ็กเอนด์และรอโอกาสที่จะให้ผู้ใช้สมัครรับข้อมูลอีกครั้ง
410 หมดแล้ว การสมัครใช้บริการใช้ไม่ได้อีกต่อไปและควรนำออกจากแบ็กเอนด์ ซึ่งสามารถทำซ้ำได้โดยการเรียก `unsubscribe()` ใน `PushSubscription`
413 เพย์โหลดมีขนาดใหญ่เกินไป ขนาดเพย์โหลดขั้นต่ำที่บริการพุชต้องรองรับคือ 4096 ไบต์ (หรือ 4 KB) ไฟล์ที่มีขนาดใหญ่กว่านี้อาจทำให้เกิดข้อผิดพลาดนี้

หากรหัสสถานะ HTTP ไม่อยู่ในรายการนี้และข้อความแสดงข้อผิดพลาดไม่เป็นประโยชน์ ให้ตรวจสอบข้อกำหนดของโปรโตคอล Web Push เพื่อดูว่ามีการอ้างอิงรหัสสถานะพร้อมกับสถานการณ์ที่สามารถใช้รหัสสถานะนั้นได้หรือไม่

ปัญหาการเข้ารหัสเพย์โหลด

หากคุณเรียกใช้ข้อความ Push ได้สำเร็จ (เช่น ส่งข้อความไปยังบริการ Web Push และได้รับโค้ดตอบกลับ 201) แต่เหตุการณ์ Push ไม่เริ่มทำงานใน Service Worker โดยปกติแล้วหมายความว่าเบราว์สรถอดรหัสข้อความที่ได้รับไม่สำเร็จ

ในกรณีนี้ คุณควรเห็นข้อความแสดงข้อผิดพลาดในคอนโซล DevTools ของ Firefox ดังนี้

เครื่องมือสำหรับนักพัฒนาเว็บของ Firefox พร้อมข้อความการถอดรหัส

หากต้องการตรวจสอบว่าปัญหานี้เกิดขึ้นใน Chrome หรือไม่ ให้ทำดังนี้

  1. ไปที่ about://gcm-internals แล้วคลิกปุ่ม "Start Recording"

บันทึกภายในของ Chrome GCM

  1. เรียกใช้ข้อความ Push และดูในส่วน "บันทึกความล้มเหลวในการถอดรหัสข้อความ"

บันทึกการถอดรหัสภายในของ GCM

หากมีปัญหาเกี่ยวกับการถอดรหัสเพย์โหลด คุณจะเห็นข้อผิดพลาดที่คล้ายกับที่แสดงด้านบน (สังเกตข้อความ AES-GCM decryption failed ในคอลัมน์รายละเอียด)

มีเครื่องมือบางอย่างที่อาจช่วยแก้ไขข้อบกพร่องในการเข้ารหัสได้หากนี่คือปัญหาของคุณ

ปัญหาเกี่ยวกับการเชื่อมต่อ

หากคุณไม่ได้รับเหตุการณ์พุชใน Service Worker และไม่เห็นข้อผิดพลาดในการถอดรหัส แสดงว่าเบราว์เซอร์อาจเชื่อมต่อกับบริการพุชไม่สำเร็จ

ใน Chrome คุณสามารถตรวจสอบว่าเบราว์เซอร์ได้รับข้อความหรือไม่โดยดูที่ "Receive Message Log" (sic) ใน about://gcm-internals

บันทึกข้อความที่ได้รับภายใน GCM

หากไม่เห็นข้อความมาถึงอย่างทันท่วงที ให้ตรวจสอบว่าสถานะการเชื่อมต่อของเบราว์เซอร์เป็น CONNECTED โดยทำดังนี้

สถานะการเชื่อมต่อภายในของ GCM

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

การส่งรายงานข้อบกพร่อง

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

สำหรับ Chrome คุณสามารถแจ้งปัญหาได้ที่ https://bugs.chromium.org/p/chromium/issues/list สำหรับ Firefox คุณควรแจ้งปัญหาที่ https://bugzilla.mozilla.org/

หากต้องการส่งรายงานข้อบกพร่องที่ดี คุณควรระบุรายละเอียดต่อไปนี้

  • เบราว์เซอร์ที่คุณได้ทดสอบ (เช่น Chrome เวอร์ชัน 50, Chrome เวอร์ชัน 51, Firefox เวอร์ชัน 50, Firefox เวอร์ชัน 51)
  • PushSubscription ตัวอย่างที่แสดงให้เห็นถึงปัญหา
  • ระบุตัวอย่างคำขอ (เช่น เนื้อหาของคำขอเครือข่ายไปยังบริการพุช รวมถึงส่วนหัว)
  • รวมตัวอย่างการตอบกลับจากคำขอเครือข่ายด้วย

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

ขั้นตอนต่อไป

Code Labs