인프런 커뮤니티 질문&답변

안녕하세요 해당 영상을 통해 학습하고 따로 프로젝트를 진행하는 중에 서버 컴포넌트에서 data를 fetch하고 api 상태코드에 따라서 next에서 제공하는 error.tsx에서 해당 에러 상태에 따라 모달에 메세지를 띄우는 작업을 하고 있습니다.

로컬 환경에서 실행시켰을때는 정상적으로 error status가 523이 발생했을때 정상적인 메세지를 받아서 error.tsx 화면에서 해당 에러 메세지를 모달에 띄우나 빌드 후 실행시켰을 때에는

An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.

모달안의 메세지에 이러한 문구가 뜹니다. 아무리 찾아봐도 정확한 원인을 모르겠는데 혹시 해결방법을 아실까요?

• 다국어 처리 라이브러리는 next-intl를 사용하였습니다.

/note/page.tsx

async function fetchSharedNote(guid: string) {
  try {
    const res = await fetch(
      `${process.env.API_SERVER_URL}/v1/...`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(guid),
      }
    );
    if (res.ok) {
      return res.json();
    } else {
      const errorData = await res.json();
      throw errorData;
    }
  } catch (err: any) {
    const t = await getTranslations("Index");
    if (err.status === RestApiErrorType.notExistResourceException) {
      throw new Error(t("error523"));
    }
    throw new Error(err.message);
  }
}

/note/error.tsx

"use client"; // Error components must be Client Components
import CommonDialog from "@/app/_components/CommonDialog/index";
import { useState } from "react";

export default function Error({
  error,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const [showDialog, setShowDialog] = useState(!!error.message);

  return (
    <CommonDialog
      isShow={showDialog}
      contents={error.message}
      onClick={() => {
        setShowDialog(false);
      }}
    />
  );
}