@@ -13,6 +17,61 @@ 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.
+ *
+ * Callers must `key` this boundary by the identity of the rendered content
+ * (e.g. file id + data version) — the error state resets only via remount, so
+ * keying the child alone would leave a tripped boundary stuck on the fallback.
+ */
+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, errorInfo: ErrorInfo) {
+ logger.error('Preview crashed', {
+ label: this.props.label,
+ error: error.message,
+ componentStack: errorInfo.componentStack,
+ })
+ }
+
+ public render() {
+ if (this.state.hasError) {
+ return (
+
+ )
+ }
+
+ return this.props.children
+ }
+}
+
export function resolvePreviewError(
fetchError: Error | null,
renderError: string | null
diff --git a/apps/sim/app/workspace/[workspaceId]/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
index 2358d61182..b96ef517aa 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/files.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
@@ -1293,25 +1293,31 @@ export function Files() {
closeListContextMenu()
}, [canEdit, uploading, closeListContextMenu])
- const prevFileIdRef = useRef(fileIdFromRoute)
+ /**
+ * Tracks the route target whose preview mode has been applied. Starts at
+ * null (the list view) rather than the initial route id because on a hard
+ * load the files list may not have arrived when the mode initializer ran —
+ * a deep-linked previewable file would otherwise be locked into the code
+ * editor. The effect therefore defers until the routed file is resolvable:
+ * either its record exists, or the files query has settled (so a missing
+ * id decides 'editor' instead of waiting forever).
+ */
+ const appliedModeFileIdRef = useRef
(null)
+ const routedFileResolved = selectedFile != null || !isLoading
useEffect(() => {
- if (fileIdFromRoute === prevFileIdRef.current) return
- prevFileIdRef.current = fileIdFromRoute
+ if (fileIdFromRoute === appliedModeFileIdRef.current) return
const isJustCreated =
isNewFile || (fileIdFromRoute != null && justCreatedFileIdRef.current === fileIdFromRoute)
if (justCreatedFileIdRef.current && !isJustCreated) {
justCreatedFileIdRef.current = null
}
- const nextMode: PreviewMode = isJustCreated
- ? 'editor'
- : (() => {
- const file = fileIdFromRoute
- ? filesRef.current.find((f) => f.id === fileIdFromRoute)
- : null
- return file && isPreviewable(file) ? 'preview' : 'editor'
- })()
+ if (fileIdFromRoute != null && !routedFileResolved && !isJustCreated) return
+ appliedModeFileIdRef.current = fileIdFromRoute
+ const file = fileIdFromRoute ? selectedFileRef.current : null
+ const nextMode: PreviewMode =
+ !isJustCreated && file && isPreviewable(file) ? 'preview' : 'editor'
setPreviewMode((current) => (nextMode === current ? current : nextMode))
- }, [fileIdFromRoute, isNewFile])
+ }, [fileIdFromRoute, isNewFile, routedFileResolved])
useEffect(() => {
if (isNewFile && fileIdFromRoute) {
diff --git a/apps/sim/lib/core/utils/browser-polyfills.ts b/apps/sim/lib/core/utils/browser-polyfills.ts
new file mode 100644
index 0000000000..bd161d86ab
--- /dev/null
+++ b/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 {
+ promise: Promise
+ resolve: (value: T | PromiseLike) => void
+ reject: (reason?: unknown) => void
+}
+
+const promiseCtor = Promise as typeof Promise & {
+ withResolvers?: () => PromiseWithResolversResult
+}
+
+if (typeof promiseCtor.withResolvers !== 'function') {
+ promiseCtor.withResolvers = (): PromiseWithResolversResult => {
+ let resolve!: (value: T | PromiseLike) => void
+ let reject!: (reason?: unknown) => void
+ const promise = new Promise((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
+ }
+ }
+}