Add resilient image thumbnail generation

Author: deployor

app/actions/upload.ts

@@ -24,6 +24,7 @@ import {
 } from "@/lib/media/s3";
 import {
   generateAndUploadThumbnail,
+  getThumbnailS3Key,
   processImageUpload,
 } from "@/lib/media/thumbnail";
 import { validateMediaFile } from "@/lib/media/validation";
@@ -398,6 +399,7 @@ export async function finalizeUpload(
         let realFileSize = data.fileSize;
         let serverExifData: Record<string, unknown> | null = null;
         let thumbnailS3Key = data.thumbnailS3Key;
+        const canonicalThumbnailS3Key = getThumbnailS3Key(mediaId);
         try {
           const headCommand = new HeadObjectCommand({
             Bucket: S3_BUCKET_NAME,
@@ -435,6 +437,12 @@ export async function finalizeUpload(
           ) {
             thumbnailS3Key = null;
           }
+          if (
+            !thumbnailS3Key &&
+            (await objectExists(canonicalThumbnailS3Key))
+          ) {
+            thumbnailS3Key = canonicalThumbnailS3Key;
+          }
           if (data.mimeType.startsWith("image/")) {
             try {
               const getCommand = new GetObjectCommand({

app/api/cron/repair-thumbnails/route.ts

@@ -11,7 +11,10 @@ import { db } from "@/lib/db";
 import { media } from "@/lib/db/schema";
 import { logger, recordException, serializeError } from "@/lib/logger";
 import { s3Client, uploadToS3 } from "@/lib/media/s3";
-import { generateAndUploadThumbnail } from "@/lib/media/thumbnail";
+import {
+  generateAndUploadThumbnail,
+  getThumbnailS3Key,
+} from "@/lib/media/thumbnail";
 import { recordCronJob } from "@/lib/telemetry";
 
 const BATCH_SIZE = 500;
@@ -115,7 +118,7 @@ async function fallbackImageThumbnail(
       ? lastError
       : new Error("Could not extract real image thumbnail");
   }
-  const thumbnailS3Key = `media/${mediaId}/thumbnail.jpg`;
+  const thumbnailS3Key = getThumbnailS3Key(mediaId);
   await uploadToS3(output, thumbnailS3Key, "image/jpeg", undefined, tags);
   return thumbnailS3Key;
 }
@@ -159,7 +162,7 @@ async function fallbackVideoThumbnail(
       .resize(400, 400, { fit: "cover", position: "center" })
       .jpeg({ quality: 82, mozjpeg: true })
       .toBuffer();
-    const thumbnailS3Key = `media/${mediaId}/thumbnail.jpg`;
+    const thumbnailS3Key = getThumbnailS3Key(mediaId);
     await uploadToS3(
       thumbnailBuffer,
       thumbnailS3Key,
@@ -198,6 +201,17 @@ export async function GET(request: NextRequest) {
         : false;
       if (hasThumbnail) return { repaired: 0, failed: 0 };
       try {
+        const canonicalThumbnailS3Key = getThumbnailS3Key(item.id);
+        if (
+          item.thumbnailS3Key !== canonicalThumbnailS3Key &&
+          (await objectExists(canonicalThumbnailS3Key))
+        ) {
+          await db
+            .update(media)
+            .set({ thumbnailS3Key: canonicalThumbnailS3Key })
+            .where(eq(media.id, item.id));
+          return { repaired: 1, failed: 0 };
+        }
         const sourceKeys = [
           item.s3Key,
           item.blurredS3Key,

app/media/[mediaId]/[[...variant]]/route.ts

@@ -11,9 +11,60 @@ import { media, users } from "@/lib/db/schema";
 import { logger } from "@/lib/logger";
 import { convertHeicToJpeg } from "@/lib/media/heic";
 import { S3_BUCKET_NAME, s3Client } from "@/lib/media/s3";
+import {
+  generateAndUploadThumbnail,
+  getThumbnailS3Key,
+} from "@/lib/media/thumbnail";
 import { can } from "@/lib/policy";
 import { contentDispositionFilename } from "@/lib/safe-filename";
 
+async function streamToBuffer(stream: AsyncIterable<Uint8Array>) {
+  const chunks: Uint8Array[] = [];
+  for await (const chunk of stream) {
+    chunks.push(chunk);
+  }
+  return Buffer.concat(chunks);
+}
+
+async function generateMissingImageThumbnail(
+  mediaItem: typeof media.$inferSelect,
+) {
+  if (!mediaItem.mimeType.startsWith("image/")) return null;
+  try {
+    const source = await s3Client.send(
+      new GetObjectCommand({
+        Bucket: S3_BUCKET_NAME,
+        Key: mediaItem.s3Key,
+      }),
+    );
+    if (!source.Body) throw new Error("S3 object had no body");
+    const buffer = await streamToBuffer(
+      source.Body as AsyncIterable<Uint8Array>,
+    );
+    const thumbnailS3Key = await generateAndUploadThumbnail(
+      buffer,
+      mediaItem.mimeType,
+      mediaItem.id,
+      undefined,
+      { uploadedBy: mediaItem.uploadedById, eventId: mediaItem.eventId },
+    );
+    if (!thumbnailS3Key) return null;
+    if (thumbnailS3Key !== mediaItem.thumbnailS3Key) {
+      await db
+        .update(media)
+        .set({ thumbnailS3Key })
+        .where(eq(media.id, mediaItem.id));
+    }
+    return thumbnailS3Key;
+  } catch (error) {
+    logger.error(
+      { mediaId: mediaItem.id, error },
+      "thumbnail generation failed",
+    );
+    return null;
+  }
+}
+
 export async function GET(
   request: NextRequest,
   {
@@ -126,13 +177,13 @@ export async function GET(
   let s3Key = mediaItem.s3Key;
   let filename = contentDispositionFilename(mediaItem.filename);
   if (variant === "thumbnail") {
+    const baseName =
+      filename.substring(0, filename.lastIndexOf(".")) || filename;
+    filename = `thumbnail_${baseName}.jpg`;
     if (mediaItem.thumbnailS3Key) {
       s3Key = mediaItem.thumbnailS3Key;
-      const baseName =
-        filename.substring(0, filename.lastIndexOf(".")) || filename;
-      filename = `thumbnail_${baseName}.jpg`;
-    } else {
-      s3Key = mediaItem.s3Key;
+    } else if (mediaItem.mimeType.startsWith("image/")) {
+      s3Key = getThumbnailS3Key(mediaItem.id);
     }
   }
   const command = new GetObjectCommand({
@@ -147,15 +198,62 @@ export async function GET(
   let s3Response: GetObjectCommandOutput;
   try {
     s3Response = await s3Client.send(command);
+    if (
+      variant === "thumbnail" &&
+      mediaItem.mimeType.startsWith("image/") &&
+      !mediaItem.thumbnailS3Key &&
+      s3Key === getThumbnailS3Key(mediaItem.id)
+    ) {
+      await db
+        .update(media)
+        .set({ thumbnailS3Key: s3Key })
+        .where(eq(media.id, mediaItem.id));
+    }
   } catch (error: any) {
     if (error?.$metadata?.httpStatusCode === 304) {
       return new NextResponse(null, { status: 304 });
     }
-    logger.error(`Failed to fetch from S3:`, error);
-    return new NextResponse("Failed to fetch media", { status: 502 });
+    if (variant === "thumbnail" && mediaItem.mimeType.startsWith("image/")) {
+      const regeneratedThumbnailKey =
+        await generateMissingImageThumbnail(mediaItem);
+      if (regeneratedThumbnailKey) {
+        try {
+          s3Response = await s3Client.send(
+            new GetObjectCommand({
+              Bucket: S3_BUCKET_NAME,
+              Key: regeneratedThumbnailKey,
+              Range: requestRange,
+              IfNoneMatch: request.headers.get("if-none-match") ?? undefined,
+              IfModifiedSince: request.headers.get("if-modified-since")
+                ? new Date(request.headers.get("if-modified-since") as string)
+                : undefined,
+            }),
+          );
+        } catch (retryError: any) {
+          if (retryError?.$metadata?.httpStatusCode === 304) {
+            return new NextResponse(null, { status: 304 });
+          }
+          logger.error(
+            "Failed to fetch regenerated thumbnail from S3:",
+            retryError,
+          );
+          return new NextResponse("Failed to fetch media", { status: 502 });
+        }
+      } else {
+        logger.error(`Failed to fetch from S3:`, error);
+        return new NextResponse("Failed to fetch media", { status: 502 });
+      }
+    } else {
+      logger.error(`Failed to fetch from S3:`, error);
+      return new NextResponse("Failed to fetch media", { status: 502 });
+    }
   }
   const headers = new Headers();
-  headers.set("Content-Type", s3Response.ContentType || mediaItem.mimeType);
+  headers.set(
+    "Content-Type",
+    s3Response.ContentType ||
+      (variant === "thumbnail" ? "image/jpeg" : mediaItem.mimeType),
+  );
   headers.set("X-Content-Type-Options", "nosniff");
   if (s3Response.ContentLength) {
     headers.set("Content-Length", String(s3Response.ContentLength));

lib/media/thumbnail.ts

@@ -14,6 +14,16 @@ import {
   traceAsync,
 } from "@/lib/telemetry";
 import { deleteFromS3, deleteFromS3Batch, uploadToS3 } from "./s3";
+
+export function getThumbnailS3Key(mediaId: string) {
+  return `media/${mediaId}/thumbnail.jpg`;
+}
+
+export function isHeicMimeType(mimeType?: string | null) {
+  const normalized = mimeType?.split(";")[0]?.toLowerCase();
+  return normalized === "image/heic" || normalized === "image/heif";
+}
+
 export async function processImageUpload(
   input: Readable | Buffer,
   mediaId: string,
@@ -124,7 +134,7 @@ async function uploadThumbnail(
   tags?: Record<string, string>,
   signal?: AbortSignal,
 ) {
-  const thumbnailS3Key = `media/${mediaId}/thumbnail.jpg`;
+  const thumbnailS3Key = getThumbnailS3Key(mediaId);
   await uploadToS3(thumbnailBuffer, thumbnailS3Key, "image/jpeg", signal, tags);
   return thumbnailS3Key;
 }
@@ -138,10 +148,7 @@ async function generateImageThumbnailBuffer(
   height?: number;
   exifBuffer?: Buffer;
 }> {
-  const isHeic =
-    mimeType?.toLowerCase() === "image/heic" ||
-    mimeType?.toLowerCase() === "image/heif";
-  if (isHeic) {
+  if (isHeicMimeType(mimeType)) {
     let decoder: any = decode;
     if (
       typeof decoder !== "function" &&
@@ -190,7 +197,7 @@ async function processImageUploadInternal(
       exifBuffer,
     };
   } catch (error: any) {
-    if (mimeType?.toLowerCase() !== "image/heic") {
+    if (!isHeicMimeType(mimeType)) {
       logger.info(
         "Sharp failed with unsupported format, attempting HEIC fallback...",
       );
@@ -336,7 +343,7 @@ async function generateVideoThumbnail(
       sharp(thumbnailBuffer),
     );
     if (signal?.aborted) return null;
-    const thumbnailS3Key = `media/${mediaId}/thumbnail.jpg`;
+    const thumbnailS3Key = getThumbnailS3Key(mediaId);
     await uploadToS3(
       processedThumbnail,
       thumbnailS3Key,