Fetch Failed Due to Connection Timeout in Next.js Image Optimizer

Question

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at runNextTicks (node:internal/process/task_queues:64:3)
    at process.processImmediate (node:internal/timers:447:9)
    at process.callbackTrampoline (node:internal/async_hooks:130:17)
    at async fetchExternalImage (C:\Users\xhsmz\Documents\GitHub\MarsMC\MarsMC-Store\node_modules\next\dist\server\image-optimizer.js:565:17)
    at async DevServer.imageOptimizer (C:\Users\xhsmz\Documents\GitHub\MarsMC\MarsMC-Store\node_modules\next\dist\server\next-server.js:650:48)        
    at async cacheEntry.imageResponseCache.get.incrementalCache (C:\Users\xhsmz\Documents\GitHub\MarsMC\MarsMC-Store\node_modules\next\dist\server\next-server.js:182:65)
    at async C:\Users\xhsmz\Documents\GitHub\MarsMC\MarsMC-Store\node_modules\next\dist\server\response-cache\index.js:90:36
    at async C:\Users\xhsmz\Documents\GitHub\MarsMC\MarsMC-Store\node_modules\next\dist\lib\batcher.js:45:32 {
  cause: _ConnectTimeoutError: Connect Timeout Error
      at onConnectTimeout (node:internal/deps/undici/undici:6616:28)
      at node:internal/deps/undici/undici:6574:50
      at Immediate._onImmediate (node:internal/deps/undici/undici:6603:37)
      at process.processImmediate (node:internal/timers:476:21)
      at process.callbackTrampoline (node:internal/async_hooks:130:17) {
    code: 'UND_ERR_CONNECT_TIMEOUT'
  }
}

"use client";
import React, { useState } from "react";
import Image, { ImageProps } from "next/image";

interface ImageWithFallBackProps extends Omit<ImageProps, "src"> {
  src: string;
  fallback: string;
}

const ImageWithFallBack: React.FC<ImageWithFallBackProps> = ({
  src,
  fallback,
  ...props
}) => {
  const [error, setError] = useState(false);

  return (
    <Image
      {...props}
      alt={props.alt}
      src={error ? fallback : src}
      onError={() => {
        if (!error) {
          setError(true);
        }
      }}
    />
  );
};

export default ImageWithFallBack;

{ if (!error) { setError(true); } }} /> ); }; export default ImageWithFallBack;

Hashim · Answer

import React from "react";
import { ImageProps } from "next/image";
import ImageWithFallBack from "./ImageWithFallBack";

type ImgTypesWithoutOption = "pixel_head" | "skin";
type ImgTypesWithOption = "standing" | "mojavatar" | "reading" | "sit";
type ImgTypes = ImgTypesWithoutOption | ImgTypesWithOption;

type SkinTypeWithOption = { type: "full" | "bust" | "face" };

type MinecraftSkinProps = (
  | {
      skinType: ImgTypesWithOption;
      skinOption?: SkinTypeWithOption;
    }
  | {
      skinType: ImgTypesWithoutOption;
      skinOption?: never;
    }
) & {
  player: string;
} & Omit<ImageProps, "src">;

const MINESKIN_BASE = process.env.NEXT_PUBLIC_MINESKIN_BASE_URL;
const STARLIGHT_BASE = process.env.NEXT_PUBLIC_STARTLIGHTSKINS_BASE_URL;
export const FALLBACK_PLAYER =
  process.env.NEXT_PUBLIC_FALLBACK_PLAYER || "billetspara";

const MinecraftSkin = ({
  player,
  skinType,
  skinOption,
  ...props
}: MinecraftSkinProps) => {
  const generateUrl = (
    playerName: string,
    type: ImgTypes,
    option?: SkinTypeWithOption
  ): string => {
    if (typeof playerName === undefined) {
      playerName = FALLBACK_PLAYER;
    }
    switch (type) {
      case "pixel_head":
        return `${MINESKIN_BASE}/helm/${playerName}/512`;
      case "skin":
        return `${STARLIGHT_BASE}/skin/${playerName}/default`;
      case "standing":
        return `${STARLIGHT_BASE}/ultimate/${playerName}/${
          option?.type || "full"
        }`;
      case "mojavatar":
        return `${STARLIGHT_BASE}/mojavatar/${playerName}/${
          option?.type || "full"
        }`;
      case "reading":
        return `${STARLIGHT_BASE}/reading/${playerName}/${
          option?.type || "full"
        }`;
      case "sit":
        return `${STARLIGHT_BASE}/criss_cross/${playerName}/${
          option?.type || "full"
        }`;
      default:
        const exhaustiveCheck: never = type;
        throw new Error(`Unhandled skin type: ${exhaustiveCheck}`);
    }
  };

  const playerSrc = generateUrl(player, skinType, skinOption);
  const fallbackSrc = generateUrl(FALLBACK_PLAYER, skinType, skinOption);

  return (
    <ImageWithFallBack
      key={`${player}-${skinType}-${skinOption?.type || "full"}`}
      src={playerSrc}
      fallback={fallbackSrc}
      {...props}
    />
  );
};

export default MinecraftSkin;

The MinecraftSkin component, used inside a .map function to fetch and display player skins, occasionally fails to load the requested skin due to a connection timeout error. When this happens, it defaults to the fallback skin

Fetch Failed Due to Connection Timeout in Next.js Image Optimizer

2 Replies