fix(files): support Safari < 17.4 in PDF preview

pdf.js 5.x calls Promise.withResolvers (Safari >= 17.4) and URL.parse
(Safari >= 18) at module-evaluation time, so on older engines importing
react-pdf threw an uncaught TypeError that unwound to the workspace
error boundary — every PDF preview (chat and Files tab) rendered as
"Something went wrong" for those users.

- Polyfill both APIs in a side-effect module imported before react-pdf
- Serve the legacy pdf.js worker build, which self-polyfills (the worker
  context is unreachable from main-thread polyfills)
- Wrap the PDF preview in an error boundary so a viewer crash degrades
  to the standard preview fallback instead of replacing the workspace

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx

@@ -20,6 +20,7 @@ import { resolvePreviewType } from './preview-panel'
 import {
   PREVIEW_LOADING_OVERLAY,
   PreviewError,
+  PreviewErrorBoundary,
   PreviewLoadingFrame,
   resolvePreviewError,
 } from './preview-shared'
@@ -145,11 +146,13 @@ const IframePreview = memo(function IframePreview({
   }
 
   return (
-    <PdfViewerCore
-      key={`${file.id}:${preview.dataUpdatedAt}`}
-      source={bufferSource}
-      filename={file.name}
-    />
+    <PreviewErrorBoundary label='PDF'>
+      <PdfViewerCore
+        key={`${file.id}:${preview.dataUpdatedAt}`}
+        source={bufferSource}
+        filename={file.name}
+      />
+    </PreviewErrorBoundary>
   )
 })
 

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+// Must precede the react-pdf import: pdf.js calls the polyfilled APIs while
+// its module evaluates, which throws on Safari < 17.4 without them.
+import '@/lib/core/utils/browser-polyfills'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { pdfjs, Document as ReactPdfDocument, Page as ReactPdfPage } from 'react-pdf'
@@ -8,8 +11,10 @@ import { PREVIEW_LOADING_OVERLAY } from '@/app/workspace/[workspaceId]/files/com
 import { PreviewToolbar } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-toolbar'
 import { bindPreviewWheelZoom } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom'
 
+// The worker runs in its own context that browser-polyfills cannot reach, so
+// serve the legacy worker build, which bundles its own polyfills.
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  'pdfjs-dist/build/pdf.worker.min.mjs',
+  'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
   import.meta.url
 ).href
 

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx

@@ -1,7 +1,11 @@
 'use client'
 
+import { Component, type ReactNode } from 'react'
+import { createLogger } from '@sim/logger'
 import { cn } from '@/lib/core/utils/cn'
 
+const logger = createLogger('FilePreview')
+
 export function PreviewError({ label, error }: { label: string; error: string }) {
   return (
     <div className='flex flex-1 flex-col items-center justify-center gap-[8px]'>
@@ -13,6 +17,53 @@ export function PreviewError({ label, error }: { label: string; error: string })
   )
 }
 
+interface PreviewErrorBoundaryProps {
+  /** Format label shown in the fallback, e.g. "PDF". */
+  label: string
+  children: ReactNode
+}
+
+interface PreviewErrorBoundaryState {
+  hasError: boolean
+  error?: Error
+}
+
+/**
+ * Error boundary for preview renderers. Catches render-time crashes (including
+ * a preview module whose dynamic import rejected) and degrades to the standard
+ * PreviewError fallback instead of unwinding to the route-level error boundary
+ * and replacing the whole workspace view.
+ */
+export class PreviewErrorBoundary extends Component<
+  PreviewErrorBoundaryProps,
+  PreviewErrorBoundaryState
+> {
+  public state: PreviewErrorBoundaryState = {
+    hasError: false,
+  }
+
+  public static getDerivedStateFromError(error: Error): PreviewErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  public componentDidCatch(error: Error) {
+    logger.error('Preview crashed', { label: this.props.label, error: error.message })
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <PreviewError
+          label={this.props.label}
+          error={this.state.error?.message ?? 'An unexpected error occurred'}
+        />
+      )
+    }
+
+    return this.props.children
+  }
+}
+
 export function resolvePreviewError(
   fetchError: Error | null,
   renderError: string | null

apps/sim/lib/core/utils/browser-polyfills.ts

@@ -0,0 +1,47 @@
+/**
+ * Polyfills for `Promise.withResolvers` (Safari < 17.4, Chrome < 119) and
+ * `URL.parse` (Safari < 18, Chrome < 126), which pdf.js 5.x calls at
+ * module-evaluation time. Without them, importing `react-pdf`/`pdfjs-dist`
+ * throws before anything renders, so this module must be imported for its
+ * side effects BEFORE those imports. The pdf.js worker runs in a separate
+ * context these polyfills cannot reach; it is covered by serving pdf.js's
+ * self-polyfilling legacy worker build (see pdf-viewer.tsx).
+ *
+ * Typed locally because the repo TS lib is ES2022, which predates both APIs.
+ */
+
+interface PromiseWithResolversResult<T> {
+  promise: Promise<T>
+  resolve: (value: T | PromiseLike<T>) => void
+  reject: (reason?: unknown) => void
+}
+
+const promiseCtor = Promise as typeof Promise & {
+  withResolvers?: <T>() => PromiseWithResolversResult<T>
+}
+
+if (typeof promiseCtor.withResolvers !== 'function') {
+  promiseCtor.withResolvers = <T>(): PromiseWithResolversResult<T> => {
+    let resolve!: (value: T | PromiseLike<T>) => void
+    let reject!: (reason?: unknown) => void
+    const promise = new Promise<T>((res, rej) => {
+      resolve = res
+      reject = rej
+    })
+    return { promise, resolve, reject }
+  }
+}
+
+const urlCtor = URL as typeof URL & {
+  parse?: (url: string | URL, base?: string | URL) => URL | null
+}
+
+if (typeof urlCtor.parse !== 'function') {
+  urlCtor.parse = (url: string | URL, base?: string | URL): URL | null => {
+    try {
+      return new URL(url, base)
+    } catch {
+      return null
+    }
+  }
+}