next/image - Error handling

회사에서 리팩토링을 진행하던 중, 아래의 이슈사항을 발견했다.

1. API 호출로 이미지 경로를 받아오고, 해당 이미지는 next/image로 렌더링
2. 이미지 경로가 null인 경우에는 defaultImage를 렌더링
3. 이미지 경로를 받아오지만, 해당 경로의 이미지에 문제가 있는 경우에는 defaultImage를 보여주지 못하는 문제가 발생 !!

<Image
  alt={"이미지"}
  src={imgUrl ? imgUrl : DEFAULT_IMG_URL}
  width={width}
  height={height}
/>

기존 코드는 위와 같았다. 기존 코드는 imgUrl이 null이 아닌 경우만 체크하고 있기 때문에 이미지 경로가 문제가 있는 경우의 예외처리를 진행하지 못하고 있었다.

예를 들어 서버에서 보내준 "admin/img1" 이미지가 문제가 발생해 404를 반환받는 경우, 기존 코드는 imgUrl이 null이 아니므로 defaultImg가 렌더링되지 않는 것이다.

위와 같은 문제를 방지하기 위해서 next/image의 onError를 활용해 커스텀 컴포넌트를 생성하였다.

import { useState } from "react";
import Image from "next/image";

interface ImageProps {
  alt: string;
  src: string;
  width: number;
  height: number;
}

export default function ImageWithFallback({
  alt,
  src,
  height,
  width,
}: ImageProps) {
  const [isImgError, setIsImgError] = useState<boolean>(false);

  return (
    <Image
      alt={alt}
      src={isImgError ? DEFAULT_PROFILE_IMG_URL : src}
      width={width}
      height={height}
      onError={() => setIsImgError(true)}
    />
  );
}

위와 같이 onError를 활용해 이미지 로드에 실패하는 경우에는 isImgError가 true로 변경되면서 defaultImg를 보여주는 방식으로 리팩토링을 진행했다.