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

[limber verge]

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;

[austere wharf]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[limber verge]

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