วิธีจับ JavaScript Errors ทั้งหมด (Global Error Handling)

ใช้ window.onerror หรือ window.addEventListener('error') เพื่อจับ JavaScript Errors ทั้งหมดที่ไม่ได้จับ (unhandled) ในหน้าเว็บ

ข้อมูลที่ได้รับ (3 ส่วน)

• Error Message: ข้อความข้อผิดพลาด
• URL: ไฟล์ที่เกิดข้อผิดพลาด
• Line Number: บรรทัดที่เกิดข้อผิดพลาด

ตัวอย่าง (onerror แบบเก่า)

<html>
  <head>
    <script>
      window.onerror = function(msg, url, line) {
        alert("Message: " + msg);
        alert("URL: " + url);
        alert("Line number: " + line);
        return true; // ป้องกัน default browser handler
      };
    </script>
  </head>
  <body>
    <p>คลิกเพื่อดูผลลัพธ์:</p>
    <form>
      <input type="button" value="Click Me" onclick="myFunc();" />
    </form>
  </body>
</html>

ผลลัพธ์

(รูปภาพในต้นฉบับแสดง Alert กล่องข้อความ Error, URL, Line Number)

วิธีทันสมัย (แนะนำ) - addEventListener

window.addEventListener('error', function(event) {
  // event: ErrorEvent object
  console.log('Message:', event.message);
  console.log('File:', event.filename);
  console.log('Line:', event.lineno);
  console.log('Column:', event.colno);
  console.log('Error Object:', event.error); // มี stack trace

  // ส่งไป Logging Service
  // logErrorToServer(event);
});

// สำหรับ Promise Rejection (Unhandled Rejection)
window.addEventListener('unhandledrejection', function(event) {
  console.error('Unhandled Promise Rejection:', event.reason);
  event.preventDefault(); // ป้องกัน default browser behavior
});

ข้อดีของ addEventListener

• ผูกหลาย handler ได้
• ได้ event.error (Error object จริง พร้อม stack)
• จับ unhandledrejection ได้แยกต่างหาก
• เป็นมาตรฐาน DOM Level 3

Production Tip: ส่ง Error ไปยัง Service เช่น Sentry, LogRocket, Rollbar, Datadog เพื่อติดตามและแก้ไขปัญหาใน Production