Vue.js-Nuxt.jsのグローバルエラーハンドリング実装.pdf

 Vue.js-Nuxt.jsのグローバルエラーハンドリング実装.pdf

08ceda3cf12353200928f267a4e8e110?s=128

Norimitsu Yamashita

October 10, 2019
Tweet

Transcript

  1. Copyright ©2019 Grandream Inc. All Rights Reserved. Meguro.es # 23

    @ Wantedly, Inc. Vue.js / Nuxt.js の グローバルエラーハンドリング実装
  2. - 2 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    ⾃⼰紹介 @nori3tsu ⼭下 徳光 / Norimitsu Yamashita ⽬⿊⻄⼝にある 株式会社グランドリーム という会社をやってます。 SPA/PWA+AWSサーバーレスを活⽤したアプリ開発が得意です。 最近は、クライアント/サーバーのコードにTypeScriptを使ってい ます。 norimitsu.yamashita nori3tsu
  3. - 3 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    1, メソッド定義のエラーハンドリングの課題 2, 課題1の解決⽅法 – カスタムエラークラス 4, 課題2の解決⽅法 – グローバルエラーハンドリング 5, Vue.js / Nuxt.js に組み込む 6, まとめ
  4. - 4 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    1, メソッド定義のエラーハンドリングの課題
  5. - 5 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    1, メソッド定義のエラーハンドリングの課題 メソッド内に定義されたエラーハンドリング:
  6. - 6 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    1, メソッド定義のエラーハンドリングの課題 課題1: エラー判定処理が散らばる マジックナンバー、可読性が悪い
  7. - 7 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    1, メソッド定義のエラーハンドリングの課題 課題2: エラーハンドリング後の処理が散らばる 様々な場所に同じ業務処理があると、 コードの変更に弱くなる。
  8. - 8 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    1, メソッド定義のエラーハンドリングの課題 • 課題1: エラー判定処理が散らばる • -> カスタムエラークラスの作成 • 課題2: エラーハンドリング後の処理が散らばる • -> グローバルエラーハンドリング
  9. - 9 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    1, メソッド定義のエラーハンドリングの課題 Before: メソッド内に定義されたエラーハンドリングが…
  10. - 10 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    1, メソッド定義のエラーハンドリングの課題 After: グローバルエラーハンドリングでスッキリ︕︕
  11. - 11 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    2, 課題1の解決⽅法 – カスタムエラークラスの実装
  12. - 12 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    2, 課題1の解決⽅法 – カスタムエラークラスの実装 課題1: エラー判定処理が散らばる
  13. - 13 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理を例にとって説明します。
  14. - 14 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理で発⽣するエラーは どんなものがあるでしょうか︖ HTTPステータスコード
  15. - 15 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    2, 課題1の解決⽅法 – カスタムエラークラスの実装 HTTPステータスコードは、HTTPにおいて Webサーバからのレスポンスの意味を表現す る3桁の数字からなるコードである。 Wikipedia
  16. - 16 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    2, 課題1の解決⽅法 – カスタムエラークラスの実装 異常系 HTTPステータスの分類 • クライアントエラー • 400 Bad Request(⼊⼒値不正エラー) • 401 Unauthorized(認証エラー) • 403 Forbidden(アクセス権限エラー) • 404 Not Found(NotFoundエラー) • 409 Conflict(競合エラー)
  17. - 17 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    2, 課題1の解決⽅法 – カスタムエラークラスの実装 • サーバーエラー • 500 Internal Server Error(内部システム エラー) • 503 Service Unavailable(サービス利⽤不 可エラー)
  18. - 18 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理のカスタムエラークラスの実装 https://github.com/necojackarc/extensible-custom-error
  19. - 19 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理のエラー処理を拡張
  20. - 20 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    2, 課題1の解決⽅法 – カスタムエラークラスの実装 Before: マジックナンバーの判定処理が…
  21. - 21 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    2, 課題1の解決⽅法 – カスタムエラークラスの実装 After: エラークラスの判定に︕
  22. - 22 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    3, 課題2の解決⽅法 – グローバルエラーハン ドリング
  23. - 23 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    2, 課題1の解決⽅法 – カスタムエラークラスの実装 課題2: エラーハンドリング後の処理が散らばる
  24. - 24 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    3, 課題2の解決⽅法 – グローバルエラーハンドリング Vue.js で発⽣するエラーのハンドリング⽅法 1. Vue.js 内で発⽣したエラー • data, computed, methods 等 2. Vue.js 外で発⽣したエラー • インスタンス変数の初期化 等 3. Promise.rejected エラー • ⾮同期処理エラーのキャッチ漏れ
  25. - 25 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    3, 課題2の解決⽅法 – グローバルエラーハンドリング 具体的なハンドリング⽅法
  26. - 26 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    3, 課題2の解決⽅法 – グローバルエラーハンドリング Vue.jsのグローバルエラーハンドリングとは…︖ Vue.jsで発⽣する 3パターンのエラーを処理する 共通関数処理のこと。
  27. - 27 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    3, 課題2の解決⽅法 – グローバルエラーハンドリング エラー処理の共通関数を⽤意して
  28. - 28 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    3, 課題2の解決⽅法 – グローバルエラーハンドリング 各種エラーハンドラーで呼び出す = グローバルエラーハンドリング
  29. - 29 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    4, Vue.js / Nuxt.js に組み込む
  30. - 30 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    4, Vue.js / Nuxt.js に組み込む Vue.js に組み込む:
  31. - 31 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    4, Vue.js / Nuxt.js に組み込む Nuxt.jsに組み込む: ~plugins/error-handler.js
  32. - 32 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    5, まとめ
  33. - 33 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    5, まとめ • グローバルエラーハンドリング • 可読性・メンテナンス性の向上 • Vue.js / Nuxt.js では Plugins を利⽤
  34. - 34 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    さいごに… • ⼀緒に働いてくれるエンジニア仲間 • 下記の技術を使ったお仕事 • TypeScript • Vue.js / Nuxt.js • SPA / PWA / BFF / API • AWSサーバーレス ⼤募集中︕︕
  35. - 35 - Copyright ©2019 Grandream Inc. All Rights Reserved.

    ご清聴 ありがとうございました 開発のご相談はHPまで︕