@akinon/next 2.0.0-beta.17 → 2.0.0-beta.19

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @akinon/next
 
+## 2.0.0-beta.19
+
+### Minor Changes
+
+- cd68a97a: ZERO-4126: Enhance error handling in appFetch and related data handlers to throw notFound on 404 and 422 errors
+
+## 2.0.0-beta.18
+
+### Minor Changes
+
+- 929374c5: ZERO-3278: refactor variable names for better readability and consistency
+- 71f8011d: ZERO-3271: remove code repetition in logger functions using closures
+- 9be2c081: ZERO-3243: Improve basket update query handling with optimistic updates
+- bd431e36: ZERO-3278: improve checkout validation error messages for better user guidance
+- 54eac86b: ZERO-3271: add development logger system
+
 ## 2.0.0-beta.17
 
 ### Minor Changes

package/components/client-root.tsx

@@ -1,6 +1,9 @@
 'use client';
 
+import React from 'react';
 import { useMobileIframeHandler } from '../hooks';
+import { LoggerPopup } from './logger-popup';
+import { LoggerProvider } from '../hooks/use-logger-context';
 import * as Sentry from '@sentry/nextjs';
 import { initSentry } from '../sentry';
 import { useEffect } from 'react';
@@ -12,7 +15,9 @@ export default function ClientRoot({
   children: React.ReactNode;
   sessionId?: string;
 }) {
-  const { preventPageRender } = useMobileIframeHandler({ sessionId });
+  const { preventPageRender } = useMobileIframeHandler({
+    sessionId: sessionId || ''
+  });
 
   const initializeSentry = async () => {
     const response = await fetch('/api/sentry', { next: { revalidate: 0 } });
@@ -35,5 +40,10 @@ export default function ClientRoot({
     return null;
   }
 
-  return <>{children}</>;
+  return (
+    <LoggerProvider>
+      {children}
+      <LoggerPopup />
+    </LoggerProvider>
+  );
 }

package/components/index.ts

@@ -21,3 +21,4 @@ export * from './link';
 export * from './pagination';
 export * from './live-commerce';
 export * from './file-input';
+export * from './logger-popup';

package/components/logger-popup.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import React, { useState, useCallback, memo, useMemo } from 'react';
+import { LogEntry } from '../hooks/use-logger';
+import { useLoggerContext } from '../hooks/use-logger-context';
+
+const LoggerAnimations = ({ color = '#dc2626' }: { color?: string }) => (
+  <style jsx global>{`
+    @keyframes pulse {
+      0% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 ${color}80;
+      }
+
+      70% {
+        transform: scale(1.05);
+        box-shadow: 0 0 0 10px ${color}00;
+      }
+
+      100% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 ${color}00;
+      }
+    }
+  `}</style>
+);
+
+const LogLevelColors = {
+  warn: '#ff9800', // orange
+  error: '#f44336' // red
+};
+
+const LoggerTrigger = memo(
+  ({
+    onClick,
+    logCount = 0,
+    currentColor
+  }: {
+    onClick: () => void;
+    logCount?: number;
+    currentColor: string;
+  }) => {
+    return (
+      <button
+        onClick={onClick}
+        className="fixed bottom-4 right-4 w-14 h-14 border border-white rounded-full flex items-center justify-center shadow-lg z-[9999] hover:opacity-90 transition-colors"
+        aria-label="Open Logger"
+        style={{
+          backgroundColor: currentColor,
+          ...(logCount > 0 && {
+            animation: 'pulse 2s infinite'
+          })
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="text-white size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+          />
+        </svg>
+
+        {logCount > 0 && (
+          <span
+            className="absolute w-5 h-5 -bottom-[5px] p-1 -left-[5px] border-2 border-white rounded-full flex items-center justify-center text-[8px] text-white font-bold"
+            style={{
+              backgroundColor: currentColor
+            }}
+          >
+            {logCount > 99 ? '99+' : logCount}
+          </span>
+        )}
+      </button>
+    );
+  }
+);
+
+LoggerTrigger.displayName = 'LoggerTrigger';
+
+const LogItem = memo(({ log }: { log: LogEntry }) => {
+  const [expanded, setExpanded] = useState(false);
+  const hasPayload = log.payload && Object.keys(log.payload).length > 0;
+
+  const toggleExpanded = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+
+  return (
+    <div className="border-b border-gray-200 py-2">
+      <div className="relative">
+        <div
+          className="absolute top-0 left-0 w-3 h-3 rounded-full mt-1.5 mr-2 flex-shrink-0"
+          style={{
+            backgroundColor: LogLevelColors[log.level],
+            boxShadow: `0 0 5px ${LogLevelColors[log.level]}`
+          }}
+        />
+        <div className="ml-6">
+          <div className="flex justify-between">
+            <span
+              className="font-medium capitalize"
+              style={{
+                color: LogLevelColors[log.level]
+              }}
+            >
+              {log.level}
+            </span>
+            <span className="text-xs text-gray-500">
+              {log.timestamp.toLocaleTimeString()}
+            </span>
+          </div>
+          <p className="text-sm">{log.message}</p>
+          {hasPayload && (
+            <button
+              onClick={toggleExpanded}
+              className="text-xs text-blue-500 mt-1 hover:text-blue-700 transition-colors"
+            >
+              {expanded ? 'Hide Details' : 'Show Details'}
+            </button>
+          )}
+          {expanded && hasPayload && (
+            <pre className="text-xs bg-gray-100 p-2 mt-1 rounded overflow-auto max-h-96 max-w-full">
+              {JSON.stringify(log.payload, null, 2)}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+LogItem.displayName = 'LogItem';
+
+export const LoggerPopup = () => {
+  const {
+    logs,
+    isVisible,
+    toggleVisibility,
+    clearLogs,
+    isDevelopment,
+    hasError,
+    hasWarning
+  } = useLoggerContext();
+
+  const currentColor = useMemo(() => {
+    if (logs.length === 0) return '#b5afaf';
+    if (hasError) return '#dc2626';
+    if (hasWarning) return '#ff9800';
+
+    return '#b5afaf';
+  }, [logs.length, hasError, hasWarning]);
+
+  if (!isDevelopment) {
+    return null;
+  }
+
+  if (!isVisible) {
+    return (
+      <>
+        <LoggerAnimations color={currentColor} />
+        <LoggerTrigger
+          onClick={toggleVisibility}
+          logCount={logs.length}
+          currentColor={currentColor}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <LoggerAnimations color={currentColor} />
+      <LoggerTrigger
+        onClick={toggleVisibility}
+        logCount={logs.length}
+        currentColor={currentColor}
+      />
+      <div className="fixed bottom-20 right-4 w-96 max-w-[calc(100vw-2rem)] bg-white rounded-lg shadow-xl z-50 border-2 border-gray-200 max-h-[70vh] flex flex-col">
+        <div className="flex items-center justify-between p-3 border-b border-gray-200">
+          <h3 className="font-bold flex items-center">Development Logger</h3>
+          <div className="flex space-x-2">
+            <button
+              onClick={clearLogs}
+              className="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded transition-colors"
+            >
+              Clear
+            </button>
+            <button
+              onClick={toggleVisibility}
+              className="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded transition-colors"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+        <div className="overflow-y-auto flex-grow p-3">
+          {logs.length === 0 ? (
+            <p className="text-gray-500 text-center py-4">No logs yet</p>
+          ) : (
+            logs.map((log) => <LogItem key={log.id} log={log} />)
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

package/data/client/basket.ts

@@ -104,6 +104,45 @@ export const basketApi = api.injectEndpoints({
         method: 'PUT',
         body
       }),
+      async onQueryStarted(_, { dispatch, queryFulfilled }) {
+        try {
+          const { data } = await queryFulfilled;
+
+          dispatch(
+            basketApi.util.updateQueryData(
+              'getBasket',
+              undefined,
+              () => data.basket
+            )
+          );
+
+          if (data.basket.namespace) {
+            dispatch(
+              basketApi.util.updateQueryData(
+                'getBasketDetail',
+                { namespace: data.basket.namespace },
+                () => data.basket
+              )
+            );
+          }
+
+          dispatch(
+            basketApi.util.updateQueryData(
+              'getAllBaskets',
+              undefined,
+              (baskets) => {
+                if (!baskets) return baskets;
+
+                return baskets.map((basket) =>
+                  basket.pk === data.basket.pk ? data.basket : basket
+                );
+              }
+            )
+          );
+        } catch (error) {
+          console.error('Error updating quantity:', error);
+        }
+      },
       invalidatesTags: ['MultiBasket', 'Basket', 'MiniBasket']
     }),
     clearBasket: build.mutation<Basket, void>({

package/data/client/checkout.ts

@@ -33,6 +33,16 @@ import {
   buildDirectPurchaseForm,
   buildPurchaseForm
 } from '@akinon/pz-masterpass/src/utils';
+import { devLogger } from '@akinon/next/hooks/use-logger-context';
+import { LogLevel } from '@akinon/next/hooks/use-logger';
+
+const getLatestState = async (getState: () => any): Promise<any> => {
+  await new Promise((resolve) => setTimeout(resolve, 250));
+
+  return getState();
+};
+
+const recentLogMessages = new Map<string, number>();
 
 const getStore = async (): Promise<AppStore> => {
   const { store } = await import('redux/store');
@@ -49,6 +59,53 @@ interface CheckoutResponse {
   redirect_url?: string;
 }
 
+const validateCheckoutState = (
+  state: any,
+  validations: Array<{
+    condition: (state: any) => boolean;
+    errorMessage: string;
+    severity?: LogLevel;
+    data?: any;
+    action?: () => void;
+  }>
+) => {
+  validations.forEach(
+    ({
+      condition,
+      errorMessage,
+      severity = 'error',
+      data: logData,
+      action
+    }) => {
+      if (condition(state)) {
+        const now = Date.now();
+        const lastLogged = recentLogMessages.get(errorMessage) || 0;
+
+        if (now - lastLogged > 2000) {
+          recentLogMessages.set(errorMessage, now);
+
+          switch (severity) {
+            case 'error':
+              devLogger.error(
+                errorMessage,
+                logData || state.checkout?.preOrder
+              );
+              action?.();
+              break;
+            case 'warn':
+              devLogger.warn(errorMessage, logData || state.checkout?.preOrder);
+              action?.();
+              break;
+            default:
+              devLogger.info(errorMessage, logData || state.checkout?.preOrder);
+              action?.();
+          }
+        }
+      }
+    }
+  );
+};
+
 interface SetAddressesParams {
   shippingAddressPk: number;
   billingAddressPk: number;
@@ -195,6 +252,20 @@ const completeMasterpassPayment = async (
   });
 };
 
+let checkoutAbortController = new AbortController();
+
+export const getCheckoutAbortSignal = () => {
+  if (checkoutAbortController.signal.aborted) {
+    checkoutAbortController = new AbortController();
+  }
+  return checkoutAbortController.signal;
+};
+
+const abortCheckout = () => {
+  checkoutAbortController.abort();
+  checkoutAbortController = new AbortController();
+};
+
 export const checkoutApi = api.injectEndpoints({
   endpoints: (build) => ({
     fetchCheckout: build.query<CheckoutResponse, void>({
@@ -381,12 +452,33 @@ export const checkoutApi = api.injectEndpoints({
         method: 'POST',
         body: {
           delivery_option: String(pk)
-        }
+        },
+        signal: getCheckoutAbortSignal()
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
         dispatch(setShippingStepBusy(true));
-        await queryFulfilled;
-        dispatch(setShippingStepBusy(false));
+
+        const state = await getLatestState(getState);
+
+        validateCheckoutState(state, [
+          {
+            condition: (state) => {
+              const preOrder = state.checkout?.preOrder;
+
+              return preOrder?.basket?.basketitem_set?.length === 0;
+            },
+            errorMessage:
+              'Your shopping basket is empty. Please add items to your basket before selecting a delivery option.',
+            action: () => abortCheckout()
+          }
+        ]);
+
+        try {
+          await queryFulfilled;
+          dispatch(setShippingStepBusy(false));
+        } catch (error) {
+          dispatch(setShippingStepBusy(false));
+        }
       }
     }),
     setAddresses: build.mutation<CheckoutResponse, SetAddressesParams>({
@@ -398,12 +490,36 @@ export const checkoutApi = api.injectEndpoints({
         body: {
           shipping_address: String(shippingAddressPk),
           billing_address: String(billingAddressPk)
-        }
+        },
+        signal: getCheckoutAbortSignal()
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
         dispatch(setShippingStepBusy(true));
-        await queryFulfilled;
-        dispatch(setShippingStepBusy(false));
+
+        const state = await getLatestState(getState);
+
+        validateCheckoutState(state, [
+          {
+            condition: (state) => {
+              const deliveryOptions = state.checkout?.deliveryOptions;
+              const preOrder = state.checkout?.preOrder;
+
+              return deliveryOptions?.length > 0
+                ? preOrder && !preOrder.delivery_option?.pk
+                : false;
+            },
+            errorMessage:
+              'You need to select a delivery option before setting your addresses. Dispatch setAddresses action after delivery option selection.',
+            action: () => abortCheckout()
+          }
+        ]);
+
+        try {
+          await queryFulfilled;
+          dispatch(setShippingStepBusy(false));
+        } catch (error) {
+          dispatch(setShippingStepBusy(false));
+        }
       }
     }),
     setShippingOption: build.mutation<CheckoutResponse, number>({
@@ -414,12 +530,43 @@ export const checkoutApi = api.injectEndpoints({
         method: 'POST',
         body: {
           shipping_option: String(pk)
-        }
+        },
+        signal: getCheckoutAbortSignal()
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
         dispatch(setShippingStepBusy(true));
-        await queryFulfilled;
-        dispatch(setShippingStepBusy(false));
+
+        const state = await getLatestState(getState);
+
+        validateCheckoutState(state, [
+          {
+            condition: (state) => {
+              const preOrder = state.checkout?.preOrder;
+
+              return !preOrder?.billing_address;
+            },
+            errorMessage:
+              'You need to provide a billing address before selecting a shipping option. Dispatch setShippingOption action after billing address selection.',
+            action: () => abortCheckout()
+          },
+          {
+            condition: (state) => {
+              const preOrder = state.checkout?.preOrder;
+
+              return !preOrder?.shipping_address;
+            },
+            errorMessage:
+              'You need to provide a shipping address before selecting a shipping option. Dispatch setShippingOption action after shipping address selection.',
+            action: () => abortCheckout()
+          }
+        ]);
+
+        try {
+          await queryFulfilled;
+          dispatch(setShippingStepBusy(false));
+        } catch (error) {
+          dispatch(setShippingStepBusy(false));
+        }
       }
     }),
     setDataSourceShippingOptions: build.mutation<CheckoutResponse, number[]>({
@@ -467,16 +614,37 @@ export const checkoutApi = api.injectEndpoints({
         method: 'POST',
         body: {
           payment_option: String(pk)
-        }
+        },
+        signal: getCheckoutAbortSignal()
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
         dispatch(setPaymentStepBusy(true));
         dispatch(setInstallmentOptions([]));
         dispatch(setBankAccounts([]));
         dispatch(setSelectedBankAccountPk(null));
         dispatch(setCardType(null));
-        await queryFulfilled;
-        dispatch(setPaymentStepBusy(false));
+
+        const state = await getLatestState(getState);
+
+        validateCheckoutState(state, [
+          {
+            condition: (state) => {
+              const preOrder = state.checkout?.preOrder;
+
+              return !preOrder?.shipping_option?.pk;
+            },
+            errorMessage:
+              'You need to select a shipping option before choosing a payment method. Dispatch setPaymentOption action after shipping option selection.',
+            action: () => abortCheckout()
+          }
+        ]);
+
+        try {
+          await queryFulfilled;
+          dispatch(setPaymentStepBusy(false));
+        } catch (error) {
+          dispatch(setPaymentStepBusy(false));
+        }
       }
     }),
     setWalletSelectionPage: build.mutation<

package/hooks/index.ts

@@ -10,5 +10,7 @@ export * from './use-mobile-iframe-handler';
 export * from './use-payment-options';
 export * from './use-pagination';
 export * from './use-message-listener';
+export * from './use-logger';
+export * from './use-logger-context';
 export * from './use-sentry-uncaught-errors';
 export * from './use-pz-params';

package/hooks/use-logger-context.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import React, {
+  createContext,
+  useContext,
+  ReactNode,
+  useMemo,
+  useRef,
+  useEffect
+} from 'react';
+import { useLogger, LogEntry, LogLevel } from './use-logger';
+
+const LOG_LEVELS: LogLevel[] = ['info', 'warn', 'error'];
+
+interface LoggerContextType {
+  logs: LogEntry[];
+  isVisible: boolean;
+  toggleVisibility: () => void;
+  clearLogs: () => void;
+  info: (message: string, payload?: any) => string;
+  warn: (message: string, payload?: any) => string;
+  error: (message: string, payload?: any) => string;
+  isDevelopment: boolean;
+  hasError: boolean;
+  hasWarning: boolean;
+}
+
+const LoggerContext = createContext<LoggerContextType | undefined>(undefined);
+
+let globalAddLogFunction:
+  | ((level: string, message: string, payload?: any) => string)
+  | null = null;
+
+// temporary queue for logs generated before the logger is initialized
+const pendingLogs: Array<{ level: string; message: string; payload?: any }> =
+  [];
+
+const createLogFunction =
+  (level: LogLevel) => (message: string, payload?: any) => {
+    if (
+      typeof window !== 'undefined' &&
+      process.env.NODE_ENV === 'development'
+    ) {
+      try {
+        if (globalAddLogFunction) {
+          globalAddLogFunction(level, message, payload);
+        } else {
+          pendingLogs.push({ level, message, payload });
+        }
+      } catch (err) {
+        // prevent errors
+      }
+    }
+
+    return '';
+  };
+
+const stableLogger = LOG_LEVELS.reduce((logger, level) => {
+  logger[level] = createLogFunction(level);
+
+  return logger;
+}, {} as Record<LogLevel, (message: string, payload?: any) => string>);
+
+export const LoggerProvider = ({ children }: { children: ReactNode }) => {
+  const loggerHook = useLogger();
+
+  const addLogRef = useRef<
+    (level: string, message: string, payload?: any) => string
+  >((level, message, payload) => {
+    if (LOG_LEVELS.includes(level as LogLevel)) {
+      return loggerHook[level as LogLevel](message, payload);
+    }
+    return '';
+  });
+
+  useEffect(() => {
+    globalAddLogFunction = addLogRef.current;
+
+    if (pendingLogs.length > 0) {
+      pendingLogs.forEach((log) => {
+        if (globalAddLogFunction) {
+          globalAddLogFunction(log.level, log.message, log.payload);
+        }
+      });
+
+      pendingLogs.length = 0;
+    }
+
+    return () => {
+      globalAddLogFunction = null;
+    };
+  }, []);
+
+  const contextValue = useMemo(
+    () => loggerHook,
+    [loggerHook.logs, loggerHook.isVisible, loggerHook.isDevelopment] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  return (
+    <LoggerContext.Provider value={contextValue}>
+      {children}
+    </LoggerContext.Provider>
+  );
+};
+
+export const useLoggerContext = () => {
+  const context = useContext(LoggerContext);
+  if (context === undefined) {
+    throw new Error('useLoggerContext must be used within a LoggerProvider');
+  }
+  return context;
+};
+
+export const devLogger = stableLogger;

package/hooks/use-logger.ts

@@ -0,0 +1,92 @@
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+
+export type LogLevel = 'info' | 'warn' | 'error';
+
+export interface LogEntry {
+  id: string;
+  level: LogLevel;
+  message: string;
+  timestamp: Date;
+  payload?: any;
+}
+
+const LOG_LEVELS: LogEntry['level'][] = ['info', 'warn', 'error'];
+
+export function useLogger() {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [isVisible, setIsVisible] = useState(false);
+  const logsRef = useRef<LogEntry[]>([]);
+  const [isDevelopment, setIsDevelopment] = useState(false);
+
+  useEffect(() => {
+    setIsDevelopment(
+      process.env.NODE_ENV === 'development' ||
+        window.location.hostname === 'localhost' ||
+        window.location.hostname === '127.0.0.1'
+    );
+  }, []);
+
+  useEffect(() => {
+    logsRef.current = logs;
+  }, [logs]);
+
+  const addLog = useCallback(
+    (level: LogEntry['level'], message: string, payload?: any) => {
+      const newLog: LogEntry = {
+        id: Math.random().toString(36).substring(2, 9),
+        level,
+        message,
+        timestamp: new Date(),
+        payload
+      };
+
+      setLogs((prevLogs) => [newLog, ...prevLogs]);
+
+      return newLog.id;
+    },
+    []
+  );
+
+  const clearLogs = useCallback(() => {
+    setLogs([]);
+  }, []);
+
+  const toggleVisibility = useCallback(() => {
+    setIsVisible((prev) => !prev);
+  }, []);
+
+  const createLogMethod = useCallback(
+    (level: LogEntry['level']) => (message: string, payload?: any) =>
+      addLog(level, message, payload),
+    [addLog]
+  );
+
+  const logMethods = useMemo(
+    () =>
+      LOG_LEVELS.reduce((methods, level) => {
+        methods[level] = createLogMethod(level);
+        return methods;
+      }, {} as Record<LogEntry['level'], (message: string, payload?: any) => string>),
+    [createLogMethod]
+  );
+
+  const hasError = useMemo(
+    () => logs.some((log) => log.level === 'error'),
+    [logs]
+  );
+  const hasWarning = useMemo(
+    () => logs.some((log) => log.level === 'warn'),
+    [logs]
+  );
+
+  return {
+    logs,
+    isVisible,
+    toggleVisibility,
+    clearLogs,
+    ...logMethods,
+    isDevelopment,
+    hasError,
+    hasWarning
+  };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "2.0.0-beta.17",
+  "version": "2.0.0-beta.19",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -35,7 +35,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.17",
+    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.19",
     "@babel/core": "7.26.10",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-typescript": "7.27.0",

package/utils/app-fetch.ts

@@ -2,6 +2,7 @@ import Settings from 'settings';
 import logger from '../utils/log';
 import { headers, cookies } from 'next/headers';
 import { ServerVariables } from './server-variables';
+import { notFound } from 'next/navigation';
 
 export enum FetchResponseType {
   JSON = 'json',
@@ -75,6 +76,10 @@ const appFetch = async <T>({
     }
   }
 
+  if (status === 422) {
+    notFound();
+  }
+
   return response;
 };