エラーハンドリング

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;
});

具体的にどのようにエラーを検知し、利用者への通知、開発者の確認を行うのかをまとめたものを別の記事として作成しています。

よろしければ合わせてご覧いただけますと幸いです。

kintone のエラーハンドリング入門

最後まで読んでいただき、ありがとうございました！