エラーをユーザーへ伝えるVue.jsコンポーネント作りました

こんな感じで this.$teller を catch に渡せば、ユーザーへエラー内容を伝えてくれるコンポーネントが欲しいと思い書いてみました。

Promise

SomePromiseTask()
  .then()
  .catch(this.$teller)

AsyncAwait

clickedBtn () {
  this.handleTasks()
    .then(()
    .catch(this.$teller)
},
handleTasks: async function () {
  await this.taskA()
  await this.taskB()
  await this.taskC()
  await this.taskD()
},

• Github
• Demo

Argument の種類

３種類の形式を想定しています。

• String
• Error
• Object

String

this.$teller("message")

Error

this.$teller(new Error("message"))
this.$teller(new SyntaxError("message"))

Object

this.$teller({
  "type": "error",
  "title": "title",
  "message": "message",
  "duration": 3000,
  "position": "top-right"
})

ざっくりコード解説

1. コンポーネントを Vue.extend で読み込む
2. new を使って新しいインスタンスを作る
3. $mount でマウントする
4. オプションなどを設定して、DOMへ表示させる

コード適当に抜き出し

const ErrorMessageConstructor = Vue.extend(ErrorHMessageComponent)
const instance = new ErrorMessageConstructor()
instance.vm = instance.$mount()
document.body.appendChild(instance.vm.$el)

参考にしたリポジトリ

Element

awesome-vue にある notification（toast） 系のコードを全て読んだ結果、この Element が一番参考になりました。コードの書き方が洗練されていますし、本当に考えられて書かれているUIツールキットです。コンポーネントの作り方を学習されたい方にオススメしたいです。

Vue.js本体の util.js

JavaScript の変数の型判定をするコードがたくさんあります。例えば「本当にObjectか？」「正規表現か？」など。

vue-teller 使用上の注意

破壊的な変更を伴う修正を行う予定ですので、issueなどご確認いただきながらご利用頂ければと思います。

※ この記事・コードは JavaScript 的に、よろしくない可能性があります。田舎のフリーランスでして、詳しい人に聞くことができないため、公開コードを書くことで正しい手法なのか確認も兼ねていますことをご了承ください。お気軽にご指摘頂けますと嬉しいです。（2018年に、このコメント消します）

まとめ

• vue は簡単だけど、webpack や rollup が難しい
• ElementUI のコードがかっこいい