UnhandledRejectionエラーを握りつぶす

エラー内容

Vue.jsに設定したSentryから以下のエラーが飛んできました。

UnhandledRejection
Non-Error promise rejection captured with value: cancel

エラーの意味

promiseでcancelが返ってきたが、ハンドルできなくて失敗したよ！と言っています。

エラーコードサンプル

Vue.jsのライブラリ「Element-Plus」の確認ダイアログで発生するサンプルです。表示された確認ダイアログで「いいえ」を選択したときは、.thenではなく.catchに遷移しますが、.catchが定義されていないためUnhandledRejectionが発生します。

  ElMessageBox.confirm(
    '削除しますか？',
    '注意',
    {
      confirmButtonText: 'はい',
      cancelButtonText: 'いいえ',
      type: 'warning'
    }
  ).then(() => {
    // ～～削除処理～～
  })

対処方法

.catch式を書けば発生しません

  ElMessageBox.confirm(
    '削除しますか？',
    '注意',
    {
      confirmButtonText: 'はい',
      cancelButtonText: 'いいえ',
      type: 'warning'
    }
  ).then(() => {
    // ～～削除処理～～
  }).catch((error) => {
    // UnhandldRejectionのためにとりあえず定義する。何も処理は書かなくてもOK
  })

以上です！