fix: add error handling for base64 decode operations

Fixes SPOTLIGHT-ELECTRON-4C
Fixes SPOTLIGHT-ELECTRON-4G

The atob() function throws InvalidCharacterError when decoding invalid
base64 strings. This was causing crashes when viewing attachments with
corrupted or malformed base64 data.

Changes:
- Update base64Decode() to return null on decode failure
- Add error handling in Attachment.tsx with user-friendly error message
- Add error handling in QuerySummary.tsx for URL param decode failures

Author: BYK

packages/spotlight/src/ui/lib/base64.ts

@@ -1,5 +1,26 @@
-export function base64Decode(data: string): Uint8Array {
+/**
+ * Safely decode a base64 string using atob().
+ * Returns null if decoding fails (invalid base64).
+ */
+export function safeAtob(data: string): string | null {
+  try {
+    return atob(data);
+  } catch {
+    // atob throws InvalidCharacterError for invalid base64 strings
+    return null;
+  }
+}
+
+/**
+ * Decodes a base64-encoded string to a Uint8Array.
+ * Returns null if the input is not valid base64.
+ */
+export function base64Decode(data: string): Uint8Array | null {
   // TODO: Use Uint8Array.fromBase64 when it becomes available
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array/fromBase64
-  return Uint8Array.from(atob(data), c => c.charCodeAt(0));
+  const decoded = safeAtob(data);
+  if (decoded === null) {
+    return null;
+  }
+  return Uint8Array.from(decoded, c => c.charCodeAt(0));
 }

packages/spotlight/src/ui/telemetry/components/insights/QuerySummary.tsx

@@ -1,5 +1,6 @@
 import { ReactComponent as Sort } from "@spotlight/ui/assets/sort.svg";
 import { ReactComponent as SortDown } from "@spotlight/ui/assets/sortDown.svg";
+import { safeAtob } from "@spotlight/ui/lib/base64";
 import { cn } from "@spotlight/ui/lib/cn";
 import Breadcrumbs from "@spotlight/ui/ui/breadcrumbs";
 import Table from "@spotlight/ui/ui/table";
@@ -37,7 +38,7 @@ const QuerySummary = () => {
   const { sort, toggleSortOrder } = useSort({ defaultSortType: QUERY_SUMMARY_SORT_KEYS.totalTime });
 
   // Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/atob
-  const decodedType = type && atob(type);
+  const decodedType = type ? safeAtob(type) : null;
 
   const filteredDBSpans: Span[] = useMemo(() => {
     if (!decodedType) {

packages/spotlight/src/ui/telemetry/components/insights/envelopes/Attachment.tsx

@@ -1,7 +1,7 @@
 import type { EnvelopeItem } from "@sentry/core";
 import { ReactComponent as Download } from "@spotlight/ui/assets/download.svg";
-import { base64Decode } from "@spotlight/ui/lib/base64";
-import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { base64Decode, safeAtob } from "@spotlight/ui/lib/base64";
+import { type ReactNode, useEffect, useMemo } from "react";
 import JsonViewer from "../../shared/JsonViewer";
 import { CodeViewer } from "./CodeViewer";
 import { inferExtension } from "./contentType";
@@ -20,53 +20,60 @@ export default function Attachment({
   attachment: string;
   expanded?: boolean;
 }) {
-  const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
   const extension = inferExtension(header.content_type as string | null, header.type as string | null);
   const name = (header.filename as string) || `untitled.${extension}`;
 
-  const createDownloadUrl = useCallback(() => {
-    const blob = new Blob(
-      [
-        IMAGE_CONTENT_TYPES.has(header.content_type as string) || VIDEO_CONTENT_TYPES.has(header.content_type as string)
-          ? (base64Decode(attachment).buffer as BlobPart)
-          : extension === "bin"
-            ? atob(attachment)
-            : attachment,
-      ],
-      { type: (header.content_type as string) || "application/octet-stream" },
-    );
-    const url = URL.createObjectURL(blob);
-    setDownloadUrl(current => {
-      if (current) {
-        URL.revokeObjectURL(current);
-      }
-      return url;
-    });
-    return url;
-  }, [attachment, extension, header.content_type]);
-
-  useEffect(() => {
+  // Create download URL for binary content types
+  // Returns: string (success), null (decode error)
+  const downloadUrl = useMemo(() => {
     if (!expanded) {
-      return;
+      return undefined; // Not needed yet
     }
-    if (!downloadUrl) {
-      createDownloadUrl();
+
+    const contentType = header.content_type as string;
+    let blobData: BlobPart;
+
+    if (IMAGE_CONTENT_TYPES.has(contentType) || VIDEO_CONTENT_TYPES.has(contentType)) {
+      const decoded = base64Decode(attachment);
+      if (!decoded) {
+        return null; // Decode error
+      }
+      blobData = decoded.buffer as BlobPart;
+    } else if (extension === "bin") {
+      const decoded = safeAtob(attachment);
+      if (decoded === null) {
+        return null; // Decode error
+      }
+      blobData = decoded;
+    } else {
+      return undefined; // Not a binary type, no blob URL needed
     }
-  }, [expanded, downloadUrl, createDownloadUrl]);
 
-  useEffect(
-    () => () => {
+    const blob = new Blob([blobData], { type: contentType || "application/octet-stream" });
+    return URL.createObjectURL(blob);
+  }, [expanded, attachment, extension, header.content_type]);
+
+  // Cleanup blob URL on unmount or when URL changes
+  useEffect(() => {
+    return () => {
       if (downloadUrl) {
         URL.revokeObjectURL(downloadUrl);
       }
-    },
-    [downloadUrl],
-  );
+    };
+  }, [downloadUrl]);
+
+  const decodeError = downloadUrl === null;
 
   let content: ReactNode = null;
 
   if (expanded) {
-    if (header.content_type === "text/plain" || header.content_type === "text/csv") {
+    if (decodeError) {
+      content = (
+        <pre className="text-destructive-400 whitespace-pre-wrap break-words font-mono text-sm rounded-sm bg-primary-900 p-2">
+          Failed to decode attachment data. The base64 data may be corrupted or invalid.
+        </pre>
+      );
+    } else if (header.content_type === "text/plain" || header.content_type === "text/csv") {
       content = (
         <pre className="text-primary-300 whitespace-pre-wrap break-words font-mono text-sm rounded-sm bg-primary-900 p-2">
           {attachment}