diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index ecb0ad631c..b01919d21a 100644 --- a/services/web/frontend/extracted-translations.json +++ b/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": "", diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js b/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js index 2172a4003d..5961f3dc7e 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js +++ b/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(() => { diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.js b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.js index a42d96e5fa..0a156b2a5e 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.js +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.js @@ -117,6 +117,26 @@ function PdfPreviewError({ error }) { ) + case 'pdf-viewer-loading-error': + return ( + + , + // eslint-disable-next-line jsx-a11y/anchor-has-content + , + // eslint-disable-next-line jsx-a11y/anchor-has-content + , + ]} + /> + + ) + case 'validation-problems': return null // handled elsewhere diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 7f80596554..bbdd534413 100644 --- a/services/web/locales/en.json +++ b/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 or an <0>outdated web browser. Please follow the <1>troubleshooting steps for access, loading and display problems. If the issue persists, please <2>let us know.", "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!",