improvement(logs): contain snapshot chunk-load failures and settle the local-fs tool on recovery failure

Review round: wrap both lazy ExecutionSnapshot render sites in a small error
boundary (Suspense handles the lazy import's pending state, not its
rejection — a failed chunk load would have unwound to the route boundary and
replaced the logs page over an optional modal; mirrors PreviewErrorBoundary),
and contain rejections inside the local-filesystem executor's load-failure
recovery so a failed completion report degrades to a log instead of an
unhandled rejection.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts

@@ -2026,16 +2026,29 @@ export function useChat(
         (m) => m.executeLocalFilesystemTool(toolCallId, toolName, toolArgs, options),
         async (error) => {
           logger.error('Failed to load local filesystem tool executor', { error })
-          const [{ reportClientToolCompletion }, { ASYNC_TOOL_CONFIRMATION_STATUS }] =
-            await Promise.all([
-              import('@/lib/copilot/tools/client/completion'),
-              import('@/lib/copilot/async-runs/lifecycle'),
-            ])
-          await reportClientToolCompletion(
-            toolCallId,
-            ASYNC_TOOL_CONFIRMATION_STATUS.error,
-            'Local filesystem tool failed to load'
-          )
+          /**
+           * The recovery itself can reject (the helper chunks or the completion POST can
+           * fail for the same reason the executor chunk did). Contain it: an unhandled
+           * rejection here would settle nothing and surface as a console error, exactly
+           * like the executor's own report-failure path, which also degrades to a log.
+           */
+          try {
+            const [{ reportClientToolCompletion }, { ASYNC_TOOL_CONFIRMATION_STATUS }] =
+              await Promise.all([
+                import('@/lib/copilot/tools/client/completion'),
+                import('@/lib/copilot/async-runs/lifecycle'),
+              ])
+            await reportClientToolCompletion(
+              toolCallId,
+              ASYNC_TOOL_CONFIRMATION_STATUS.error,
+              'Local filesystem tool failed to load'
+            )
+          } catch (reportError) {
+            logger.error('Failed to report local filesystem tool load failure', {
+              toolCallId,
+              error: reportError,
+            })
+          }
         }
       )
     },

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

@@ -0,0 +1,49 @@
+'use client'
+
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+import { toast } from '@sim/emcn'
+import { createLogger } from '@sim/logger'
+
+const logger = createLogger('ExecutionSnapshotBoundary')
+
+interface SnapshotBoundaryProps {
+  children: ReactNode
+}
+
+interface SnapshotBoundaryState {
+  hasError: boolean
+}
+
+/**
+ * Error boundary for the lazily loaded execution snapshot.
+ *
+ * `Suspense` handles the pending state of the lazy import but not its
+ * rejection — a failed chunk load (deploy skew, offline) would otherwise
+ * 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.
+ *
+ * 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.
+ */
+export class SnapshotBoundary extends Component<SnapshotBoundaryProps, SnapshotBoundaryState> {
+  public state: SnapshotBoundaryState = { hasError: false }
+
+  public static getDerivedStateFromError(): SnapshotBoundaryState {
+    return { hasError: true }
+  }
+
+  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.')
+  }
+
+  public render() {
+    return this.state.hasError ? null : this.props.children
+  }
+}

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

@@ -63,6 +63,7 @@ import { DELETED_WORKFLOW_LABEL } from '@/lib/workflows/workflow-labels'
  * barrel forms a parent->child cycle that would keep the barrel edge to the snapshot
  * alive and silently defeat the ExecutionSnapshot lazy split below.
  */
+import { SnapshotBoundary } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary'
 import { FileCards } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/file-download'
 import { TraceView } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view'
 import { useLogDetailsResize } from '@/app/workspace/[workspaceId]/logs/hooks'
@@ -702,15 +703,17 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
 
       {/* Frozen Canvas Modal */}
       {log.executionId && (
-        <Suspense fallback={null}>
-          <ExecutionSnapshot
-            executionId={log.executionId}
-            traceSpans={traceSpans}
-            isModal
-            isOpen={isExecutionSnapshotOpen}
-            onClose={() => setIsExecutionSnapshotOpen(false)}
-          />
-        </Suspense>
+        <SnapshotBoundary key={log.executionId}>
+          <Suspense fallback={null}>
+            <ExecutionSnapshot
+              executionId={log.executionId}
+              traceSpans={traceSpans}
+              isModal
+              isOpen={isExecutionSnapshotOpen}
+              onClose={() => setIsExecutionSnapshotOpen(false)}
+            />
+          </Suspense>
+        </SnapshotBoundary>
       )}
     </>
   )

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

@@ -66,6 +66,7 @@ import {
   type ResourceTableHandle,
 } from '@/app/workspace/[workspaceId]/components'
 import { LogsEmptyState } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state'
+import { SnapshotBoundary } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary'
 import { useLogFilters } from '@/app/workspace/[workspaceId]/logs/hooks/use-log-filters'
 import { useSearchState } from '@/app/workspace/[workspaceId]/logs/hooks/use-search-state'
 import {
@@ -1275,15 +1276,17 @@ export default function Logs() {
       />
 
       {previewLogId !== null && previewDetailQuery.data?.executionId && (
-        <Suspense fallback={null}>
-          <ExecutionSnapshot
-            executionId={previewDetailQuery.data.executionId}
-            traceSpans={previewDetailQuery.data.executionData?.traceSpans}
-            isModal
-            isOpen={previewLogId !== null}
-            onClose={handleClosePreview}
-          />
-        </Suspense>
+        <SnapshotBoundary key={previewDetailQuery.data.executionId}>
+          <Suspense fallback={null}>
+            <ExecutionSnapshot
+              executionId={previewDetailQuery.data.executionId}
+              traceSpans={previewDetailQuery.data.executionData?.traceSpans}
+              isModal
+              isOpen={previewLogId !== null}
+              onClose={handleClosePreview}
+            />
+          </Suspense>
+        </SnapshotBoundary>
       )}
     </>
   )