[Vuetify]エラー発生時にモーダルダイアログを出す

概要

app.vueにおいてerrorCapturedによりv-dialogを表示させる。

app.vue

<template>
  <v-app id="app">
    <v-main>
      <router-view />
    </v-main>
    <v-dialog
      v-model="dialog"
      persistent
      width="360"
    >
      <v-card
        align="center"
      >
        <v-card-title>
          最初からやり直してください
        </v-card-title>
        <v-card-text>
          不正な操作により入力データが破損しています。
        </v-card-text>
        <v-btn
          @click="recover"
          outlined
          color="red lighten-2"
          class="mb-3"
        >OK</v-btn>
      </v-card>
    </v-dialog>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      dialog: false,
    }
  },
  errorCaptured() {
    this.dialog = true
  },
  methods: {
    recover() {
      this.dialog = false
      // その他の処理
    }
  }
}
</script>

挙動

1. Vueのすべてのページにおいて、発生したエラーは子孫コンポーネントから親コンポーネントへ伝播する（公式）。つまり最終的にすべてapp.vueまで伝播してくる。
2. app.vueのerrorCaptured内の処理が行われる。（コンポーネントによって処理を分けたい場合はこちらを参照）
3. dialogがfalse→trueに変わり、ダイアログが表示される。v-dialogでdialogをバインドしているため。
4. ダイアログ内のボタンをクリックするとrecoverメソッドが発火する
5. ダイアログが閉じられその他諸々の処理が行われる

他のエラーハンドリング方法との比較

Vueコンポーネントに仕込んでvuetifyを動かすならerrorCapturedが最も手軽。

Vue.config.errorHandlerやwindow.onerrorでは、v-dialogにバインドしたdataプロパティの値を変更したり、それに関連するメソッドを発火させることが難しい。

【追記】 コンポーネントによってerrorCapturedの処理を分岐させる

errorCapturedの第二引数vmからエラーが発生したコンポーネントの情報を取得できる。
vm.$root.$el.baseURIでエラーが発生したページのURLが取得できる

app.vue

<script>
...
  errorCaptured(e, vm, info) {
    if (vm.$root.$el.baseURI.match(/result/)) {
      // '/result'でエラーが発生した場合の処理
    } else {
      // その他のページでエラーが発生した場合の処理
    }
  },
...
</script>

参考文献