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,6 +1,6 @@
 import type { EnvelopeItem } from "@sentry/core";
 import { ReactComponent as Download } from "@spotlight/ui/assets/download.svg";
-import { base64Decode } from "@spotlight/ui/lib/base64";
+import { base64Decode, safeAtob } from "@spotlight/ui/lib/base64";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
 import JsonViewer from "../../shared/JsonViewer";
 import { CodeViewer } from "./CodeViewer";
@@ -21,20 +21,33 @@ export default function Attachment({
   expanded?: boolean;
 }) {
   const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+  const [decodeError, setDecodeError] = useState<boolean>(false);
   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" },
-    );
+    let blobData: BlobPart;
+    const contentType = header.content_type as string;
+
+    if (IMAGE_CONTENT_TYPES.has(contentType) || VIDEO_CONTENT_TYPES.has(contentType)) {
+      const decoded = base64Decode(attachment);
+      if (!decoded) {
+        setDecodeError(true);
+        return null;
+      }
+      blobData = decoded.buffer as BlobPart;
+    } else if (extension === "bin") {
+      const decoded = safeAtob(attachment);
+      if (decoded === null) {
+        setDecodeError(true);
+        return null;
+      }
+      blobData = decoded;
+    } else {
+      blobData = attachment;
+    }
+
+    const blob = new Blob([blobData], { type: contentType || "application/octet-stream" });
     const url = URL.createObjectURL(blob);
     setDownloadUrl(current => {
       if (current) {
@@ -49,10 +62,10 @@ export default function Attachment({
     if (!expanded) {
       return;
     }
-    if (!downloadUrl) {
+    if (!downloadUrl && !decodeError) {
       createDownloadUrl();
     }
-  }, [expanded, downloadUrl, createDownloadUrl]);
+  }, [expanded, downloadUrl, decodeError, createDownloadUrl]);
 
   useEffect(
     () => () => {
@@ -66,7 +79,13 @@ export default function Attachment({
   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}