คุณจัดการข้อผิดพลาดใน JavaScript ได้อย่างไร รวมถึงรหัส async?

Question

IT Interview Practice · Accepted Answer

Synchronous errors ใช้ **`try/catch/finally`** และคุณควร `throw` `Error` objects (ไม่ใช่ strings) เพื่อให้ได้ stack trace

```js
try {
  const data = JSON.parse(input);
} catch (err) {
  if (err instanceof SyntaxError) handleBadJson(err);
  else throw err;        // re-throw what you can't handle
} finally {
  cleanup();             // always runs
}
```

## เหตุใดนี่จึงสำคัญ

```js
// async/await → wrap awaits in try/catch
async function load() {
  try {
    return await fetch(url).then(r => r.json());
  } catch (err) { showError(err); }
}

// promises → use .catch
fetch(url).then(use).catch(showError);
```

## กับดักที่พบบ่อย: try/catch ไม่จับ async callbacks

```js
try {
  setTimeout(() => { throw new Error("boom"); }, 0); // ❌ NOT caught
} catch (e) { /* never runs — the throw happens later, outside this stack */ }
```

Callback ของ `setTimeout` ทำงานในช่วง tick ถัดไป ดังนั้น `try` ที่ล้อมรอบจึงหมดไปแล้ว จัดการข้อผิดพลาด *ภายใน* callback

## Global safety nets

```js
window.addEventListener("unhandledrejection", e => log(e.reason)); // browser
process.on("unhandledRejection", err => log(err));                 // Node
```

## Best practices

- `throw` `Error` (หรือ custom subclasses) สำหรับ stack traces และการตรวจสอบ `instanceof`
- `catch` **โดยเฉพาะ** ที่คุณสามารถกู้คืน ปล่อยให้ข้อผิดพลาดที่ไม่คาดคิดฟองขึ้น
- อย่าบดบังข้อผิดพลาดเงียบ ๆ (`catch (e) {}`). เสมอ log หรือ rethrow

เหตุใดนี่จึงสำคัญ

กับดักที่พบบ่อย: try/catch ไม่จับ async callbacks

Global safety nets

Best practices

คำถามที่เกี่ยวข้อง