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를 활용해 커스텀 컴포넌트를 생성하였다.

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를 활용해 이미지 load에 실패하는 경우에는 isImgError가 true로 변경되면서 defaultImg를 보여주는 방식으로 리팩토링을 진행했다.