From 5385c04adfbcb6a7fc620ffde02131f6c4666192 Mon Sep 17 00:00:00 2001 From: roaring30s Date: Sat, 24 Jan 2026 14:37:16 -0500 Subject: [PATCH 01/14] feat: add image optimization --- lib/api/image-optimization.ts | 121 ++++++++++++++++++++++++++++ next-env.d.ts | 2 +- package.json | 1 + pages/api/ens-data/image/[name].tsx | 22 ++++- pnpm-lock.yaml | 10 +-- 5 files changed, 149 insertions(+), 7 deletions(-) create mode 100644 lib/api/image-optimization.ts diff --git a/lib/api/image-optimization.ts b/lib/api/image-optimization.ts new file mode 100644 index 00000000..c35aac82 --- /dev/null +++ b/lib/api/image-optimization.ts @@ -0,0 +1,121 @@ +import sharp from "sharp"; + +export interface OptimizeImageResult { + buffer: Buffer; + contentType: string; + originalSize: number; + optimizedSize: number; + originalDimensions?: { width: number; height: number }; + optimizedDimensions?: { width: number; height: number }; + format?: string; +} + +export interface OptimizeImageOptions { + width?: number; + height?: number; + quality?: number; + effort?: number; + logName?: string; +} + +/** + * Optimizes an image by resizing and converting to WebP format + * @param imageBuffer - The original image buffer + * @param options - Optimization options + * @returns Optimized image buffer and metadata, or original buffer if optimization fails + */ +export async function optimizeImage( + imageBuffer: ArrayBuffer, + options: OptimizeImageOptions = {} +): Promise { + const { + width = 96, + height = 96, + quality = 75, + effort = 6, + logName = "image", + } = options; + + const originalSize = imageBuffer.byteLength; + const originalBuffer = Buffer.from(imageBuffer); + + // Get original image metadata + let originalMetadata; + try { + originalMetadata = await sharp(originalBuffer).metadata(); + console.log(`[Image Opt] Processing ${logName}`); + console.log( + `[Image Opt] Original: ${originalMetadata.width}x${originalMetadata.height}px, ${(originalSize / 1024).toFixed(1)}KB, format: ${originalMetadata.format}` + ); + } catch { + console.log( + `[Image Opt] Processing ${logName}, original size: ${(originalSize / 1024).toFixed(1)}KB (metadata unavailable)` + ); + } + + // Optimize image: resize and convert to WebP + try { + const optimizedBuffer = await sharp(originalBuffer) + .resize(width, height, { + fit: "cover", + withoutEnlargement: true, // Don't upscale small images + }) + .webp({ quality, effort }) + .toBuffer(); + + const optimizedMetadata = await sharp(optimizedBuffer).metadata(); + const reduction = ( + (1 - optimizedBuffer.length / originalSize) * + 100 + ).toFixed(1); + + console.log(`[Image Opt] ✅ Success! ${logName}`); + console.log( + `[Image Opt] Optimized: ${optimizedMetadata.width}x${optimizedMetadata.height}px, ${(optimizedBuffer.length / 1024).toFixed(1)}KB, format: ${optimizedMetadata.format}` + ); + console.log( + `[Image Opt] Size reduction: ${(originalSize / 1024).toFixed(1)}KB → ${(optimizedBuffer.length / 1024).toFixed(1)}KB (${reduction}% smaller)` + ); + + return { + buffer: optimizedBuffer, + contentType: "image/webp", + originalSize, + optimizedSize: optimizedBuffer.length, + originalDimensions: originalMetadata + ? { + width: originalMetadata.width || 0, + height: originalMetadata.height || 0, + } + : undefined, + optimizedDimensions: optimizedMetadata + ? { + width: optimizedMetadata.width || 0, + height: optimizedMetadata.height || 0, + } + : undefined, + format: optimizedMetadata?.format, + }; + } catch (error) { + // Fallback to original image if optimization fails + console.error(`[Image Opt] ❌ Failed for ${logName}:`, error); + if (error instanceof Error) { + console.error(`[Image Opt] Error message: ${error.message}`); + console.error(`[Image Opt] Error stack: ${error.stack}`); + } + + return { + buffer: originalBuffer, + contentType: "image/jpeg", // Default fallback + originalSize, + optimizedSize: originalSize, + originalDimensions: originalMetadata + ? { + width: originalMetadata.width || 0, + height: originalMetadata.height || 0, + } + : undefined, + }; + } +} + diff --git a/next-env.d.ts b/next-env.d.ts index 7996d352..19709046 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/dev/types/routes.d.ts"; +import "./.next/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/package.json b/package.json index c68d5b09..4a0ca372 100644 --- a/package.json +++ b/package.json @@ -123,6 +123,7 @@ "rehype-raw": "^7.0.0", "remark-gfm": "4.0.1", "sanitize-html": "^2.17.0", + "sharp": "^0.34.5", "swr": "^2.3.7", "viem": "^2.38.5", "wagmi": "^2.19.1", diff --git a/pages/api/ens-data/image/[name].tsx b/pages/api/ens-data/image/[name].tsx index d2be5f8b..4528f0c4 100644 --- a/pages/api/ens-data/image/[name].tsx +++ b/pages/api/ens-data/image/[name].tsx @@ -5,6 +5,7 @@ import { methodNotAllowed, notFound, } from "@lib/api/errors"; +import { optimizeImage } from "@lib/api/image-optimization"; import { l1PublicClient } from "@lib/chains"; import { parseArweaveTxId, parseCid } from "livepeer/utils"; import { NextApiRequest, NextApiResponse } from "next"; @@ -48,9 +49,28 @@ const handler = async ( const arrayBuffer = await response.arrayBuffer(); + // Optimize image using utility + const optimizationResult = await optimizeImage(arrayBuffer, { + width: 96, + height: 96, + quality: 75, + effort: 6, + logName: name, + }); + + // Set appropriate content type (fallback to original if optimization failed) + if (optimizationResult.contentType === "image/jpeg") { + const originalContentType = + response.headers.get("content-type") || "image/jpeg"; + res.setHeader("Content-Type", originalContentType); + } else { + res.setHeader("Content-Type", optimizationResult.contentType); + } + + res.setHeader("Content-Length", optimizationResult.buffer.length.toString()); res.setHeader("Cache-Control", getCacheControlHeader("week")); - return res.end(Buffer.from(arrayBuffer)); + return res.end(optimizationResult.buffer); } catch (e) { console.error(e); return notFound(res, "ENS avatar not found"); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2210735d..804714b3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -237,6 +237,9 @@ importers: sanitize-html: specifier: ^2.17.0 version: 2.17.0 + sharp: + specifier: ^0.34.5 + version: 0.34.5 swr: specifier: ^2.3.7 version: 2.3.7(react@19.2.1) @@ -13011,8 +13014,7 @@ snapshots: '@humanwhocodes/retry@0.4.3': {} - '@img/colour@1.0.0': - optional: true + '@img/colour@1.0.0': {} '@img/sharp-darwin-arm64@0.34.5': optionalDependencies: @@ -18852,8 +18854,7 @@ snapshots: detect-indent@6.1.0: {} - detect-libc@2.1.2: - optional: true + detect-libc@2.1.2: {} detect-newline@3.1.0: {} @@ -23592,7 +23593,6 @@ snapshots: '@img/sharp-win32-arm64': 0.34.5 '@img/sharp-win32-ia32': 0.34.5 '@img/sharp-win32-x64': 0.34.5 - optional: true shebang-command@2.0.0: dependencies: From 71712dfd16a418aa9bfa1274da63ea66552c54b8 Mon Sep 17 00:00:00 2001 From: roaring30s Date: Sat, 24 Jan 2026 14:52:57 -0500 Subject: [PATCH 02/14] fix: add meta description --- pages/_app.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/pages/_app.tsx b/pages/_app.tsx index 39e3a75e..19722f1b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -39,6 +39,10 @@ function App({ Component, pageProps, fallback = null }) { <> + Livepeer Explorer From 66985256274e2f66269fef7efed9ff5457b7efa5 Mon Sep 17 00:00:00 2001 From: roaring30s Date: Sat, 24 Jan 2026 15:08:03 -0500 Subject: [PATCH 03/14] feat: enable production source maps for better debugging --- next.config.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/next.config.js b/next.config.js index 3eca479a..d02ef9bb 100644 --- a/next.config.js +++ b/next.config.js @@ -1,5 +1,7 @@ /** @type {import('next').NextConfig} */ const nextConfig = { + productionBrowserSourceMaps: true, + turbopack: { rules: { "*.svg": { From 2d512ab5c332427e59d300a1ba596eb72d27edb9 Mon Sep 17 00:00:00 2001 From: roaring30s Date: Sat, 24 Jan 2026 15:27:48 -0500 Subject: [PATCH 04/14] feat: add main landmark --- layouts/main.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/layouts/main.tsx b/layouts/main.tsx index cff6bb08..1c023317 100644 --- a/layouts/main.tsx +++ b/layouts/main.tsx @@ -693,7 +693,8 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => { - { )} {children} - + From 9810ecc5e301f5b500bfd0e206b3a6f1afbe6ab9 Mon Sep 17 00:00:00 2001 From: roaring30s Date: Sat, 24 Jan 2026 15:55:52 -0500 Subject: [PATCH 05/14] fix: add aria-labels and alt tags for accessibility improvements --- components/AccountCell/index.tsx | 3 +++ components/DelegatingWidget/Header.tsx | 5 +++++ components/IdentityAvatar/index.tsx | 1 + components/Logo/index.tsx | 2 +- components/Profile/index.tsx | 27 +++++++++++++++++++++++--- layouts/main.tsx | 13 ++++++++++++- pages/migrate/broadcaster.tsx | 2 +- pages/migrate/delegator/index.tsx | 2 +- pages/migrate/orchestrator.tsx | 2 +- 9 files changed, 49 insertions(+), 8 deletions(-) diff --git a/components/AccountCell/index.tsx b/components/AccountCell/index.tsx index 43f86c15..7b725a16 100644 --- a/components/AccountCell/index.tsx +++ b/components/AccountCell/index.tsx @@ -49,6 +49,9 @@ const Index = ({ active, address }) => { borderColor: "$neutral5", }} src={identity.avatar} + alt={ + identity?.name ? `${identity.name} avatar` : `${address} avatar` + } /> ) : ( ) : ( { transition: "opacity 150ms ease", }} src={avatarSrc} + alt={`${address} avatar`} onLoad={() => setImageLoaded(true)} onError={() => setHasAvatarError(true)} /> diff --git a/components/Logo/index.tsx b/components/Logo/index.tsx index 22f3803f..9e350ecc 100644 --- a/components/Logo/index.tsx +++ b/components/Logo/index.tsx @@ -179,7 +179,7 @@ const LivepeerLogo = ({ if (!isLink) return markup; return ( - {markup} + {markup} ); }; diff --git a/components/Profile/index.tsx b/components/Profile/index.tsx index 233226d9..b6dbcc72 100644 --- a/components/Profile/index.tsx +++ b/components/Profile/index.tsx @@ -65,6 +65,9 @@ const Index = ({ account, isMyAccount = false, identity }: Props) => { height: "100%", }} src={identity.avatar} + alt={ + identity?.name ? `${identity.name} avatar` : `${account} avatar` + } /> ) : ( { href={identity.url} target="__blank" rel="noopener noreferrer" + aria-label={`Visit ${identity.url.replace( + /(^\w+:|^)\/\//, + "" + )}`} > - + @@ -177,12 +188,17 @@ const Index = ({ account, isMyAccount = false, identity }: Props) => { href={`https://twitter.com/${identity.twitter}`} target="__blank" rel="noopener noreferrer" + aria-label={`View ${identity.twitter} on Twitter`} > - + } > - Trailing 90D Fees + Trailing 90D Fees ), accessor: "ninetyDayVolumeETH", @@ -926,6 +926,7 @@ const OrchestratorList = ({ Date: Sat, 24 Jan 2026 16:36:14 -0500 Subject: [PATCH 08/14] fix: remove aria attribute for DotHorizontalIcon --- components/OrchestratorList/index.tsx | 31 ++++++++++++--------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/components/OrchestratorList/index.tsx b/components/OrchestratorList/index.tsx index f9ede8dc..f00cf185 100644 --- a/components/OrchestratorList/index.tsx +++ b/components/OrchestratorList/index.tsx @@ -923,24 +923,21 @@ const OrchestratorList = ({ }} asChild > - - - - - + }, + }} + > + + Date: Sat, 24 Jan 2026 16:57:23 -0500 Subject: [PATCH 09/14] fix: add aria fixes to components --- components/Drawer/index.tsx | 9 ++-- components/PopoverLink/index.tsx | 85 +++++++++++++++++--------------- components/RoundStatus/index.tsx | 4 +- layouts/main.tsx | 1 + 4 files changed, 55 insertions(+), 44 deletions(-) diff --git a/components/Drawer/index.tsx b/components/Drawer/index.tsx index 228970ed..3423027c 100644 --- a/components/Drawer/index.tsx +++ b/components/Drawer/index.tsx @@ -1,5 +1,5 @@ import { DrawerItem } from "@layouts/main"; -import { Box, Flex, Link as A, Text } from "@livepeer/design-system"; +import { Box, Flex, Link as A } from "@livepeer/design-system"; import { IS_L2 } from "lib/chains"; import Link from "next/link"; import Router, { useRouter } from "next/router"; @@ -162,8 +162,9 @@ const Index = ({ Get LPT - + } > { - return ( - + transform: "translateX(6px)", + }, + }, + }; + + // For external links, use regular anchor tag to avoid Next.js Link issues + if (newWindow || href.startsWith("http")) { + return ( + + {children} + + ); + } + + // For internal links, use Next.js Link + return ( + {children} diff --git a/components/RoundStatus/index.tsx b/components/RoundStatus/index.tsx index 2b67f71d..0dfc73fb 100644 --- a/components/RoundStatus/index.tsx +++ b/components/RoundStatus/index.tsx @@ -117,7 +117,7 @@ const Index = ({ } > - + - + {(process.env.NEXT_PUBLIC_NETWORK == "MAINNET" || process.env.NEXT_PUBLIC_NETWORK == "ARBITRUM_ONE") && ( @@ -389,7 +391,8 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => { css={{ color: "$hiContrast", fontSize: "$2", - marginRight: "$2", + minHeight: "44px", + padding: "$2 $3", }} > Performance Leaderboard @@ -397,9 +400,21 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => { )} - From 1d008eda947501db7be61c0d271af62e8ee935a9 Mon Sep 17 00:00:00 2001 From: roaring30s Date: Sun, 25 Jan 2026 20:56:40 -0500 Subject: [PATCH 11/14] feat: add connect button skeleton to remove cls --- components/ConnectButton/Skeleton.tsx | 25 +++++++++++++++++++++++++ components/RoundStatus/index.tsx | 2 ++ layouts/main.tsx | 3 +++ pages/index.tsx | 20 +++++++++++++++++--- 4 files changed, 47 insertions(+), 3 deletions(-) create mode 100644 components/ConnectButton/Skeleton.tsx diff --git a/components/ConnectButton/Skeleton.tsx b/components/ConnectButton/Skeleton.tsx new file mode 100644 index 00000000..33e07623 --- /dev/null +++ b/components/ConnectButton/Skeleton.tsx @@ -0,0 +1,25 @@ +import { Box } from "@livepeer/design-system"; + +const ConnectButtonSkeleton = () => ( + +); + +export default ConnectButtonSkeleton; diff --git a/components/RoundStatus/index.tsx b/components/RoundStatus/index.tsx index 0dfc73fb..61c99197 100644 --- a/components/RoundStatus/index.tsx +++ b/components/RoundStatus/index.tsx @@ -244,6 +244,7 @@ const Index = ({ @@ -303,6 +304,7 @@ const Index = ({ The amount of rewards which have been claimed by orchestrators diff --git a/layouts/main.tsx b/layouts/main.tsx index a835fbd6..4d94b6a1 100644 --- a/layouts/main.tsx +++ b/layouts/main.tsx @@ -108,8 +108,11 @@ const DesignSystemProviderTyped = DesignSystemProvider as React.FC<{ children?: React.ReactNode; }>; +import ConnectButtonSkeleton from "../components/ConnectButton/Skeleton"; + const ConnectButton = dynamic(() => import("../components/ConnectButton"), { ssr: false, + loading: () => , }); const Claim = dynamic(() => import("../components/Claim"), { ssr: false }); diff --git a/pages/index.tsx b/pages/index.tsx index c9e00d34..0400c73b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -449,8 +449,10 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => { marginBottom: "$4", marginTop: "$7", alignItems: "center", + gap: "$4", "@bp1": { flexDirection: "row", + gap: "$5", }, }} > @@ -467,11 +469,23 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => { Transactions - + - From 1b083e9b3c9e0ac226ed9dd4ad7d60e5e2a705cc Mon Sep 17 00:00:00 2001 From: roaring30s Date: Sun, 25 Jan 2026 21:19:33 -0500 Subject: [PATCH 12/14] feat: add table loader skeleton --- components/ConnectButton/Skeleton.tsx | 18 ++---- components/OrchestratorList/Skeleton.tsx | 81 ++++++++++++++++++++++++ pages/index.tsx | 7 +- 3 files changed, 87 insertions(+), 19 deletions(-) create mode 100644 components/OrchestratorList/Skeleton.tsx diff --git a/components/ConnectButton/Skeleton.tsx b/components/ConnectButton/Skeleton.tsx index 33e07623..bcebdc96 100644 --- a/components/ConnectButton/Skeleton.tsx +++ b/components/ConnectButton/Skeleton.tsx @@ -1,23 +1,13 @@ -import { Box } from "@livepeer/design-system"; +import { Skeleton } from "@livepeer/design-system"; const ConnectButtonSkeleton = () => ( - ); diff --git a/components/OrchestratorList/Skeleton.tsx b/components/OrchestratorList/Skeleton.tsx new file mode 100644 index 00000000..4b8c1790 --- /dev/null +++ b/components/OrchestratorList/Skeleton.tsx @@ -0,0 +1,81 @@ +import { Box, Flex, Skeleton } from "@livepeer/design-system"; + +const OrchestratorListSkeleton = () => { + return ( + + {/* Input section skeleton */} + + + + + + + + + + + + + {/* Table header skeleton */} + + + + + + + + + + + {/* Table rows skeleton (10 rows) */} + {Array.from({ length: 10 }).map((_, i) => ( + + + + + + + + + + ))} + + {/* Pagination skeleton */} + + + + + + + ); +}; + +export default OrchestratorListSkeleton; diff --git a/pages/index.tsx b/pages/index.tsx index 0400c73b..4142577f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -4,6 +4,7 @@ import ErrorComponent from "@components/Error"; import type { Group } from "@components/ExplorerChart"; import ExplorerChart from "@components/ExplorerChart"; import OrchestratorList from "@components/OrchestratorList"; +import OrchestratorListSkeleton from "@components/OrchestratorList/Skeleton"; import RoundStatus from "@components/RoundStatus"; import Spinner from "@components/Spinner"; import TransactionsList, { @@ -433,11 +434,7 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => { protocolData={protocol?.protocol} /> ) : ( - - Loading orchestrators… - + )} )} From 0fb397a33498f87ef0b8fb6bf55c7f027d66193c Mon Sep 17 00:00:00 2001 From: roaring30s Date: Mon, 26 Jan 2026 11:39:55 -0500 Subject: [PATCH 13/14] remove useWindowSize hook to eliminate forced reflows --- layouts/main.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/layouts/main.tsx b/layouts/main.tsx index 4d94b6a1..549e4d5f 100644 --- a/layouts/main.tsx +++ b/layouts/main.tsx @@ -57,7 +57,6 @@ import React, { } from "react"; import { isMobile } from "react-device-detect"; import ReactGA from "react-ga"; -import { useWindowSize } from "react-use"; import { Chain } from "viem"; import { @@ -137,7 +136,6 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => { const activeChain = useActiveChain(); const [drawerOpen, setDrawerOpen] = useState(false); const [bannerActive, setBannerActive] = useState(false); - const { width } = useWindowSize(); const ref = useRef(null); const currentRound = useCurrentRoundData(); const pendingFeesAndStake = usePendingFeesAndStakeData(accountAddress); @@ -211,16 +209,6 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => { return () => window.removeEventListener("storage", onStorage); }, [isReady, isBannerDisabledByQuery]); - useEffect(() => { - if (width > 1020) { - document.body.removeAttribute("style"); - } - - if (width < 1020 && drawerOpen) { - document.body.style.overflow = "hidden"; - } - }, [drawerOpen, width]); - useEffect(() => { ReactGA.set({ customBrowserType: !isMobile From bfcbd136adf0b721a44229de5ef3d4ebe2ca9f20 Mon Sep 17 00:00:00 2001 From: roaring30s Date: Mon, 26 Jan 2026 12:00:42 -0500 Subject: [PATCH 14/14] chore: cleanup image-optimization --- lib/api/image-optimization.ts | 41 +++++------------------------ pages/api/ens-data/image/[name].tsx | 6 +++-- 2 files changed, 10 insertions(+), 37 deletions(-) diff --git a/lib/api/image-optimization.ts b/lib/api/image-optimization.ts index c35aac82..2378aa4f 100644 --- a/lib/api/image-optimization.ts +++ b/lib/api/image-optimization.ts @@ -15,7 +15,6 @@ export interface OptimizeImageOptions { height?: number; quality?: number; effort?: number; - logName?: string; } /** @@ -28,13 +27,7 @@ export async function optimizeImage( imageBuffer: ArrayBuffer, options: OptimizeImageOptions = {} ): Promise { - const { - width = 96, - height = 96, - quality = 75, - effort = 6, - logName = "image", - } = options; + const { width = 96, height = 96, quality = 75, effort = 6 } = options; const originalSize = imageBuffer.byteLength; const originalBuffer = Buffer.from(imageBuffer); @@ -43,14 +36,9 @@ export async function optimizeImage( let originalMetadata; try { originalMetadata = await sharp(originalBuffer).metadata(); - console.log(`[Image Opt] Processing ${logName}`); - console.log( - `[Image Opt] Original: ${originalMetadata.width}x${originalMetadata.height}px, ${(originalSize / 1024).toFixed(1)}KB, format: ${originalMetadata.format}` - ); } catch { - console.log( - `[Image Opt] Processing ${logName}, original size: ${(originalSize / 1024).toFixed(1)}KB (metadata unavailable)` - ); + // Metadata extraction failed, but we can still proceed with optimization + originalMetadata = undefined; } // Optimize image: resize and convert to WebP @@ -64,18 +52,6 @@ export async function optimizeImage( .toBuffer(); const optimizedMetadata = await sharp(optimizedBuffer).metadata(); - const reduction = ( - (1 - optimizedBuffer.length / originalSize) * - 100 - ).toFixed(1); - - console.log(`[Image Opt] ✅ Success! ${logName}`); - console.log( - `[Image Opt] Optimized: ${optimizedMetadata.width}x${optimizedMetadata.height}px, ${(optimizedBuffer.length / 1024).toFixed(1)}KB, format: ${optimizedMetadata.format}` - ); - console.log( - `[Image Opt] Size reduction: ${(originalSize / 1024).toFixed(1)}KB → ${(optimizedBuffer.length / 1024).toFixed(1)}KB (${reduction}% smaller)` - ); return { buffer: optimizedBuffer, @@ -96,14 +72,10 @@ export async function optimizeImage( : undefined, format: optimizedMetadata?.format, }; - } catch (error) { + } catch { // Fallback to original image if optimization fails - console.error(`[Image Opt] ❌ Failed for ${logName}:`, error); - if (error instanceof Error) { - console.error(`[Image Opt] Error message: ${error.message}`); - console.error(`[Image Opt] Error stack: ${error.stack}`); - } - + // This is expected for some edge cases (unsupported formats, corrupted images, etc. + // Return original image as fallback return { buffer: originalBuffer, contentType: "image/jpeg", // Default fallback @@ -118,4 +90,3 @@ export async function optimizeImage( }; } } - diff --git a/pages/api/ens-data/image/[name].tsx b/pages/api/ens-data/image/[name].tsx index 4528f0c4..3322e9c4 100644 --- a/pages/api/ens-data/image/[name].tsx +++ b/pages/api/ens-data/image/[name].tsx @@ -55,7 +55,6 @@ const handler = async ( height: 96, quality: 75, effort: 6, - logName: name, }); // Set appropriate content type (fallback to original if optimization failed) @@ -67,7 +66,10 @@ const handler = async ( res.setHeader("Content-Type", optimizationResult.contentType); } - res.setHeader("Content-Length", optimizationResult.buffer.length.toString()); + res.setHeader( + "Content-Length", + optimizationResult.buffer.length.toString() + ); res.setHeader("Cache-Control", getCacheControlHeader("week")); return res.end(optimizationResult.buffer);