Upgrade PDF.js to v5 (#24646)

GitOrigin-RevId: 3ef46af6363aab5b5b007b6c9d72decae65a36ab

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

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

services/web/frontend/js/features/pdf-preview/util/pdf-caching-transport.js

@@ -149,14 +149,11 @@ export function generatePdfCachingTransportFactory() {
             return blob
           })
           .catch(err => {
+            const { statusCode, url } = OError.getFullInfo(err)
             throw OError.tag(
-              new PDFJS.MissingPDFException(),
+              new PDFJS.ResponseException(undefined, statusCode, true),
               'cache-fallback',
-              {
-                statusCode: OError.getFullInfo(err).statusCode,
-                url: OError.getFullInfo(err).url,
-                err,
-              }
+              { statusCode, url, err }
             )
           })
       }
@@ -188,11 +185,12 @@ export function generatePdfCachingTransportFactory() {
               metrics.failedCount++
               metrics.failedOnce = true
             }
-            throw OError.tag(new PDFJS.MissingPDFException(), 'caching', {
-              statusCode: OError.getFullInfo(err).statusCode,
-              url: OError.getFullInfo(err).url,
-              err,
-            })
+            const { statusCode, url } = OError.getFullInfo(err)
+            throw OError.tag(
+              new PDFJS.ResponseException(undefined, statusCode, true),
+              'caching',
+              { statusCode, url, err }
+            )
           }
           metrics.failedCount++
           metrics.failedOnce = true
@@ -216,11 +214,12 @@ export function generatePdfCachingTransportFactory() {
           }).catch(err => {
             if (canTryFromCache(err)) return fetchFromCache()
             if (isExpectedError(err)) {
-              throw OError.tag(new PDFJS.MissingPDFException(), 'fallback', {
-                statusCode: OError.getFullInfo(err).statusCode,
-                url: OError.getFullInfo(err).url,
-                err,
-              })
+              const { statusCode, url } = OError.getFullInfo(err)
+              throw OError.tag(
+                new PDFJS.ResponseException(undefined, statusCode, true),
+                'fallback',
+                { statusCode, url, err }
+              )
             }
             throw err
           })
@@ -233,7 +232,7 @@ export function generatePdfCachingTransportFactory() {
           if (abortSignal.aborted) return
           err = OError.tag(err, 'fatal pdf download error', getDebugInfo())
           debugConsole.error(err)
-          if (!(err instanceof PDFJS.MissingPDFException)) {
+          if (!(err instanceof PDFJS.ResponseException && err.missing)) {
             captureException(err, {
               tags: {
                 fromPdfCaching: true,

services/web/frontend/js/features/pdf-preview/util/pdf-js-wrapper.ts

@@ -57,7 +57,7 @@ export default class PDFJSWrapper {
     url: string
     pdfFile: Record<string, any>
     abortController: AbortController
-    handleFetchError: (error: Error) => void
+    handleFetchError: (error: any) => void
   }) {
     this.url = url
 
@@ -90,7 +90,10 @@ export default class PDFJSWrapper {
 
       return doc
     } catch (error: any) {
-      if (!error || error.name !== 'MissingPDFException') {
+      if (
+        !error ||
+        !(error instanceof PDFJS.ResponseException && error.missing === true)
+      ) {
         captureException(error, {
           tags: { handler: 'pdf-preview' },
         })

services/web/frontend/js/features/pdf-preview/util/pdf-js.ts

@@ -10,6 +10,8 @@ PDFJS.GlobalWorkerOptions.workerPort = new Worker(
 
 export const imageResourcesPath = '/images/pdfjs-dist/'
 const cMapUrl = '/js/pdfjs-dist/cmaps/'
+const wasmUrl = '/js/pdfjs-dist/wasm/'
+const iccUrl = '/js/pdfjs-dist/iccs/'
 const standardFontDataUrl = '/fonts/pdfjs-dist/'
 
 const params = new URLSearchParams(window.location.search)
@@ -23,6 +25,8 @@ export const loadPdfDocumentFromUrl = (
   PDFJS.getDocument({
     url,
     cMapUrl,
+    wasmUrl,
+    iccUrl,
     standardFontDataUrl,
     disableFontFace,
     disableAutoFetch: true, // only fetch the data needed for the displayed pages

services/web/package.json

@@ -320,7 +320,7 @@
     "nock": "^13.5.6",
     "nvd3": "^1.8.6",
     "overleaf-editor-core": "*",
-    "pdfjs-dist": "4.10.38",
+    "pdfjs-dist": "5.1.91",
     "pirates": "^4.0.1",
     "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",

services/web/webpack.config.js

@@ -380,12 +380,22 @@ module.exports = {
           context: `${dictionariesDir}/dictionaries`,
         },
         // Copy CMap files (used to provide support for non-Latin characters),
-        // fonts and images from pdfjs-dist package to build output.
+        // wasm, ICC profiles, fonts and images from pdfjs-dist package to build output.
         {
           from: 'cmaps',
           to: 'js/pdfjs-dist/cmaps',
           context: pdfjsDir,
         },
+        {
+          from: 'iccs',
+          to: 'js/pdfjs-dist/iccs',
+          context: pdfjsDir,
+        },
+        {
+          from: 'wasm',
+          to: 'js/pdfjs-dist/wasm',
+          context: pdfjsDir,
+        },
         {
           from: 'standard_fonts',
           to: 'fonts/pdfjs-dist',