fix(logs): recover cleanly from snapshot chunk failures

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary.test.tsx

@@ -0,0 +1,75 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockToastError } = vi.hoisted(() => ({
+  mockToastError: vi.fn(),
+}))
+
+vi.mock('@sim/emcn', () => ({
+  toast: { error: mockToastError },
+}))
+
+import { SnapshotBoundary } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary'
+
+const LOAD_ERROR = new Error('snapshot chunk failed')
+
+function ThrowingSnapshot() {
+  throw LOAD_ERROR
+}
+
+describe('SnapshotBoundary', () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    act(() => {
+      root = createRoot(container)
+    })
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  it('contains a background pre-warm failure without notifying or closing', () => {
+    const onLoadError = vi.fn()
+
+    act(() => {
+      root.render(
+        <SnapshotBoundary isOpen={false} onLoadError={onLoadError}>
+          <ThrowingSnapshot />
+        </SnapshotBoundary>
+      )
+    })
+
+    expect(container.childNodes).toHaveLength(0)
+    expect(mockToastError).not.toHaveBeenCalled()
+    expect(onLoadError).not.toHaveBeenCalled()
+  })
+
+  it('notifies and closes an explicitly opened snapshot after a load failure', () => {
+    const onLoadError = vi.fn()
+
+    act(() => {
+      root.render(
+        <SnapshotBoundary isOpen onLoadError={onLoadError}>
+          <ThrowingSnapshot />
+        </SnapshotBoundary>
+      )
+    })
+
+    expect(container.childNodes).toHaveLength(0)
+    expect(mockToastError).toHaveBeenCalledWith(
+      'Could not load the workflow snapshot. Refresh and try again.'
+    )
+    expect(onLoadError).toHaveBeenCalledOnce()
+  })
+})

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary.tsx

@@ -8,12 +8,16 @@ const logger = createLogger('ExecutionSnapshotBoundary')
 
 interface SnapshotBoundaryProps {
   children: ReactNode
+  isOpen: boolean
+  onLoadError: () => void
 }
 
 interface SnapshotBoundaryState {
   hasError: boolean
 }
 
+const reportedErrors = new WeakSet<Error>()
+
 /**
  * Error boundary for the lazily loaded execution snapshot.
  *
@@ -22,11 +26,15 @@ interface SnapshotBoundaryState {
  * unwind to the route-level boundary and replace the whole logs page with an
  * error view over an optional modal. Mirrors `PreviewErrorBoundary` in the
  * file viewer: contain, log, degrade. The snapshot is an overlay, so the
- * degraded state renders nothing and a toast explains why it didn't open.
+ * degraded state renders nothing. Closed snapshots are mounted to pre-warm
+ * their chunk and data, so a background failure is logged without interrupting
+ * the user. If the user actually opens a failed snapshot, the caller closes
+ * the modal state and a toast explains why it did not open.
  *
- * Callers must `key` this boundary by the snapshot's identity (execution id)
- * — the error state resets only via remount, so a tripped boundary would
- * otherwise stay stuck for every later log.
+ * Callers must remount this boundary when the snapshot identity changes and
+ * when a pre-warmed snapshot is explicitly opened. Error boundaries reset only
+ * via remount; without both transitions, a failed pre-warm would leave the
+ * later open action stuck in the already-tripped state.
  */
 export class SnapshotBoundary extends Component<SnapshotBoundaryProps, SnapshotBoundaryState> {
   public state: SnapshotBoundaryState = { hasError: false }
@@ -36,11 +44,18 @@ export class SnapshotBoundary extends Component<SnapshotBoundaryProps, SnapshotB
   }
 
   public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    logger.error('Execution snapshot failed to load', {
-      error: error.message,
-      componentStack: errorInfo.componentStack,
-    })
-    toast.error('Could not load the workflow snapshot. Refresh and try again.')
+    if (!reportedErrors.has(error)) {
+      reportedErrors.add(error)
+      logger.error('Execution snapshot failed to load', {
+        error: error.message,
+        componentStack: errorInfo.componentStack,
+      })
+    }
+
+    if (this.props.isOpen) {
+      toast.error('Could not load the workflow snapshot. Refresh and try again.')
+      this.props.onLoadError()
+    }
   }
 
   public render() {

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -703,7 +703,11 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
 
       {/* Frozen Canvas Modal */}
       {log.executionId && (
-        <SnapshotBoundary key={log.executionId}>
+        <SnapshotBoundary
+          key={`${log.executionId}:${isExecutionSnapshotOpen ? 'open' : 'closed'}`}
+          isOpen={isExecutionSnapshotOpen}
+          onLoadError={() => setIsExecutionSnapshotOpen(false)}
+        >
           <Suspense fallback={null}>
             <ExecutionSnapshot
               executionId={log.executionId}

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -1276,7 +1276,11 @@ export default function Logs() {
       />
 
       {previewLogId !== null && previewDetailQuery.data?.executionId && (
-        <SnapshotBoundary key={previewDetailQuery.data.executionId}>
+        <SnapshotBoundary
+          key={previewDetailQuery.data.executionId}
+          isOpen
+          onLoadError={handleClosePreview}
+        >
           <Suspense fallback={null}>
             <ExecutionSnapshot
               executionId={previewDetailQuery.data.executionId}