Intermitted failure to load PDF

[Jamie Robinson]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I'm using a create-react-app setup, and I'm seeing an intermittent issue whereby the PDF fails to load some of the time, usually after loading a PDF a while after initial refresh of the app. I've trawled issues across many sites and tried all sorts, but just can't work out what is going wrong nor a solution.

Please see the additional information, tried to explain as much as I can but it's hazy in places give the nature of the issue. Would be amazed if it's just me seeing this issue but please, put me out of my misery either way!

Steps to reproduce

• Refresh page and open PDF; works fine
• Open same or new PDF again straight after; works fine
• Large page change / amount of time passes, loading PDF again and it fails

Expected behavior

PDF should load every time

Actual behavior

PDF sometimes fails to load

Additional information

Since I'm using CRA, I'm using the CDN load technique as it's recommended. I've also tried many other implementations out of hope but they didn't work at all etc. I've tried an external CDN to cross check, but have an automated build to host the worker ourselves. So it looks something like this:

const path = ABS_APP_URL + "pdfAssets/" + pdfjs.version.replaceAll(".", "_") + "_pdf.worker.min.js";
pdfjs.GlobalWorkerOptions.workerSrc = path;

On initial page refresh and first load of the PDF, everything loads correctly. Multiple opens, new PDFs etc and everything is fine. However, the PDF fails to load some time after refresh, I use Sentry to capture the events but also have seen it with my own eyes. It doesn't have to be a long time, can only vaguely say "a lot of content change" after refresh seems to cause it, but I haven't been able to find anything concrete.

Via the production error logging, I can see this same issue across all browsers etc, also had this across a range of our own use cases. Obviously tried emptying browser caches etc, from the range of devices and the time we've had this issue, can't imagine that's the problem.

The error logged is "The API version "3.11.174" does not match the Worker version "2.16.105". 2.16.105 is last version of pdfjs we used before upgrading a while ago, for interest sake. As I said, I've tried loading directly from a CDN, as well as checking the version in our self served file; it's just not the wrong version! We also get the Setting up fake worker console log, I'm not sure if the above is because this fake worker of the wrong version?

Another possible explainer is there is no attempt to load the PDF file before this error happens. That would imply the library is failing to load before attempting to load actual content.

Even given this a go, pre-downloading the worker file before loading the React component, still no luck:

fetch(path)
.then((fetchResponse) => {
    return fetchResponse.text();
}).then((code) => {
    const codeBlob = new Blob([code], { type: "text/javascript" });
    const workerURL = URL.createObjectURL(codeBlob);
    pdfjs.GlobalWorkerOptions.workerSrc = workerURL;
});

Environment

• Browser (if applicable): All
• React-PDF version: 7.7.1
• React version: ^18.0.0
• Webpack version (if applicable):