Add PdfPreviewProvider and preserve PDF viewer loading error (#14970)

GitOrigin-RevId: ac305633c7c0bc13f5f670b71890cfd30a3cbffd

services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js

@@ -13,6 +13,7 @@ import { captureException } from '../../../infrastructure/error-reporter'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 import { getPdfCachingMetrics } from '../util/metrics'
 import { debugConsole } from '@/utils/debugging'
+import { usePdfPreviewContext } from '@/features/pdf-preview/components/pdf-preview-provider'
 
 function PdfJsViewer({ url, pdfFile }) {
   const { _id: projectId } = useProjectContext()
@@ -20,6 +21,8 @@ function PdfJsViewer({ url, pdfFile }) {
   const { setError, firstRenderDone, highlights, position, setPosition } =
     useCompileContext()
 
+  const { setLoadingError } = usePdfPreviewContext()
+
   // state values persisted in localStorage to restore on load
   const [scale, setScale] = usePersistedState(
     `pdf-viewer-scale:${projectId}`,
@@ -41,7 +44,7 @@ function PdfJsViewer({ url, pdfFile }) {
             setPdfJsWrapper(wrapper)
           })
           .catch(error => {
-            setError('pdf-viewer-loading-error')
+            setLoadingError(true)
             captureException(error)
           })
 
@@ -51,7 +54,7 @@ function PdfJsViewer({ url, pdfFile }) {
         }
       }
     },
-    [setError]
+    [setLoadingError]
   )
 
   const [startFetch, setStartFetch] = useState(0)

services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.js

@@ -14,6 +14,7 @@ import PdfPreviewErrorBoundaryFallback from './pdf-preview-error-boundary-fallba
 import PdfCodeCheckFailedNotice from './pdf-code-check-failed-notice'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
 import PdfLogEntry from './pdf-log-entry'
+import { usePdfPreviewContext } from '@/features/pdf-preview/components/pdf-preview-provider'
 
 function PdfLogsViewer() {
   const {
@@ -27,15 +28,23 @@ function PdfLogsViewer() {
     showNewCompileTimeoutUI,
   } = useCompileContext()
 
+  const { loadingError } = usePdfPreviewContext()
+
   const { t } = useTranslation()
 
   return (
-    <div className={classnames('logs-pane', { hidden: !showLogs })}>
+    <div
+      className={classnames('logs-pane', {
+        hidden: !showLogs && !loadingError,
+      })}
+    >
       <div className="logs-pane-content">
         {codeCheckFailed && <PdfCodeCheckFailedNotice />}
 
         {stoppedOnFirstError && <StopOnFirstErrorPrompt />}
 
+        {loadingError && <PdfPreviewError error="pdf-viewer-loading-error" />}
+
         {showNewCompileTimeoutUI && error === 'timedout' ? (
           <TimeoutUpgradePromptNew />
         ) : (

services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.js

@@ -9,6 +9,7 @@ import FasterCompilesFeedback from './faster-compiles-feedback'
 import { PdfPreviewMessages } from './pdf-preview-messages'
 import CompileTimeWarning from './compile-time-warning'
 import CompileTimeoutMessages from './compile-timeout-messages'
+import { PdfPreviewProvider } from './pdf-preview-provider'
 
 function PdfPreviewPane() {
   const { pdfUrl, showNewCompileTimeoutUI } = useCompileContext()
@@ -17,21 +18,23 @@ function PdfPreviewPane() {
   })
   return (
     <div className={classes}>
-      <PdfHybridPreviewToolbar />
-      <PdfPreviewMessages>
-        {showNewCompileTimeoutUI ? (
-          <CompileTimeoutMessages />
-        ) : (
-          <CompileTimeWarning />
-        )}
-      </PdfPreviewMessages>
-      <Suspense fallback={<LoadingPreview />}>
-        <div className="pdf-viewer">
-          <PdfViewer />
-          <FasterCompilesFeedback />
-        </div>
-      </Suspense>
-      <PdfLogsViewer />
+      <PdfPreviewProvider>
+        <PdfHybridPreviewToolbar />
+        <PdfPreviewMessages>
+          {showNewCompileTimeoutUI ? (
+            <CompileTimeoutMessages />
+          ) : (
+            <CompileTimeWarning />
+          )}
+        </PdfPreviewMessages>
+        <Suspense fallback={<LoadingPreview />}>
+          <div className="pdf-viewer">
+            <PdfViewer />
+            <FasterCompilesFeedback />
+          </div>
+        </Suspense>
+        <PdfLogsViewer />
+      </PdfPreviewProvider>
     </div>
   )
 }

services/web/frontend/js/features/pdf-preview/components/pdf-preview-provider.tsx

@@ -0,0 +1,34 @@
+import { createContext, FC, useContext, useMemo, useState } from 'react'
+
+const PdfPreviewContext = createContext<
+  | {
+      loadingError: boolean
+      setLoadingError: (value: boolean) => void
+    }
+  | undefined
+>(undefined)
+
+export const usePdfPreviewContext = () => {
+  const context = useContext(PdfPreviewContext)
+  if (!context) {
+    throw new Error(
+      'usePdfPreviewContext is only avalable inside PdfPreviewProvider'
+    )
+  }
+  return context
+}
+
+export const PdfPreviewProvider: FC = ({ children }) => {
+  const [loadingError, setLoadingError] = useState(false)
+
+  const value = useMemo(
+    () => ({ loadingError, setLoadingError }),
+    [loadingError]
+  )
+
+  return (
+    <PdfPreviewContext.Provider value={value}>
+      {children}
+    </PdfPreviewContext.Provider>
+  )
+}

services/web/test/frontend/components/pdf-preview/pdf-js-viewer.spec.tsx

@@ -3,6 +3,7 @@ import PdfJsViewer from '../../../../frontend/js/features/pdf-preview/components
 import { mockScope } from './scope'
 import { getContainerEl } from 'cypress/react'
 import { unmountComponentAtNode } from 'react-dom'
+import { PdfPreviewProvider } from '../../../../frontend/js/features/pdf-preview/components/pdf-preview-provider'
 
 describe('<PdfJSViewer/>', function () {
   beforeEach(function () {
@@ -16,9 +17,11 @@ describe('<PdfJSViewer/>', function () {
 
     cy.mount(
       <EditorProviders scope={scope}>
-        <div className="pdf-viewer">
-          <PdfJsViewer url="/build/123/output.pdf" />
-        </div>
+        <PdfPreviewProvider>
+          <div className="pdf-viewer">
+            <PdfJsViewer url="/build/123/output.pdf" />
+          </div>
+        </PdfPreviewProvider>
       </EditorProviders>
     )
 
@@ -39,9 +42,11 @@ describe('<PdfJSViewer/>', function () {
 
     cy.mount(
       <EditorProviders scope={scope}>
-        <div className="pdf-viewer">
-          <PdfJsViewer url="/build/123/output.pdf" />
-        </div>
+        <PdfPreviewProvider>
+          <div className="pdf-viewer">
+            <PdfJsViewer url="/build/123/output.pdf" />
+          </div>
+        </PdfPreviewProvider>
       </EditorProviders>
     )
 
@@ -57,9 +62,11 @@ describe('<PdfJSViewer/>', function () {
 
     cy.mount(
       <EditorProviders scope={scope}>
-        <div className="pdf-viewer">
-          <PdfJsViewer url="/build/123/output.pdf" />
-        </div>
+        <PdfPreviewProvider>
+          <div className="pdf-viewer">
+            <PdfJsViewer url="/build/123/output.pdf" />
+          </div>
+        </PdfPreviewProvider>
       </EditorProviders>
     )
 
@@ -75,9 +82,11 @@ describe('<PdfJSViewer/>', function () {
 
     cy.mount(
       <EditorProviders scope={scope}>
-        <div className="pdf-viewer">
-          <PdfJsViewer url="/build/123/output.pdf" />
-        </div>
+        <PdfPreviewProvider>
+          <div className="pdf-viewer">
+            <PdfJsViewer url="/build/123/output.pdf" />
+          </div>
+        </PdfPreviewProvider>
       </EditorProviders>
     )