const catchExample = document.querySelector("#example01");
const catchButton = catchExample.querySelector("button");
catchButton.addEventListener("click", catchSleep);
const catchConsole = document.querySelector("#example01 .console");

/**
 * 例外の伝播をハンドリングするコード例
 */
async function catchSleep(e) {
  const consoleNode = clearConsole(catchConsole);
  createNode(consoleNode, "article", "イベントハンドラ関数を実行");
  await sleep(1000);

  // ここでハンドリング！
  try {
    await otherFn(consoleNode);
  } catch (err) {
    // ハンドリング処理をここに記述
    createNode(catchConsole, "p", "例外を受け取りました！");
    createNode(
      catchConsole,
      "div",
      `- TypeErrorオブジェクトか: ${err instanceof TypeError}`
    );
    createNode(
      catchConsole,
      "div",
      `- Errorオブジェクトか: ${err instanceof Error}`
    );
    createNode(catchConsole, "div", `- name: ${err.name}`);
    createNode(catchConsole, "div", `- message: ${err.message}`);
    createNode(catchConsole, "div", "- stack (スタックトレース):");
    createNode(catchConsole, "pre", err.stack);
  }
}

/**
 * 例外の伝播を示すために、経由させる関数
 */
async function otherFn(catchConsole) {
  createNode(catchConsole, "article", "上記からさらに呼び出された関数を実行");
  await sleep(1000);
  return raiseExeption(catchConsole);
}

/**
 * 例外を発行する関数
 */
function raiseExeption(catchConsole) {
  createNode(catchConsole, "article", "例外を発行する関数を実行");

  throw new Error("失敗😅");
}

/**
 * テストコード用：画面のコンソール部をクリア
 */
function clearConsole(consoleNode) {
  while (consoleNode.lastChild) {
    consoleNode.removeChild(consoleNode.lastChild);

    // DOMツリーから取り除いたら、GCの対象にする
    consoleNode.lastChild = null;
  }

  return consoleNode;
}

/**
 * テストコード用：DOMノード生成＆アペンド関数
 */
function createNode(targetNode, tagName, textContent) {
  const node = document.createElement(tagName);
  node.textContent = textContent;
  targetNode.appendChild(node);

  return targetNode;
}

/**
 * テストコード用：非同期処理用のダミー関数
 */
function sleep(ms = 1000) {
  return new Promise((res) => {
    setTimeout(() => res(), ms);
  });
}