이슈

1.fetch failed

fetch failed getaddrinfo ENOTFOUND

• 로컬 환경을 https환경으로 구축하고 https로 api요청을 보냈는데 hostname을 찾을 수 없다는 메시지를 받았다

1.이유

• build환경에서 http통신이기 때문에 fetch failed가 뜬다. 이 때 npm run dev 환경에서도 마찬가지로 http통신을 하게 된다!
• 때문에 amplify로 배포 했을 때는 이상한 현상을 확인 할 수 있었다.(보통 로컬에서 잘 되고 배포 때 터지던데)
• 배포환경에서 build 될 때는 https, 로컬에선 http로 빌드를 하니, 아무리 https로 서버를 열고 ssl을 받아도 그 사단이 난거다.

2.해결법

• 로컬환경에서 백엔드 서버를 따로 둬서 테스트를 하고, 배포환경에선 원래 배포된 ec2 에 api통신을 하면 된다!

2.SyntaxError: Unexpected end of JSON input

1.이유

• 캐시될 데이터가 2mb를 넘어가 캐싱이 불가능하면 발생하는 버그다!
• 캐싱을 설정하지 않으면 버그가 더 이상 발생하지 않는다.

2.해결법

export const getTxItemData = async (txHash: string) => {
  try {
    console.log(txHash);
    const responseTransactionData = await fetch(
      `${
        process.env.NODE_ENV === "development"
          ? "http://localhost:8080"
          : "https://[나의 도메인]"
      }/[예시]/${[파람스]}`
    );

    const transactionData = await responseTransactionData.json();
    console.log(transactionData);
    return "transactionData";
  } catch (error) {
    console.log(error);
  }
};

• 이 때 캐시될 데이터가 너무 많으면 빈 객체로 받아와 진다

export const getTxItemData = async (txHash: string) => {
  try {
    console.log(txHash);
    const responseTransactionData = await fetch(
      `${
        process.env.NODE_ENV === "development"
          ? "http://localhost:8080"
          : "https://[나의 도메인]"
      }/[예시]/${[파람스]}`,
      { cache: "no-cache" }
    );

    const transactionData = await responseTransactionData.json();
    console.log(transactionData);
    return "transactionData";
  } catch (error) {
    console.log(error);
  }
};

• 다음과 같이 바꿔주면 정상적으로 데이터가 들어온다.