วิธีจับ Unhandled Exceptions ทั้งหมดใน JavaScript

ใช้ window.onerror หรือ window.addEventListener('error') เพื่อจับ Unhandled Exceptions (ข้อยกเว้นที่ไม่มี try-catch ครอบ) ทั้งหมดในหน้าเว็บ

ข้อมูลที่ได้รับ (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 handler
      };
    </script>
  </head>
  <body>
    <p>คลิกเพื่อดูผลลัพธ์:</p>
    <form>
      <input type="button" value="Click Me" onclick="myFunc();" />
    </form>
  </body>
</html>

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

window.addEventListener('error', function(event) {
  // event: ErrorEvent
  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!

  // ส่งไป Error Tracking Service
  // reportToSentry(event.error);
});

// จับ Unhandled Promise Rejections แยกต่างหาก
window.addEventListener('unhandledrejection', function(event) {
  console.error('Unhandled Rejection:', event.reason);
  event.preventDefault(); // กัน browser log เอง
});

ข้อแตกต่าง onerror vs addEventListener

Production Error Tracking

ส่ง Error ไปยัง Service:

• Sentry - Popular, รองรับ Source Maps
• LogRocket - Session Replay
• Rollbar, Bugsnag, Datadog
• Self-hosted: Grafana + Loki, Elastic APM