Error handling - PDFJS worker termination while loading and unmounting component.

[nicolasiscoding]

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

Sorry for the bump but is there any known solutions to this? This is referenced in this closed issue but seems as if the issue is stale and have a newer build then what is referenced here. It does not appear to be caught in the onLoadError.

#651

Steps to reproduce

1. Throttle Network speed in browser
2. Load a PDF
3. Navigate to another page prior to the PDF completing forcing the component to unmount
4. Get error in console

Expected behavior

Graceful error handling or the ability to do a try catch, or an abort controller equivalent.

Actual behavior

React is not happy

Additional information

I happen to be using Gatsby, but this should persist even in vanilla React environments

Environment

• Browser (if applicable): Chrome Version 106.0.5249.103
• React-PDF version: 5.7.2
• React version: 16.14.0
• Webpack version (if applicable): 5.74.0

[nicolasiscoding]

And this appears to extend this: mozilla/pdf.js#11595

[catmans1]

It might related to this issue: #729 (comment)

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.

[nicolasiscoding]

Bump?

[nicolasiscoding]

@wojtekmaj it seems that even if you use the onLoadError prop, pdf.js itself is still firing a error that propagates up. I can make a PR that suppresses these warnings using techniques discussed in the Mozilla thread. Is this something you think could get merged in (assuming good quality)?

[wojtekmaj]

Sounds fair! Especially since I was to believe that we are already suppressing these errors :D

Just please be aware that on main, currently, we have a completely new version so this fix would land in 7.x.

[nicolasiscoding]

@wojtekmaj that's a good point. Let me verify the version when I'm back in front of this and report findings.

[IvanGerasin]

Got in the same issue. It appeared in unit tests (jest+RTL) after migrating from nodeJS v14 to nodeJS v16.
react-pdf: 5.7.2

[VigneshSonaiya]

HI @wojtekmaj , Still getting the same issue on version 7.3.3

[jiangxiaoqiang]

try to use the same version in whole project, I am using the different version pdf pdfjs seems trigger the issue(fisrt install pdfjs then install react-pdf but the react-pdf use old version of pdfjs).

[codewizard-dt]

This is still a real issue :( There is no way that I have found to NOT log this error. Very annoying.

[mauudev]

Hi, just passing by and dropping a potential solution. We need to import the worker by this way (specified in docs):

import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url,
).toString();

Worked for me, hope it helps.

[riancintiyo]

@mauudev Thanks for dropping the code. It's indeed worked for me too. 🍻

[AlfredMadere]

@mauudev I don't think this is really a fix, i have confirmed that when you set the workerSrc using either method you get the error. I'm still getting this exact issue on v9.

Both of the following result in an AbortException when the component unmounts while loading. I can reliably reproduce this issue by throttling in dev tools.

The following two methods of loading the workerSrc both result in errors
1.

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`

pdfjs.GlobalWorkerOptions.workerSrc = `/static/js/pdf.worker-${pdfjs.version}.mjs`

The resulting error:

[CyberAndrii]

In case someone is looking for a workaround, mozilla/pdf.js#11595 (comment)

[nicolasiscoding]

@CyberAndrii in the context of react, should this be added to a useEffect unmount?

[CyberAndrii]

It needs to be added here

react-pdf/packages/react-pdf/src/Document.tsx

Line 537 in 5f29bfb

loadingTask.destroy();

But because it's not fixed in this package yet, we use patch-package to apply the fix.