Ribbit works
記事のトップ画像

Kintone JavaScriptカスタマイズにおける例外/エラー処理について

JavaScriptKintone

last modified date2021-12-22

publish date2021-12-21

JavaScriptはその柔軟性から、エラーにならない工夫が容易です。

例えば、以下のようにアプリのレコード情報から、存在しないフィールドコードの値を取得しようとしたとします。

const { record } = kintone.app.record.get();

const value = record["存在しないフィールドコード"].value // valueプロパティが取得できずエラー!

このコードをそのまま実行すると、SyntaxErrorがthrowされ、処理が中断されますが、

const { record } = kintone.app.record.get();

const value = record["存在しないフィールドコード"]?.value || ""; // エラーにならず、必ず空白の文字列が入る

コードをこのように書き換えると、エラーはthrowされずそのまま通過します。 定義した変数であるvalueには、必ず空の文字列が格納されることになります。

状況にもよると思いますが、多くの場合これは良いコードとは言えないでしょう。

必要となって変数を定義したんであれば、うまく取得できない場合はエラーを出力するべきです。

今回はKintoneのJavascriptカスタマイズにおけるエラー処理についてお話します。

この記事の目次

エラー処理の記述方法

KintoneのJavaScript APIには、エラー関連の処理もいくつか存在し、以下のように記述できます。

kintone.events.on("...", (event) => {
  event.error = "画面上部に表示されるエラーメッセージ";

  event.record["フィールドコード"].error = "フィールド下部に表示されるエラーメッセージ";

  return event;
});

kintone.events.onのコールバック関数内で完結するような処理の場合は、以下のように記述すればエラーを拾うことができます。

kintone.events.on("...", (event) => {
  try {
    // エラーの発生し得る処理
  } catch (error) {
    console.error("開発者が見るエラーメッセージ", error);
    event.error = "利用者が見るエラーメッセージ";
  }

  return event;
});

非同期であっても、return event;が実行されるまでであれば同様に記述可能です。

kintone.events.on("...", async (event) => {
  try {
    await new Promise((_, reject) =>
      setTimeout(() => {
        reject();
      }, 100)
    );
  } catch (error) {
    console.error("開発者が見るエラーメッセージ", error);
    event.error = "利用者が見るエラーメッセージ";
  }

  return event;
});

注意が必要なのは、kintone.events.onで独自にボタンを設置し、ボタンがクリックされたタイミングで動作するような処理を実装する場合です。

ボタンクリックのイベントはreturn eventが実行された後に動作するため、kintone.events.on側に設定したtry-catchではエラーを拾うことができません。

kintone.events.on("...", async (event) => {
  try {
    const button = document.createElement("button");

    button.addEventListener("click", () => {
      // return event;が実行された後に動作する処理なので、
      // この中で発生したエラーはcatchされない!
    });

  } catch (error) {
  }

  return event;
});

この場合kintone.events.onのコールバック関数の引数であるeventオブジェクトを修正しても反映されないため、以下のように、クリックされたタイミングのレコード情報を取得し、レコードをセットしなおす必要があります。

kintone.events.on("...", async (event) => {
  const button = document.createElement("button");

  button.addEventListener("click", () => {
    /** ボタンクリック時のレコード情報 */
    const { record } = kintone.app.record.get();

    try {
      // エラーが発生し得る処理
    } catch (error) {
      console.error("開発者が見るエラーメッセージ", error);
      record["フィールドコード"].error = "利用者が見るエラーメッセージ";
      kintone.app.record.set({ record });
    }
  });

  return event;
});