#1361 のカスタムエラーハンドラーに関する変更を反映

AlesInfiny · Nov 18, 2024 · 99be4ab · 99be4ab
1 parent 7ac9fa3
commit 99be4ab
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 63 deletions.
diff --git a/samples/web-csr/dressca-frontend/admin/src/main.ts b/samples/web-csr/dressca-frontend/admin/src/main.ts
@@ -3,6 +3,7 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { authenticationGuard } from '@/shared/authentication/authentication-guard';
 import { globalErrorHandler } from '@/shared/error-handler/global-error-handler';
+import { createCustomErrorHandler } from '@/shared/error-handler/custom-error-handler';
 import { router } from './router';
 import App from './App.vue';
 
@@ -23,6 +24,7 @@ enableMocking().then(() => {
   app.use(router);
 
   app.use(globalErrorHandler);
+  app.use(createCustomErrorHandler());
 
   authenticationGuard(router);
 

diff --git a/samples/web-csr/dressca-frontend/admin/src/shared/error-handler/custom-error-handler.ts b/samples/web-csr/dressca-frontend/admin/src/shared/error-handler/custom-error-handler.ts
@@ -0,0 +1,73 @@
+import type { App } from 'vue';
+import { showToast } from '@/services/notification/notificationService';
+import { useRoutingStore } from '@/stores/routing/routing';
+import { router } from '@/router';
+import { customErrorHandlerKey } from '@/shared/injection-symbols';
+import {
+  CustomErrorBase,
+  UnauthorizedError,
+  NetworkError,
+  ServerError,
+} from './custom-error';
+
+export interface CustomErrorHandler {
+  install(app: App): void;
+  handle(
+    error: unknown,
+    callback: () => void,
+    handlingUnauthorizedError?: (() => void) | null,
+    handlingNetworkError?: (() => void) | null,
+    handlingServerError?: (() => void) | null,
+  ): void;
+}
+
+export function createCustomErrorHandler(): CustomErrorHandler {
+  const customErrorHandler: CustomErrorHandler = {
+    install: (app: App) => {
+      app.provide(customErrorHandlerKey, customErrorHandler);
+    },
+    handle: (
+      error: unknown,
+      callback: () => void,
+      handlingUnauthorizedError: (() => void) | null = null,
+      handlingNetworkError: (() => void) | null = null,
+      handlingServerError: (() => void) | null = null,
+    ) => {
+      // ハンドリングできるエラーの場合はコールバックを実行
+      if (error instanceof CustomErrorBase) {
+        callback();
+
+        // エラーの種類によって共通処理を行う
+        // switch だと instanceof での判定ができないため if 文で判定
+        if (error instanceof UnauthorizedError) {
+          if (handlingUnauthorizedError) {
+            handlingUnauthorizedError();
+          } else {
+            const routingStore = useRoutingStore();
+            routingStore.setRedirectFrom(
+              router.currentRoute.value.path.slice(1),
+            );
+            router.push({ name: 'authentication/login' });
+            showToast('ログインしてください。');
+          }
+        } else if (error instanceof NetworkError) {
+          if (handlingNetworkError) {
+            handlingNetworkError();
+          } else {
+            showToast('ネットワークエラーが発生しました。');
+          }
+        } else if (error instanceof ServerError) {
+          if (handlingServerError) {
+            handlingServerError();
+          } else {
+            showToast('サーバーエラーが発生しました。');
+          }
+        }
+      } else {
+        // ハンドリングできないエラーの場合は上位にエラーを投げる
+        throw error;
+      }
+    },
+  };
+  return customErrorHandler;
+}
diff --git a/samples/web-csr/dressca-frontend/admin/src/shared/error-handler/error-handler.ts b/samples/web-csr/dressca-frontend/admin/src/shared/error-handler/error-handler.ts
diff --git a/samples/web-csr/dressca-frontend/admin/src/shared/error-handler/use-custom-error-handler.ts b/samples/web-csr/dressca-frontend/admin/src/shared/error-handler/use-custom-error-handler.ts
@@ -0,0 +1,7 @@
+import { inject } from 'vue';
+import type { CustomErrorHandler } from './custom-error-handler';
+import { customErrorHandlerKey } from '../injection-symbols';
+
+export function useCustomErrorHandler(): CustomErrorHandler {
+  return inject(customErrorHandlerKey)!;
+}
diff --git a/samples/web-csr/dressca-frontend/admin/src/shared/injection-symbols.ts b/samples/web-csr/dressca-frontend/admin/src/shared/injection-symbols.ts
@@ -0,0 +1,6 @@
+import type { InjectionKey } from 'vue';
+import type { CustomErrorHandler } from './error-handler/custom-error-handler';
+
+export const customErrorHandlerKey = Symbol(
+  'customErrorHandler',
+) as InjectionKey<CustomErrorHandler>;
diff --git a/samples/web-csr/dressca-frontend/admin/src/views/authentication/LoginView.vue b/samples/web-csr/dressca-frontend/admin/src/views/authentication/LoginView.vue
@@ -7,7 +7,7 @@ import { loginAsync } from '@/services/authentication/authentication-service';
 import { EnvelopeIcon, KeyIcon } from '@heroicons/vue/24/solid';
 import { useRoutingStore } from '@/stores/routing/routing';
 import { showToast } from '@/services/notification/notificationService';
-import { errorHandler } from '@/shared/error-handler/error-handler';
+import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler';
 
 // フォーム固有のバリデーション定義
 const formSchema = yup.object({
@@ -16,6 +16,7 @@ const formSchema = yup.object({
 });
 
 const router = useRouter();
+const customErrorHandler = useCustomErrorHandler();
 
 const { meta } = useForm({ validationSchema: formSchema });
 const { value: userName, errorMessage: userNameError } =
@@ -33,7 +34,7 @@ const login = async () => {
   try {
     await loginAsync();
   } catch (error) {
-    errorHandler(error, () => {
+    customErrorHandler.handle(error, () => {
       showToast('ログインに失敗しました。');
     });
   }

diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue
@@ -7,12 +7,14 @@ import {
   fetchCategoriesAndBrands,
 } from '@/services/catalog/catalog-service';
 import { showToast } from '@/services/notification/notificationService';
-import { errorHandler } from '@/shared/error-handler/error-handler';
+import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler';
 import NotificationModal from '@/components/NotificationModal.vue';
 import { useRouter } from 'vue-router';
 import { useForm } from 'vee-validate';
 import { catalogItemSchema } from '@/validation/validation-items';
 
+const customErrorHandler = useCustomErrorHandler();
+
 const { errors, values, meta, defineField } = useForm({
   validationSchema: catalogItemSchema,
   initialValues: {
@@ -57,7 +59,7 @@ const AddItem = async () => {
     );
     modalState.showAddNotice = true;
   } catch (error) {
-    errorHandler(error, () => {
+    customErrorHandler.handle(error, () => {
       showToast('カタログアイテムの追加に失敗しました。');
     });
   }
@@ -72,7 +74,7 @@ onMounted(async () => {
   try {
     await fetchCategoriesAndBrands();
   } catch (error) {
-    errorHandler(error, () => {
+    customErrorHandler.handle(error, () => {
       showToast('カテゴリとブランド情報の取得に失敗しました。');
     });
   }

diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
@@ -10,7 +10,6 @@ import {
 import { assetHelper } from '@/shared/helpers/assetHelper';
 import { useCatalogStore } from '@/stores/catalog/catalog';
 import { showToast } from '@/services/notification/notificationService';
-import { errorHandler } from '@/shared/error-handler/error-handler';
 import ConfirmationModal from '@/components/ConfirmationModal.vue';
 import NotificationModal from '@/components/NotificationModal.vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -21,7 +20,9 @@ import {
   NotFoundError,
 } from '@/shared/error-handler/custom-error';
 import type { CatalogItemResponse } from '@/generated/api-client';
+import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler';
 
+const customErrorHandler = useCustomErrorHandler();
 const catalogStore = useCatalogStore();
 const router = useRouter();
 const route = useRoute();
@@ -139,12 +140,12 @@ const deleteItemAsync = async () => {
     modalState.showDeleteNotice = true;
   } catch (error) {
     if (error instanceof NotFoundError) {
-      errorHandler(error, () => {
+      customErrorHandler.handle(error, () => {
         showToast('更新対象のカタログアイテムが見つかりませんでした。');
         router.push({ name: '/catalog/items' });
       });
     } else {
-      errorHandler(error, () => {
+      customErrorHandler.handle(error, () => {
         showToast('カタログアイテムの削除に失敗しました。');
       });
     }
@@ -172,14 +173,14 @@ const updateItemAsync = async () => {
       showToast('更新対象のカタログアイテムが見つかりませんでした。');
       router.push({ name: 'catalog/items' });
     } else if (error instanceof ConflictError) {
-      errorHandler(error, async () => {
+      customErrorHandler.handle(error, async () => {
         showToast(
           'カタログアイテムの更新が競合しました。もう一度更新してください。',
         );
         await reFetchItemAsync(id);
       });
     } else {
-      errorHandler(error, async () => {
+      customErrorHandler.handle(error, async () => {
         showToast('カタログアイテムの更新に失敗しました。');
       });
     }

diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsView.vue
@@ -9,10 +9,11 @@ import { storeToRefs } from 'pinia';
 import { useCatalogStore } from '@/stores/catalog/catalog';
 import { currencyHelper } from '@/shared/helpers/currencyHelper';
 import { assetHelper } from '@/shared/helpers/assetHelper';
-import { errorHandler } from '@/shared/error-handler/error-handler';
+import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler';
 import { showToast } from '@/services/notification/notificationService';
 
 const router = useRouter();
+const customErrorHandler = useCustomErrorHandler();
 const catalogStore = useCatalogStore();
 const { getItems } = storeToRefs(catalogStore);
 
@@ -24,7 +25,7 @@ onMounted(async () => {
     await fetchCategoriesAndBrands();
     await fetchItems(0, 0);
   } catch (error) {
-    errorHandler(error, () => {
+    customErrorHandler.handle(error, () => {
       showToast('カタログアイテムの取得に失敗しました。');
     });
   }