วิธีจับ Syntax Errors ใน JavaScript

ไม่สามารถใช้ try-catch จับ Syntax Errors ได้ เพราะ Syntax Error เกิดขณะ Parse (แปลงโค้ด) ก่อนที่โค้ดจะรัน ทำให้ try-catch ยังไม่ได้ถูกตั้งค่า

วิธีแก้: ใช้ window.onerror

<html>
  <head>
    <script>
      window.onerror = function(message, source, lineno, colno, error) {
        document.write('Error: ' + message + '<br>');
        return true; // ป้องกัน default handler
      };
    </script>
    <script>
      // Syntax Error ใน script tag นี้จะถูกจับโดย onerror ด้านบน
      document.write('x'x') // SyntaxError: missing ) after argument list
    </script>
  </head>
  <body>
  </body>
</html>

ข้อควรระวังสำคัญ

• แยก script tag: Error handler ต้องอยู่ใน <script> tag แยกต่างหาก และอยู่ ก่อน โค้ดที่อาจมี Syntax Error
• window.onerror จับได้ทั้ง Runtime Errors และ Syntax Errors
• ในเบราว์เซอร์สมัยใหม่ ใช้ window.addEventListener('error', handler) แทน (รองรับหลาย handler)

วิธีทันสมัย (Event Listener)

window.addEventListener('error', function(event) {
  console.log('Error caught:', event.message, 'at', event.filename, ':', event.lineno);
  // event.error มี Error object (รวม stack trace)
});

ข้อจำกัด

• Syntax Error ใน script tag แรกที่โหลด (ไม่มี handler ก่อนหน้า) จับไม่ได้
• Cross-origin scripts ต้องมี crossorigin="anonymous" และ Server ส่ง CORS header
• Parse error ใน HTML (เช่น tag ไม่ปิด) ไม่ใช่ JavaScript Syntax Error

Best Practice: ใช้ Linter (ESLint) และ TypeScript จับ Syntax Error ตั้งแต่ตอนเขียนโค้ด ก่อน deploy