Vue.js-Nuxt.jsのグローバルエラーハンドリング実装.pdf

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

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

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

1, メソッド定義のエラーハンドリングの課題

1, メソッド定義のエラーハンドリングの課題メソッド内に定義されたエラーハンドリング:

1, メソッド定義のエラーハンドリングの課題課題1: エラー判定処理が散らばるマジックナンバー、可読性が悪い

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

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

1, メソッド定義のエラーハンドリングの課題 Before: メソッド内に定義されたエラーハンドリングが…

1, メソッド定義のエラーハンドリングの課題 After: グローバルエラーハンドリングでスッキリ︕︕

2, 課題1の解決⽅法 – カスタムエラークラスの実装

2, 課題1の解決⽅法 – カスタムエラークラスの実装課題1: エラー判定処理が散らばる

2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理を例にとって説明します。

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

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

2, 課題1の解決⽅法 – カスタムエラークラスの実装異常系 HTTPステータスの分類 • クライアントエラー • 400 Bad Request（⼊⼒値不正エラー） • 401 Unauthorized（認証エラー） • 403 Forbidden（アクセス権限エラー） • 404 Not Found（NotFoundエラー） • 409 Conflict（競合エラー）

2, 課題1の解決⽅法 – カスタムエラークラスの実装 • サーバーエラー • 500 Internal Server Error（内部システムエラー） • 503 Service Unavailable（サービス利⽤不可エラー）

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

2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理のエラー処理を拡張

2, 課題1の解決⽅法 – カスタムエラークラスの実装 Before: マジックナンバーの判定処理が…

2, 課題1の解決⽅法 – カスタムエラークラスの実装 After: エラークラスの判定に︕

3, 課題2の解決⽅法 – グローバルエラーハンドリング

2, 課題1の解決⽅法 – カスタムエラークラスの実装課題2: エラーハンドリング後の処理が散らばる

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

3, 課題2の解決⽅法 – グローバルエラーハンドリング具体的なハンドリング⽅法

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

3, 課題2の解決⽅法 – グローバルエラーハンドリングエラー処理の共通関数を⽤意して

3, 課題2の解決⽅法 – グローバルエラーハンドリング各種エラーハンドラーで呼び出す = グローバルエラーハンドリング

4, Vue.js / Nuxt.js に組み込む

4, Vue.js / Nuxt.js に組み込む Vue.js に組み込む:

4, Vue.js / Nuxt.js に組み込む Nuxt.jsに組み込む: ~plugins/error-handler.js

5, まとめ

5, まとめ • グローバルエラーハンドリング • 可読性・メンテナンス性の向上 • Vue.js / Nuxt.js では Plugins を利⽤

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

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

Vue.js-Nuxt.jsのグローバルエラーハンドリング実装.pdf

Vue.js-Nuxt.jsのグローバルエラーハンドリング実装.pdf

More Decks by Norimitsu Yamashita

Other Decks in Programming

Featured

Transcript