Network and Worker errors since we switched from the Iframe to WebComponent API

Technical Support WebViewer
1

Hello,

We’ve been using WebViewer in our React app for quite some time now. Recently, we switched from the Iframe to WebComponent API, however, we started seeing Sentry errors like NetworkError: A network error occurred and WorkerError: The worker has encountered an error. We couldn’t understand what’s causing these issues as they’re coming from the minified webviewer’s source code.

WorkerError: The worker has encountered an error
    at e (/static/$release/shell/js/pdftron/core/webviewer-core.min.js:1016:194)
    at ua/this.dca/< (/static/$release/shell/js/pdftron/core/webviewer-core.min.js:733:91)
    at ua/this.Cla< (/static/$release/shell/js/pdftron/core/webviewer-core.min.js:733:23)
    at ib (/static/$release/shell/js/pdftron/core/webviewer-core.min.js:147:83)
    at Fb (/static/$release/shell/js/pdftron/core/webviewer-core.min.js:147:473)

We are using version 11.7.1 and we’re hosting the WebViewer static files in an S3 bucket that’s hosted on a different domain. It would be great if you could help us understand what could be causing these issues.

Thank you!

2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


It sounds like the errors you’re encountering are related to cross-origin issues and worker setup when switching to the WebComponent API. This can occur if worker files are not correctly set up or if there are issues with cross-origin resource sharing (CORS) settings when serving files from a different domain.

Some things you can try:

  • Ensure that the worker files (CORSWorker.js and Worker.js) are served from the same domain as your application to avoid cross-origin issues.

  • Use the setLocalWorkerPath and setWorkerPath APIs after the WebComponent promise resolves to specify the correct paths for your worker files.

  • Verify that CORS is properly configured on your S3 bucket to allow requests from your application’s domain.

  • If you are using the content editing feature in WebViewer, ensure that you set the paths for the content edit workers using Core.ContentEdit.setResourcePath and Core.ContentEdit.setWorkerPath.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

3

Hello Haithem,

Thank you for contacting WebViewer Forums.

These type of network or worker errors are often related to the worker scripts failing to load which can come from misconfigured WebViewer path or the browser blocking network requests.

To investigate, are there any network errors when inspecting with devtools → network tab? Are the request URLs correct?

Can you also provide your WebViewer constructor as well as how you switched from Iframe to WebComponent?

Regards,
Luke

4

These type of network or worker errors are often related to the worker scripts failing to load which can come from misconfigured WebViewer path or the browser blocking network requests.

To investigate, are there any network errors when inspecting with devtools → network tab? Are the request URLs correct?

No, we’re not getting any network errors in the devtools. Everything loads perfectly, and we can preview the documents. But these errors are happening to a good number of our customers, we ourselves couldn’t replicate them, we’re seeing them only in Sentry.

Can you also provide your WebViewer constructor as well as how you switched from Iframe to WebComponent?

This is how we’re calling the WebViewer constructor:

const PDFTRON_PATH = `/static/${release}/shell/js/pdftron`;

 const instance = await WebViewer.WebComponent(
        {
          licenseKey: process.env.PDFTRON_LICENSE_KEY_FRONTEND,
          disableObjectURLBlobs: true,
          extension: "pdf",
          preloadWorker: WebViewer.WorkerTypes.PDF,
          useDownloader: false,
          isReadOnly: readOnly,
          path: PDFTRON_PATH,
          annotationUser: username
        },
        pdfViewerRef.current
      );

When we were using the iframe, we had a config file Config Files for JavaScript PDF Viewer | Apryse documentation, but we removed it after we switched to the WebComponent since it’s not needed anymore.

I came across this Cross Origin Workers | Apryse documentation, and I realized that we’re not using setWorkerPath and setLocalWorkerPath. Do you think this could be related to why we’re getting the errors? Because we didn’t use those APIs with the iframe and never saw these issues.

5

Hello Haithem,

Thank you for your reply.

When working with WebComponent and accessing the WebViewer files remotely, config files are not needed as you have stated. I would recommend setting up the workerPaths so it can fetch the worker files correctly as outlined in our documentation.

Regards,
Luke

6

I added this to our code, but unfortutnately it didn’t help, we’re still getting the errros.

instance.Core.setWorkerPath(`${PDFTRON_PATH}/core`);
instance.Core.setLocalWorkerPath("../core");
7

I wanted to mention that we get also other type of errors like below if it helps

TypeError: can't access property "host", l() is undefined
    at getInstanceID (./src/ui/src/helpers/getRootNode.js:47:16)
    at call (./src/ui/src/redux/initialState.js:42:20)
    at __webpack_require__ (webpack/bootstrap:63:22)
    at <anonymous> (webpack/bootstrap:198:10)
    at ? (/static/$version/shell/js/pdftron/ui/webviewer-ui.min.js:3:2097)

Error: Failed to find PDF worker files. This project is not set up to work with PDF files.
    at ka (/static/$version/shell/js/pdftron/core/webviewer-core.min.js:235:301)
    at la/</< (/static/$version/shell/js/pdftron/core/webviewer-core.min.js:4034:262)
8

Hello Haithem,

Thank you for your reply.

As you have stated there is no issue on your end however users are experiencing this issue. I would suggest they try clearing cache and seeing if the worker files are being fetched correctly.

As it may be difficult to troubleshoot network issues, it may be worth providing a test WebViewer environment so that our team can investigate. If this is more confidential, please submit a ticket through our support portal: Submit a ticket : Apryse

Regards,
Luke