// useRecordGetQuery.ts
const getMessage = async (
  userEmail: string | null | undefined,
  token: string | undefined,
) => {
  const encodedEmail = encodeURIComponent(userEmail || '');
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_SERVER_URL}/api/record/${encodedEmail}`,
    {
      method: 'GET',
      headers: {
        authorization: `Bearer ${token}`,
      },
    },
  );

  if (!res.ok) {
    throw new Error('메세지를 가져오는 getMessage에서 오류가 발생했어요.');
  }

  return res.json();
};

export const useRecordGetQuery = (
  userEmail: string | null | undefined,
  token: string | undefined,
) => {
  const { data: messages = [] } = useQuery(
    [...recordManagerKeys.record, userEmail],
    () => getMessage(userEmail, token),
    {
      enabled: !!userEmail,
      select: (data: Message[]) => data.map(decodeMessages),
    },
  );

  return {
    messages,
  };
};

// useRecordGetQuery.ts

class FetchError extends Error {
  constructor(public message: string, public status: number) {
    super(message);
  }
}

const getMessage = async (
  userEmail: string | null | undefined,
  token: string | undefined,
) => {
  const encodedEmail = encodeURIComponent(userEmail || '');
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_SERVER_URL}/api/record/${encodedEmail}`,
    {
      method: 'GET',
      headers: {
        authorization: `Bearer ${token}`,
      },
    },
  );

  if (!res.ok) {
    // 에러 처리는 다음과 같이 수정했다. api 서버에서 에러를 message와 status를 보내주도록 수정했다.
    // 그리고 throw new FetchError로 에러를 던져주었다.
    const { message, status } = await res.json();
    throw new FetchError(message, status);
  }

  const data = await res.json()
  const decodedData = data.map(decodeMessages) // 여기서 select 부분을 제거할 수 있다.

  return decodedData;
};

export const useRecordGetQuery = (
  userEmail: string | null | undefined,
  token: string | undefined,
) => {
  const { data: messages = [] } = useQuery(
    [...recordManagerKeys.record, userEmail],
    () => getMessage(userEmail, token),
    {
      enabled: !!userEmail,
    },
  );

  return {
    messages,
  };
};

import { MutationCache, QueryCache, QueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';

const queryErrorHandler = (error: unknown) => {
  if (error instanceof Error) {
    toast.error(error.message);
  }

  return;
};

export const createQueryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
      if (query.meta?.errorMessage) {
        // 만약 meta field를 사용한다면 여기서 tracking 할 수 있다.
        queryErrorHandler(query.meta?.errorMessage);
      }

      queryErrorHandler(error);
    },
  }),

  mutationCache: new MutationCache({
    onError: (error, _variables, _context, mutation) => {
      if (mutation.options.onError) {
        queryErrorHandler(mutation.options.onError);
      }

      queryErrorHandler(error);
    },
  }),

  defaultOptions: {
    queries: {
      // ...
      suspense: true, // 참고로 suspense를 true로 설정하면 useErrorBoundary도 true가 된다.

    },
  },
});

// TkDodo 형님의 블로그 댓글 중
No, the default options you provide are merged with the default options,
so unless you set refetchOnWindowFocus to false, it will stay on.

Further, this is not the way to provide a global onError handler.
As the article tried to explain,
you have to set onError on the QueryCache or the MutationCache for a truly global handler.

// components/common/ErrorBoundaryContext.tsx
'use client';

interface ErrorBoundaryContextProps {
  children: React.ReactNode;
}
const logError = (error: Error, info: { componentStack: string }) => {
  console.error('에러 정보를 로깅해요!', error, info);
};

const ErrorFallback = ({ resetErrorBoundary, error }: FallbackProps) => {
  const { status, message } = error;

  const onClickHandler = () => {
    if (isNotAuthorized) {
      return redirect('/');
    }

    return resetErrorBoundary();
  };

  return (
    <div className="flex h-screen flex-col items-center justify-center bg-gray-100">
      <div className="mb-4 text-6xl font-bold text-gray-500">404</div>
      <button
        className="rounded bg-yellow-400 px-4 py-2 text-white hover:bg-yellow-300 focus:border-blue-700 focus:outline-none focus:ring focus:ring-blue-200"
        onClick={onClickHandler}
      >
        {buttonMessage}
      </button>
    </div>
  );
};

const ErrorBoundaryContext = ({ children }: ErrorBoundaryContextProps) => {
  const { reset } = useQueryErrorResetBoundary();

  return (
    <ErrorBoundary
      onReset={reset}
      onError={logError}
      FallbackComponent={ErrorFallback}
    >
      {children}
    </ErrorBoundary>
  );
};

export default ErrorBoundaryContext;

// app/layout.tsx
import ErrorBoundaryContext from 'components/client/common/ErrorBoundaryContext';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body suppressHydrationWarning className={`${notoSansKR.className}`}>
        <div id="modal" />
        <ErrorBoundaryContext> // 감싸주었다.
          <QueryContext>
            <AuthContext>
              <Toaster />
              <ChakraContext>
                <main>
                  {children}
                </main>
              </ChakraContext>
            </AuthContext>
          </QueryContext>
        </ErrorBoundaryContext>
      </body>
    </html>
  );
}

// queryClient
export const createQueryClient = new QueryClient({
  // ...

  defaultOptions: {
    queries: {
      suspense: true, // 여기
    },
  },
});

// useRecordGetQuery.ts
export const useRecordGetQuery = (
  userEmail: string | null | undefined,
  token: string | undefined,
) => {
  const messages = useQuery({
    queryKey: [...recordManagerKeys.record, userEmail],
    queryFn: () => getMessage(userEmail, token),
    useErrorBoundary: (error: any) => {
      return error.status >= 500; // 500번대 이상 에러가 발생하면, ErrorBoundary에서 처리, 500 미만이라면, 위에서 보여준 toast로만 처리
    },
  });

  return { messages };
};

export const useRecordGetQuery = (
  userEmail: string | null | undefined,
  token: string | undefined,
) => {
  const { data: messages = [] } = useQuery(
    [...recordManagerKeys.record, userEmail],
    () => getMessage(userEmail, token),
    {
      meta: {
        errorMessage: '이게 있다면 실패한 에러가 작성되겠죠.', // 이렇게 하면 위의 query.meta?.errorMessage에서 읽힌다.
      },
    },
  );

  return {
    messages,
  };
};