Vue.js-Nuxt.jsのグローバルエラーハンドリング実装.pdf
by
Norimitsu Yamashita
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Copyright ©2019 Grandream Inc. All Rights Reserved. Meguro.es # 23 @ Wantedly, Inc. Vue.js / Nuxt.js の グローバルエラーハンドリング実装
Slide 2
Slide 2 text
- 2 - Copyright ©2019 Grandream Inc. All Rights Reserved. ⾃⼰紹介 @nori3tsu ⼭下 徳光 / Norimitsu Yamashita ⽬⿊⻄⼝にある 株式会社グランドリーム という会社をやってます。 SPA/PWA+AWSサーバーレスを活⽤したアプリ開発が得意です。 最近は、クライアント/サーバーのコードにTypeScriptを使ってい ます。 norimitsu.yamashita nori3tsu
Slide 3
Slide 3 text
- 3 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 2, 課題1の解決⽅法 – カスタムエラークラス 4, 課題2の解決⽅法 – グローバルエラーハンドリング 5, Vue.js / Nuxt.js に組み込む 6, まとめ
Slide 4
Slide 4 text
- 4 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題
Slide 5
Slide 5 text
- 5 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 メソッド内に定義されたエラーハンドリング:
Slide 6
Slide 6 text
- 6 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 課題1: エラー判定処理が散らばる マジックナンバー、可読性が悪い
Slide 7
Slide 7 text
- 7 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 課題2: エラーハンドリング後の処理が散らばる 様々な場所に同じ業務処理があると、 コードの変更に弱くなる。
Slide 8
Slide 8 text
- 8 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 • 課題1: エラー判定処理が散らばる • -> カスタムエラークラスの作成 • 課題2: エラーハンドリング後の処理が散らばる • -> グローバルエラーハンドリング
Slide 9
Slide 9 text
- 9 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 Before: メソッド内に定義されたエラーハンドリングが…
Slide 10
Slide 10 text
- 10 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 After: グローバルエラーハンドリングでスッキリ︕︕
Slide 11
Slide 11 text
- 11 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装
Slide 12
Slide 12 text
- 12 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 課題1: エラー判定処理が散らばる
Slide 13
Slide 13 text
- 13 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理を例にとって説明します。
Slide 14
Slide 14 text
- 14 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理で発⽣するエラーは どんなものがあるでしょうか︖ HTTPステータスコード
Slide 15
Slide 15 text
- 15 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 HTTPステータスコードは、HTTPにおいて Webサーバからのレスポンスの意味を表現す る3桁の数字からなるコードである。 Wikipedia
Slide 16
Slide 16 text
- 16 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 異常系 HTTPステータスの分類 • クライアントエラー • 400 Bad Request(⼊⼒値不正エラー) • 401 Unauthorized(認証エラー) • 403 Forbidden(アクセス権限エラー) • 404 Not Found(NotFoundエラー) • 409 Conflict(競合エラー)
Slide 17
Slide 17 text
- 17 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 • サーバーエラー • 500 Internal Server Error(内部システム エラー) • 503 Service Unavailable(サービス利⽤不 可エラー)
Slide 18
Slide 18 text
- 18 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理のカスタムエラークラスの実装 https://github.com/necojackarc/extensible-custom-error
Slide 19
Slide 19 text
- 19 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理のエラー処理を拡張
Slide 20
Slide 20 text
- 20 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 Before: マジックナンバーの判定処理が…
Slide 21
Slide 21 text
- 21 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 After: エラークラスの判定に︕
Slide 22
Slide 22 text
- 22 - Copyright ©2019 Grandream Inc. All Rights Reserved. 3, 課題2の解決⽅法 – グローバルエラーハン ドリング
Slide 23
Slide 23 text
- 23 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 課題2: エラーハンドリング後の処理が散らばる
Slide 24
Slide 24 text
- 24 - Copyright ©2019 Grandream Inc. All Rights Reserved. 3, 課題2の解決⽅法 – グローバルエラーハンドリング Vue.js で発⽣するエラーのハンドリング⽅法 1. Vue.js 内で発⽣したエラー • data, computed, methods 等 2. Vue.js 外で発⽣したエラー • インスタンス変数の初期化 等 3. Promise.rejected エラー • ⾮同期処理エラーのキャッチ漏れ
Slide 25
Slide 25 text
- 25 - Copyright ©2019 Grandream Inc. All Rights Reserved. 3, 課題2の解決⽅法 – グローバルエラーハンドリング 具体的なハンドリング⽅法
Slide 26
Slide 26 text
- 26 - Copyright ©2019 Grandream Inc. All Rights Reserved. 3, 課題2の解決⽅法 – グローバルエラーハンドリング Vue.jsのグローバルエラーハンドリングとは…︖ Vue.jsで発⽣する 3パターンのエラーを処理する 共通関数処理のこと。
Slide 27
Slide 27 text
- 27 - Copyright ©2019 Grandream Inc. All Rights Reserved. 3, 課題2の解決⽅法 – グローバルエラーハンドリング エラー処理の共通関数を⽤意して
Slide 28
Slide 28 text
- 28 - Copyright ©2019 Grandream Inc. All Rights Reserved. 3, 課題2の解決⽅法 – グローバルエラーハンドリング 各種エラーハンドラーで呼び出す = グローバルエラーハンドリング
Slide 29
Slide 29 text
- 29 - Copyright ©2019 Grandream Inc. All Rights Reserved. 4, Vue.js / Nuxt.js に組み込む
Slide 30
Slide 30 text
- 30 - Copyright ©2019 Grandream Inc. All Rights Reserved. 4, Vue.js / Nuxt.js に組み込む Vue.js に組み込む:
Slide 31
Slide 31 text
- 31 - Copyright ©2019 Grandream Inc. All Rights Reserved. 4, Vue.js / Nuxt.js に組み込む Nuxt.jsに組み込む: ~plugins/error-handler.js
Slide 32
Slide 32 text
- 32 - Copyright ©2019 Grandream Inc. All Rights Reserved. 5, まとめ
Slide 33
Slide 33 text
- 33 - Copyright ©2019 Grandream Inc. All Rights Reserved. 5, まとめ • グローバルエラーハンドリング • 可読性・メンテナンス性の向上 • Vue.js / Nuxt.js では Plugins を利⽤
Slide 34
Slide 34 text
- 34 - Copyright ©2019 Grandream Inc. All Rights Reserved. さいごに… • ⼀緒に働いてくれるエンジニア仲間 • 下記の技術を使ったお仕事 • TypeScript • Vue.js / Nuxt.js • SPA / PWA / BFF / API • AWSサーバーレス ⼤募集中︕︕
Slide 35
Slide 35 text
- 35 - Copyright ©2019 Grandream Inc. All Rights Reserved. ご清聴 ありがとうございました 開発のご相談はHPまで︕