Handle pdf.js loading errors (#7824)

GitOrigin-RevId: a4893dd66ceb9e9f8266cf720ab2b3507bf6aef1

services/web/frontend/extracted-translations.json

@@ -410,6 +410,7 @@
   "showing_1_result_of_total": "",
   "showing_x_results": "",
   "showing_x_results_of_total": "",
+  "something_went_wrong_loading_pdf_viewer": "",
   "something_went_wrong_rendering_pdf": "",
   "something_went_wrong_server": "",
   "somthing_went_wrong_compiling": "",

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

@@ -10,6 +10,7 @@ import withErrorBoundary from '../../../infrastructure/error-boundary'
 import ErrorBoundaryFallback from './error-boundary-fallback'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
 import getMeta from '../../../utils/meta'
+import { captureException } from '../../../infrastructure/error-reporter'
 
 function PdfJsViewer({ url }) {
   const { _id: projectId } = useProjectContext()
@@ -35,19 +36,28 @@ function PdfJsViewer({ url }) {
   const [initialised, setInitialised] = useState(false)
 
   // create the viewer when the container is mounted
-  const handleContainer = useCallback(parent => {
-    if (parent) {
-      const wrapper = new PDFJSWrapper(parent.firstChild)
-      wrapper.init().then(() => {
-        setPdfJsWrapper(wrapper)
-      })
+  const handleContainer = useCallback(
+    parent => {
+      if (parent) {
+        const wrapper = new PDFJSWrapper(parent.firstChild)
+        wrapper
+          .init()
+          .then(() => {
+            setPdfJsWrapper(wrapper)
+          })
+          .catch(error => {
+            setError('pdf-viewer-loading-error')
+            captureException(error)
+          })
 
-      return () => {
-        setPdfJsWrapper(null)
-        wrapper.destroy()
+        return () => {
+          setPdfJsWrapper(null)
+          wrapper.destroy()
+        }
       }
-    }
-  }, [])
+    },
+    [setError]
+  )
 
   // listen for initialize event
   useEffect(() => {

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

@@ -117,6 +117,26 @@ function PdfPreviewError({ error }) {
         </ErrorLogEntry>
       )
 
+    case 'pdf-viewer-loading-error':
+      return (
+        <ErrorLogEntry title={t('pdf_rendering_error')}>
+          <Trans
+            i18nKey="something_went_wrong_loading_pdf_viewer"
+            components={[
+              <strong key="strong-" />,
+              // eslint-disable-next-line jsx-a11y/anchor-has-content
+              <a
+                key="learn-link"
+                target="_blank"
+                href="/learn/how-to/Resolving_access%2C_loading%2C_and_display_problems"
+              />,
+              // eslint-disable-next-line jsx-a11y/anchor-has-content
+              <a key="contact-link" target="_blank" href="/contact" />,
+            ]}
+          />
+        </ErrorLogEntry>
+      )
+
     case 'validation-problems':
       return null // handled elsewhere
 

services/web/locales/en.json

@@ -1070,6 +1070,7 @@
   "click_here_to_preview_pdf": "Click here to preview your work as a PDF.",
   "server_error": "Server Error",
   "somthing_went_wrong_compiling": "Sorry, something went wrong and your project could not be compiled. Please try again in a few moments.",
+  "something_went_wrong_loading_pdf_viewer": "Something went wrong loading the PDF viewer. This might be caused by issues like <0>temporary network problems</0> or an <0>outdated web browser</0>. Please follow the <1>troubleshooting steps for access, loading and display problems</1>. If the issue persists, please <2>let us know</2>.",
   "timedout": "Timed out",
   "proj_timed_out_reason": "Sorry, your compile took too long to run and timed out. This may be due to a LaTeX error, or a large number of high-res images or complicated diagrams.",
   "no_errors_good_job": "No errors, good job!",