react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

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

Open nicolasiscoding opened this issue 2 years ago • 21 comments

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

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.

https://github.com/wojtekmaj/react-pdf/issues/651

image image

image

image

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 avatar Oct 08 '22 23:10 nicolasiscoding

And this appears to extend this: https://github.com/mozilla/pdf.js/issues/11595

nicolasiscoding avatar Oct 08 '22 23:10 nicolasiscoding

It might related to this issue: https://github.com/wojtekmaj/react-pdf/issues/729#issuecomment-1306661079

catmans1 avatar Nov 08 '22 05:11 catmans1

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[bot] avatar Feb 13 '23 00:02 github-actions[bot]

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

github-actions[bot] avatar Mar 06 '23 00:03 github-actions[bot]

Bump?

nicolasiscoding avatar May 02 '23 04:05 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)?

nicolasiscoding avatar May 02 '23 12:05 nicolasiscoding

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.

wojtekmaj avatar May 02 '23 13:05 wojtekmaj

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

nicolasiscoding avatar May 02 '23 13:05 nicolasiscoding

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

IvanGerasin avatar May 05 '23 11:05 IvanGerasin

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

VigneshSonaiya avatar Aug 07 '23 09:08 VigneshSonaiya

Hi! I'm getting the same error here on version 7.3.3. Any workaround?

OrlandoHurtadoBMC avatar Aug 15 '23 21:08 OrlandoHurtadoBMC

same issue with 7.3.3 too, is it possible to fixed this issue?

jiangxiaoqiang avatar Aug 23 '23 07:08 jiangxiaoqiang

I'd love to hear and answer to this one too.

monscamus avatar Sep 11 '23 15:09 monscamus

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).

jiangxiaoqiang avatar Sep 22 '23 03:09 jiangxiaoqiang

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

codewizard-dt avatar Sep 27 '23 20:09 codewizard-dt

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.

mauudev avatar Dec 12 '23 23:12 mauudev

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

riancintiyo avatar Mar 04 '24 07:03 riancintiyo

@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: Screenshot 2024-06-21 at 12 20 54 PM

AlfredMadere avatar Jun 21 '24 16:06 AlfredMadere

In case someone is looking for a workaround, https://github.com/mozilla/pdf.js/issues/11595#issuecomment-1642482264

CyberAndrii avatar Aug 21 '24 21:08 CyberAndrii

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

nicolasiscoding avatar Aug 21 '24 23:08 nicolasiscoding

It needs to be added here

https://github.com/wojtekmaj/react-pdf/blob/5f29bfb9a952c64c9288e14506a88552772ac3cc/packages/react-pdf/src/Document.tsx#L537

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

CyberAndrii avatar Aug 21 '24 23:08 CyberAndrii