Deploy from GitHub Actions [DEV] - 2025-10-31 05:57:32

app/refresh-moments/improvement-result/improvement-proposal-client.tsx

@@ -11,6 +11,7 @@ import { RegulationModal } from '@/components/improvement-result/regulation-moda
 import { Bread } from '@/components/parts/bread';
 import { ErrorDisplay } from '@/components/parts/error-display';
 import { Button } from '@/components/ui/button';
+import { useDelayedErrorDisplay } from '@/hooks/use-delayed-error-display';
 import { useEnvironment } from '@/hooks/use-environment';
 import { useImprovementResultExpressTestMode } from '@/hooks/use-improvement-result-express-test-mode';
 import { useNotificationPermission } from '@/hooks/use-notification-permission';
@@ -505,6 +506,13 @@ function ImprovementProposalContent({ isDummyMode: propIsDummyMode = false, isEx
     dummyMode: isDummyMode,
   });
 
+  // 遅延エラー表示Hook（90秒間ローディング表示を継続）
+  const { shouldShowError, shouldShowLoading } = useDelayedErrorDisplay({
+    error: proposalTabsError,
+    isLoading: proposalTabsLoading,
+    delayMs: 90000, // 90秒（本番設定）
+  });
+
   // function markChangedWords(original: Record<string, unknown>, regulated: Record<string, unknown>): Record<string, unknown> {
   //   if (!regulated) return original;
 
@@ -693,8 +701,8 @@ function ImprovementProposalContent({ isDummyMode: propIsDummyMode = false, isEx
     }
   };
 
-  // ローディング状態を統合
-  const isLoading = isProposalsLoading || isAnalysisLoading || proposalTabsLoading;
+  // ローディング状態を統合（遅延エラー表示を考慮）
+  const isLoading = isProposalsLoading || isAnalysisLoading || shouldShowLoading;
 
   // エラー判定のデバッグ
   useEffect(() => {
@@ -739,8 +747,8 @@ function ImprovementProposalContent({ isDummyMode: propIsDummyMode = false, isEx
     );
   }
 
-  // エラー表示（エラーフラグのみで判定、errorオブジェクトは必須でない）
-  if (proposalTabsIsError && !proposalTabsLoading) {
+  // エラー表示（90秒遅延後に表示）
+  if (shouldShowError) {
     const errorMessage = proposalTabsError instanceof Error ? proposalTabsError.message : 'データの取得に失敗しました';
     return (
       <div className="flex flex-col space-y-10">

components/pages/index/pre-analysis-check.tsx

@@ -6,6 +6,7 @@ import Image from 'next/image';
 
 import { usePreAnalysis } from '@/api-client/gradio-proxy/use-pre-analysis';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { useDelayedErrorDisplay } from '@/hooks/use-delayed-error-display';
 import { useGlobalStore } from '@/store/global';
 import { useInputStore } from '@/store/input';
 import { useResultStore } from '@/store/result';
@@ -40,7 +41,7 @@ export default function PreAnalysisCheck({ retryButtonRef }: PreAnalysisCheckPro
   const [localCompetitionUrls] = useState(competitionUrls);
   const [isFieldsChanged, setIsFieldsChanged] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string>('');
-  const [showError, setShowError] = useState(false);
+  const [showError, setShowError] = useState(false); // バリデーションエラー用（即座に表示）
   const [imageErrors, setImageErrors] = useState<{ [url: string]: boolean }>({});
 
   // メールアドレスが変わったらuserIdentifierを更新
@@ -99,6 +100,13 @@ export default function PreAnalysisCheck({ retryButtonRef }: PreAnalysisCheckPro
     userIdentifier: getUserIdentifier(),
   });
 
+  // 90秒遅延エラー表示
+  const { shouldShowError } = useDelayedErrorDisplay({
+    error: preAnalysis.error,
+    isLoading: preAnalysis.isLoading,
+    delayMs: 90000, // 90秒（本番設定）
+  });
+
   const onSubmit = useCallback(async () => {
     console.log('[DEBUG] onSubmit called');
     console.log('[DEBUG] dummyMode:', dummyMode);
@@ -156,9 +164,8 @@ export default function PreAnalysisCheck({ retryButtonRef }: PreAnalysisCheckPro
       setShowAnalysisError(true);
       setGetScoreLoading(false);
 
-      // ローカル状態も設定（後方互換性のため）
+      // ローカル状態も設定（カスタマイズされたエラーメッセージのため）
       setErrorMessage(message);
-      setShowError(true);
     }
   }, [dummyMode, checkUrlFvErrors, localUpdatedCompetitionUrls, setGetScoreLoading, preAnalysis, router, setAnalysisError, setShowAnalysisError]);
 
@@ -349,14 +356,16 @@ export default function PreAnalysisCheck({ retryButtonRef }: PreAnalysisCheckPro
       )}
 
       {/* エラー表示とリトライボタン */}
-      {showError && (
+      {(shouldShowError || showError) && (
         <div className="flex min-h-[400px] flex-col items-center justify-center p-8">
           <div className="mx-auto max-w-md text-center">
             <AlertTriangle className="mx-auto mb-4 h-16 w-16 text-red-500" />
             <h2 className="mb-2 text-2xl font-semibold text-gray-900">エラーが発生しました</h2>
             <p className="mb-6 text-gray-600">
               申し訳ございません。予期しないエラーが発生しました。
-              {errorMessage && <span className="mt-2 block text-sm text-gray-500">{errorMessage}</span>}
+              {(preAnalysis.error?.message || errorMessage) && (
+                <span className="mt-2 block text-sm text-gray-500">{preAnalysis.error?.message || errorMessage}</span>
+              )}
             </p>
             <div className="flex justify-center gap-3">
               <Button

components/pages/updatedui/pre-analysis-check-update.tsx

@@ -6,6 +6,7 @@ import Image from 'next/image';
 
 import { usePreAnalysis } from '@/api-client/gradio-proxy/use-pre-analysis';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { useDelayedErrorDisplay } from '@/hooks/use-delayed-error-display';
 import { useGlobalStore } from '@/store/global';
 import { useInputStore } from '@/store/input';
 import { useResultStore } from '@/store/result';
@@ -31,7 +32,7 @@ export default function PreAnalysisCheckUpdate() {
     competitionUrls.filter((url) => !checkUrlFvErrors.includes(url)),
   );
   const [errorMessage, setErrorMessage] = useState<string>('');
-  const [showError, setShowError] = useState(false);
+  const [showError, setShowError] = useState(false); // バリデーションエラー用（即座に表示）
   const { tempImages, commonDict } = useResultStore();
   const [imageErrors, setImageErrors] = useState<{ [url: string]: boolean }>({});
 
@@ -91,6 +92,13 @@ export default function PreAnalysisCheckUpdate() {
     userIdentifier: getUserIdentifier(),
   });
 
+  // 90秒遅延エラー表示
+  const { shouldShowError } = useDelayedErrorDisplay({
+    error: preAnalysis.error,
+    isLoading: preAnalysis.isLoading,
+    delayMs: 90000, // 90秒（本番設定）
+  });
+
   const onSubmit = useCallback(async () => {
     console.log('[DEBUG] onSubmit called');
     console.log('[DEBUG] dummyMode:', dummyMode);
@@ -138,9 +146,8 @@ export default function PreAnalysisCheckUpdate() {
       setShowAnalysisError(true);
       setGetScoreLoading(false);
 
-      // ローカル状態も設定（後方互換性のため）
+      // ローカル状態も設定（カスタマイズされたエラーメッセージのため）
       setErrorMessage(message);
-      setShowError(true);
     }
   }, [dummyMode, localUpdatedCompetitionUrls, checkUrlFvErrors, setGetScoreLoading, preAnalysis, router, setAnalysisError, setShowAnalysisError]);
 
@@ -315,14 +322,16 @@ export default function PreAnalysisCheckUpdate() {
       )}
 
       {/* エラー表示とリトライボタン */}
-      {showError && (
+      {(shouldShowError || showError) && (
         <div className="flex min-h-[400px] flex-col items-center justify-center p-8">
           <div className="mx-auto max-w-md text-center">
             <AlertTriangle className="mx-auto mb-4 h-16 w-16 text-red-500" />
             <h2 className="mb-2 text-2xl font-semibold text-gray-900">エラーが発生しました</h2>
             <p className="mb-6 text-gray-600">
               申し訳ございません。予期しないエラーが発生しました。
-              {errorMessage && <span className="mt-2 block text-sm text-gray-500">{errorMessage}</span>}
+              {(preAnalysis.error?.message || errorMessage) && (
+                <span className="mt-2 block text-sm text-gray-500">{preAnalysis.error?.message || errorMessage}</span>
+              )}
             </p>
             <div className="flex justify-center gap-3">
               <Button

hooks/use-delayed-error-display.ts

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+
+export interface UseDelayedErrorDisplayOptions {
+  error: Error | null;
+  isLoading: boolean;
+  delayMs?: number; // デフォルト90000ms (90秒)
+}
+
+export interface UseDelayedErrorDisplayResult {
+  shouldShowError: boolean;
+  shouldShowLoading: boolean;
+  delayedError: Error | null;
+}
+
+/**
+ * エラー発生後も指定時間（デフォルト90秒）はローディング表示を継続し、
+ * 時間経過後にエラーを表示するHook
+ *
+ * @param options エラー、ローディング状態、遅延時間（ミリ秒）
+ * @returns エラー表示すべきか、ローディング表示すべきか、遅延後のエラー
+ */
+export function useDelayedErrorDisplay({
+  error,
+  isLoading,
+  delayMs = 90000, // 90秒（本番設定）
+}: UseDelayedErrorDisplayOptions): UseDelayedErrorDisplayResult {
+  const [errorTimestamp, setErrorTimestamp] = useState<number | null>(null);
+  const [shouldShowError, setShouldShowError] = useState(false);
+
+  // エラーが発生した時刻を記録
+  useEffect(() => {
+    if (error && !errorTimestamp) {
+      setErrorTimestamp(Date.now());
+      setShouldShowError(false);
+    } else if (!error) {
+      // エラーがクリアされた場合はリセット
+      setErrorTimestamp(null);
+      setShouldShowError(false);
+    }
+  }, [error, errorTimestamp]);
+
+  // 指定時間経過後にエラーを表示
+  useEffect(() => {
+    if (!errorTimestamp || !error || shouldShowError) {
+      // すでにエラー表示状態の場合は何もしない
+      return;
+    }
+
+    const checkElapsed = () => {
+      const elapsed = Date.now() - errorTimestamp;
+      if (elapsed >= delayMs) {
+        setShouldShowError(true);
+      }
+    };
+
+    // 初回チェック
+    checkElapsed();
+
+    // 1秒ごとにチェック
+    const interval = setInterval(checkElapsed, 1000);
+
+    return () => clearInterval(interval);
+  }, [errorTimestamp, error, delayMs, shouldShowError]);
+
+  // ローディング表示判定：
+  // - 通常ローディング中、または
+  // - エラーが発生しているが、まだ遅延時間内
+  const shouldShowLoading = isLoading || (error !== null && errorTimestamp !== null && !shouldShowError);
+
+  return {
+    shouldShowError,
+    shouldShowLoading,
+    delayedError: shouldShowError ? error : null,
+  };
+}

server/routes/gradio-proxy.ts

@@ -10,6 +10,7 @@ import { scoreStep3RequestSchema } from '@/schema/gradio-proxy/score-step3';
 import { summaryRequestSchema } from '@/schema/gradio-proxy/summary';
 import { themeByMomentRequestSchema } from '@/schema/gradio-proxy/theme-by-moment';
 import { visScoreRequestSchema } from '@/schema/gradio-proxy/vis-score';
+import { AppError } from '@/lib/errors';
 import { getDummyData } from '@/server/utils/dummy-data';
 import {
   getCheckUrl,
@@ -28,6 +29,33 @@ import {
 import { zValidator } from '@hono/zod-validator';
 import { Hono } from 'hono';
 
+/**
+ * Gradio APIエラーを統一的に処理するヘルパー関数
+ */
+function handleGradioError(error: unknown): { statusCode: number; message: string } {
+  let errorMessage = '不明なエラーが発生しました。';
+  let statusCode = 500;
+
+  if (error instanceof AppError) {
+    errorMessage = error.message;
+    statusCode = error.statusCode || 500;
+  } else if (error instanceof Error) {
+    errorMessage = error.message;
+
+    // タイムアウトエラー
+    if (error.message.includes('タイムアウト') || error.message.includes('timeout')) {
+      errorMessage = 'タイムアウトが発生しました。もう一度やり直してください。';
+      statusCode = 408;
+    }
+
+    if ('statusCode' in error && typeof error.statusCode === 'number') {
+      statusCode = error.statusCode;
+    }
+  }
+
+  return { statusCode, message: errorMessage };
+}
+
 export const gradioProxyRoute = new Hono()
   // check_url API (POST /check-url)
   .post('/check-url', zValidator('json', checkUrlRequestSchema), async (c) => {
@@ -71,24 +99,11 @@ export const gradioProxyRoute = new Hono()
       return c.json(result);
     } catch (error) {
       console.error('[CHECK_URL API] Error:', error);
-
-      let errorMessage = '不明なエラーが発生しました。';
-      let statusCode = 500;
-
-      if (error instanceof Error) {
-        errorMessage = error.message;
-
-        // タイムアウトエラー
-        if (error.message.includes('タイムアウト') || error.message.includes('timeout')) {
-          errorMessage = 'タイムアウトが発生しました。もう一度やり直してください。';
-          statusCode = 408;
-        }
-      }
-
+      const { statusCode, message } = handleGradioError(error);
       return c.json(
         {
           status: 'error',
-          message: errorMessage,
+          message,
         },
         statusCode as 400 | 408 | 500,
       );
@@ -144,23 +159,12 @@ export const gradioProxyRoute = new Hono()
 
         return c.json(result);
       } catch (error) {
-        let errorMessage = '不明なエラーが発生しました。';
-        let statusCode = 500;
-
-        if (error instanceof Error) {
-          errorMessage = error.message;
-
-          // タイムアウトエラー
-          if (error.message.includes('タイムアウト') || error.message.includes('timeout')) {
-            errorMessage = 'タイムアウトが発生しました。もう一度やり直してください。';
-            statusCode = 408;
-          }
-        }
-
+        console.error('[SCORE_STEP3 API] Error:', error);
+        const { statusCode, message } = handleGradioError(error);
         return c.json(
           {
             status: 'error',
-            message: errorMessage,
+            message,
           },
           statusCode as 400 | 408 | 500,
         );
@@ -202,22 +206,12 @@ export const gradioProxyRoute = new Hono()
 
       return c.json(result);
     } catch (error) {
-      let errorMessage = '不明なエラーが発生しました。';
-      let statusCode = 500;
-
-      if (error instanceof Error) {
-        errorMessage = error.message;
-
-        if (error.message.includes('タイムアウト') || error.message.includes('timeout')) {
-          errorMessage = 'タイムアウトが発生しました。もう一度やり直してください。';
-          statusCode = 408;
-        }
-      }
-
+      console.error('[VIS_SCORE API] Error:', error);
+      const { statusCode, message } = handleGradioError(error);
       return c.json(
         {
           status: 'error',
-          message: errorMessage,
+          message,
         },
         statusCode as 400 | 408 | 500,
       );
@@ -261,22 +255,12 @@ export const gradioProxyRoute = new Hono()
 
       return c.json(result);
     } catch (error) {
-      let errorMessage = '不明なエラーが発生しました。';
-      let statusCode = 500;
-
-      if (error instanceof Error) {
-        errorMessage = error.message;
-
-        if (error.message.includes('タイムアウト') || error.message.includes('timeout')) {
-          errorMessage = 'タイムアウトが発生しました。もう一度やり直してください。';
-          statusCode = 408;
-        }
-      }
-
+      console.error('[SUMMARY API] Error:', error);
+      const { statusCode, message } = handleGradioError(error);
       return c.json(
         {
           status: 'error',
-          message: errorMessage,
+          message,
         },
         statusCode as 400 | 408 | 500,
       );
@@ -317,22 +301,12 @@ export const gradioProxyRoute = new Hono()
 
       return c.json(result);
     } catch (error) {
-      let errorMessage = '不明なエラーが発生しました。';
-      let statusCode = 500;
-
-      if (error instanceof Error) {
-        errorMessage = error.message;
-
-        if (error.message.includes('タイムアウト') || error.message.includes('timeout')) {
-          errorMessage = 'タイムアウトが発生しました。もう一度やり直してください。';
-          statusCode = 408;
-        }
-      }
-
+      console.error('[POX API] Error:', error);
+      const { statusCode, message } = handleGradioError(error);
       return c.json(
         {
           status: 'error',
-          message: errorMessage,
+          message,
         },
         statusCode as 400 | 408 | 500,
       );
@@ -376,22 +350,12 @@ export const gradioProxyRoute = new Hono()
 
       return c.json(result);
     } catch (error) {
-      let errorMessage = '不明なエラーが発生しました。';
-      let statusCode = 500;
-
-      if (error instanceof Error) {
-        errorMessage = error.message;
-
-        if (error.message.includes('タイムアウト') || error.message.includes('timeout')) {
-          errorMessage = 'タイムアウトが発生しました。もう一度やり直してください。';
-          statusCode = 408;
-        }
-      }
-
+      console.error('[EXCEL API] Error:', error);
+      const { statusCode, message } = handleGradioError(error);
       return c.json(
         {
           status: 'error',
-          message: errorMessage,
+          message,
         },
         statusCode as 400 | 408 | 500,
       );
@@ -747,22 +711,12 @@ export const gradioProxyRoute = new Hono()
 
         return c.json(result);
       } catch (error) {
-        let errorMessage = '不明なエラーが発生しました。';
-        let statusCode = 500;
-
-        if (error instanceof Error) {
-          errorMessage = error.message;
-
-          if (error.message.includes('タイムアウト') || error.message.includes('timeout')) {
-            errorMessage = 'タイムアウトが発生しました。もう一度やり直してください。';
-            statusCode = 408;
-          }
-        }
-
+        console.error('[REFRESH_MOMENT API] Error:', error);
+        const { statusCode, message } = handleGradioError(error);
         return c.json(
           {
             status: 'error',
-            message: errorMessage,
+            message,
           },
           statusCode as 400 | 408 | 500,
         );