エラーバウンダリー（概念）をフレームワークなしで実装

全体像

ローカル境界: パース

// Try/catch boundary: parse user JSON with a fallback
function safeParseUser(json) {
  try {
    const obj = JSON.parse(json);
    // minimal validation
    if (!obj || typeof obj.name !== "string") {
      return { name: "Guest" };
    }
    return { name: obj.name };
  } catch (err) {
    // fallback on parse error
    return { name: "Guest" };
  }
}

console.log("ok:", safeParseUser("{\"name\":\"Ayla\"}"));
console.log("bad:", safeParseUser("{oops}"));

runSafeヘルパー

// A tiny boundary helper for sync functions
function runSafe(fn, fallback) {
  try {
    return fn();
  } catch (e) {
    // log minimal info for beginners
    console.log("error:", String(e));
    return fallback;
  }
}

// Use it
const resultOk = runSafe(function () {
  return 2 + 2;
}, 0);

const resultFail = runSafe(function () {
  // simulate crash
  throw new Error("boom");
}, 0);

console.log("ok:", resultOk, "fail:", resultFail);

非同期処理の境界

// Async boundary: try/catch inside an async function
async function fetchNameFake(id) {
  // simulate failure for odd ids
  if (id % 2 === 1) {
    throw new Error("not found");
  }
  return "Ayla";
}

async function loadName(id) {
  try {
    const name = await fetchNameFake(id);
    return name;
  } catch (e) {
    console.log("async error:", String(e));
    return "Guest";
  }
}

(async function () {
  console.log("even:", await loadName(2));
  console.log("odd :", await loadName(3));
})();

リスクを分離する

// Boundary only around the risky step, rest continues
function renderCard(userJson) {
  // boundary: parse
  const user = safeParseUser(userJson);
  // rest of rendering can continue with fallback
  return "Hello " + user.name;
}

console.log(renderCard("{\"name\":\"Lina\"}"));
console.log(renderCard("{broken}")); // still renders with fallback

境界を設ける習慣

エラー境界の基礎クイズ

まとめ