Merge pull request #10299 from overleaf/jpa-nicer-warning-message-for-missing-pdf

[web] show a nicer warning message for missing pdf exceptions

GitOrigin-RevId: f519ec145d7ff4fe725241742fb66a1defdd257e

services/web/frontend/extracted-translations.json

@@ -327,6 +327,7 @@
   "labs_program_not_participating": "",
   "last_modified": "",
   "last_name": "",
+  "last_resort_trouble_shooting_guide": "<0></0>",
   "last_updated_date_by_x": "",
   "latex_help_guide": "",
   "layout": "",
@@ -596,6 +597,7 @@
   "showing_x_results_of_total": "",
   "something_went_wrong_loading_pdf_viewer": "",
   "something_went_wrong_rendering_pdf": "",
+  "something_went_wrong_rendering_pdf_expected": "<0></0>",
   "something_went_wrong_server": "",
   "somthing_went_wrong_compiling": "",
   "sort_by": "",

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

@@ -128,10 +128,14 @@ function PdfJsViewer({ url, pdfFile }) {
       setStartFetch(performance.now())
 
       const abortController = new AbortController()
-      const handleFetchError = () => {
+      const handleFetchError = err => {
         if (abortController.signal.aborted) return
         // The error is already logged at the call-site with additional context.
-        setError('rendering-error')
+        if (err instanceof pdfJsWrapper.PDFJS.MissingPDFException) {
+          setError('rendering-error-expected')
+        } else {
+          setError('rendering-error')
+        }
       }
       pdfJsWrapper
         .loadDocument({ url, pdfFile, abortController, handleFetchError })

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

@@ -10,7 +10,39 @@ import StopOnFirstErrorBadge from '../../../shared/components/stop-on-first-erro
 function PdfPreviewError({ error }) {
   const { t } = useTranslation()
 
+  const { startCompile } = useCompileContext()
+
   switch (error) {
+    case 'rendering-error-expected':
+      return (
+        <PdfLogEntry
+          headerTitle={t('pdf_rendering_error')}
+          formattedContent={
+            <>
+              <Trans i18nKey="something_went_wrong_rendering_pdf_expected">
+                <Button
+                  bsSize="xs"
+                  bsStyle="info"
+                  onClick={() => startCompile()}
+                />
+              </Trans>
+              <br />
+              <br />
+              <Trans i18nKey="last_resort_trouble_shooting_guide">
+                {
+                  // eslint-disable-next-line jsx-a11y/anchor-has-content
+                  <a
+                    href="/learn/how-to/Resolving_access%2C_loading%2C_and_display_problems"
+                    target="_blank"
+                  />
+                }
+              </Trans>
+            </>
+          }
+          level="warning"
+        />
+      )
+
     case 'rendering-error':
       return (
         <ErrorLogEntry title={t('pdf_rendering_error')}>

services/web/locales/en.json

@@ -788,6 +788,8 @@
   "log_viewer_error": "There was a problem displaying this project’s compilation errors and logs.",
   "try_recompile_project_or_troubleshoot": "Please try recompiling the project from scratch, and if that doesn’t help, follow our <0>troubleshooting guide</0>.",
   "something_went_wrong_rendering_pdf": "Something went wrong while rendering this PDF.",
+  "something_went_wrong_rendering_pdf_expected": "There was an issue displaying this PDF. <0>Please recompile</0>",
+  "last_resort_trouble_shooting_guide": "If that doesn’t help, follow our <0>troubleshooting guide</0>.",
   "mendeley_reference_loading_error_expired": "Mendeley token expired, please re-link your account",
   "zotero_reference_loading_error_expired": "Zotero token expired, please re-link your account",
   "mendeley_reference_loading_error_forbidden": "Could not load references from Mendeley, please re-link your account and try again",