Intermitted failure to load PDF

Jimbob001 commented 3 months ago

Before you start - checklist

[X] I followed instructions in documentation written for my React-PDF version
[X] I have checked if this bug is not already reported
[X] I have checked if an issue is not listed in Known issues
[X] 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):

quarryman commented 1 month ago

I am seeing similar issue, however I am not able to capture logs the author provided.

Behaviour I see: file is rendered correctly within CRA app. Once page is left for a few minutes, or sometimes there are a few interactions with the page not related to PDF, PDF becomes blank. It reappears if user forces rerender by changing pdf block size, which we allow. On page refresh pdf is again present as well and will again become blank after certain time

wojtekmaj commented 1 month ago

@quarryman Your issue is likely #1798, not that.

wojtekmaj commented 1 month ago

@Jimbob001 your workerSrc implementation looks fine.

I'd check if you have multiple versions of pdfjs-dist installed? You shouldn't need to add pdfjs-dist on your own to dependencies at all, it should be a secondary dependency.

Setting up fake worker is expected when PDF.js fails to load the actual worker - which, because of version mismatch, is the correct behavior.

Jimbob001 commented 1 month ago

HI @wojtekmaj, no is the short answer.

I haven't got pdfjs-dist in my set dependencies and searching in my yarn.lock I can only find version 3.11.174 referenced.

I've just sent a donation as a thank you for your work on this library, any further help / suggestions on the above would be appreciated.

codydaig commented 1 month ago

I had this same issue. I had to run pdfjs-dist@v3 even though the only thing in package-lock.json requiring and setting the version was react-pdf and that was marked correctly, npm was not installing the correct version. This happened to me after the dependabot alert and change. Once I manually installed v3 manually it worked correctly.

Jimbob001 commented 1 month ago

@codydaig literally yarn add pdfjs-dist@v3, or yarn add pdfjs-dist@v3.11.174 or yarn add pdfjs-dist@^v3.11.174?

Either way... don't think it's working for me... :/

Can you explain the dependabot alert and change? Haven't heard of it and might be something I can look into.

codydaig commented 1 month ago

@Jimbob001 Not sure about yarn. I'm not using yarn for this project, just npm. After the last few days, I haven't seen an error come through in over 100,000 pdf loads. npm i pdfjs-dist@v3 is all that I did in the end to get it working. Something is funky with the dependency tree though so yarn might have a slightly different interpretation and produces a slightly different result.

Here's the link to the dependabot security advisory. It bumped the react-pdf version from 6 to 7 for me and that's where all my issues started. https://github.com/advisories/GHSA-87hq-q4gp-9wr4

Jimbob001 commented 1 month ago

@codydaig OK, so you've installed v3.0.0 I think, which is different from what's mean to be used by this library... odd.

I've added pdfjs-dist@v3.11.174 to my package, removing node_modules and refreshing yarn's cache, then I'll do another deployment and see what the result is.

If that doesn't work, I guess I'll upgrade to V9 and see where that takes me...

codydaig commented 1 month ago

@Jimbob001 Good luck. To clarify one piece, I've installed version 3.11.174

wojtekmaj / react-pdf