Browser freezes when rendering this pdf

[JoyBoy-369]

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

Description
The browser freezes when rendering this pdf. It's small in size while there are other pdf's that are way bigger in size that renders smoothly.

Steps to reproduce

Steps to reproduce the behavior:
pdf

Expected behavior

What you expected to happen?

Smooth rendering of the pdf.

Additional information

If applicable, add screenshots (preferably with browser console open) and files you have an issue with to help explain your problem.

Environment

• Browser (if applicable) [e.g. Chrome 57, Firefox 59]: Version 69.0.3497.100 (Official Build) (64-bit)
• React-PDF version [e.g. 3.0.4]: 3.0.5
• React version [e.g. 16.3.0]: 16.5.2
• Webpack version (if applicable) [e.g. 4.16.2]: 4.19.1

[HughSunny]

I had the same problem! Have a solution?

[wojtekmaj]

Checked in our test suite and everything seems to be in order. Check the same page if it's working for you.

If the rendering is smooth on the test suite, there might be something wrong with your implementation, e.g. you're not using worker.

[JoyBoy-369]

@wojtekmaj I'm using CRA 2 and I followed your CRA setup.

import { pdfjs, Document, Page } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.worker.js`;

The rest of the code is your example code with navigation. When i navigate there is a noticeable delay (only when i press the previous button). Even in the test suite.

Also, when i pass height prop, it doesn't get rendered completely.
I get the error below which I'm guessing is something to do with the font.

Uncaught Error: Requesting object that isn't resolved yet Times_path_ at PDFObjects_get [as get] (pdf.js:8838) at FontFaceObject_getPathGenerator [as getPathGenerator] (pdf.js:9698) at CanvasGraphics.paintChar (pdf.js:10842) at CanvasGraphics_showText [as showText] (pdf.js:10990) at CanvasGraphics_executeOperatorList [as executeOperatorList] (pdf.js:10392) at InternalRenderTask__next [as _next] (pdf.js:8991)

What gets rendered are just the boxes as shown below.

[wojtekmaj]

Regarding "Uncaught Error: Requesting object that isn't resolved yet" - this is being logged under #275 and mozilla/pdf.js#4244.

Have you checked if the PDF renders any faster in our test suite? If it's equally slow, then there's nothing we can do.

[wojtekmaj]

I'm closing this issue to give other issues more visibility. If you still need assistance with this matter, please do not hesitate to reply and I'll reopen.

Happy coding!

[wojtekmaj]

@tanmay-cs13 That's not React-PDF, that's diegomura's react-pdf/renderer I believe.

[Siddhartha-chaki]

Checked in our test suite and everything seems to be in order. Check the same page if it's working for you.

If the rendering is smooth on the test suite, there might be something wrong with your implementation, e.g. you're not using worker.

Sir can you provide this test-suite source code, I also stuck in rendering big file in my case I want to show PDF from long base64 encoded string I got error as

"./src/App.js
RangeError: Maximum call stack size exceeded
Occurred while linting F:\pdfrender1\src\App.js:8
    at String.match (<anonymous>)
    at Array.forEach (<anonymous>)
    at Array.forEach (<anonymous>)
    at Array.map (<anonymous>) "
"0: Module build failed (from ./node_modules/eslint-loader/index.js):
RangeError: Maximum call stack size exceeded
Occurred while linting F:\fossee\tests\pdfrender1\src\App.js:8
    at String.match (<anonymous>)
    at Literal (F:\fossee\tests\pdfrender1\node_modules\eslint\lib\rules\no-octal-escape.js:35:40)
    at listeners.(anonymous function).forEach.listener (F:\fossee\tests\pdfrender1\node_modules\eslint\lib\util\safe-emitter.js:45:58)
    at Array.forEach (<anonymous>)
    at Object.emit (F:\fossee\tests\pdfrender1\node_modules\eslint\lib\util\safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (F:\fossee\tests\pdfrender1\node_modules\eslint\lib\util\node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (F:\fossee\tests\pdfrender1\node_modules\eslint\lib\util\node-event-generator.js:280:22)
    at NodeEventGenerator.enterNode (F:\fossee\tests\pdfrender1\node_modules\eslint\lib\util\node-event-generator.js:294:14)
    at CodePathAnalyzer.enterNode (F:\fossee\tests\pdfrender1\node_modules\eslint\lib\code-path-analysis\code-path-analyzer.js:632:23)
    at nodeQueue.forEach.traversalInfo (F:\fossee\tests\pdfrender1\node_modules\eslint\lib\linter.js:752:32)
    at Array.forEach (<anonymous>)
    at runRules (F:\fossee\tests\pdfrender1\node_modules\eslint\lib\linter.js:747:15)
    at Linter._verifyWithoutProcessors (F:\fossee\tests\pdfrender1\node_modules\eslint\lib\linter.js:899:31)
    at preprocess.map.textBlock (F:\fossee\tests\pdfrender1\node_modules\eslint\lib\linter.js:955:35)
    at Array.map (<anonymous>)
    at Linter.verify (F:\fossee\tests\pdfrender1\node_modules\eslint\lib\linter.js:954:42)"

code

import React, { Component } from 'react';
//import { Document } from 'react-pdf/dist/entry.webpack';
import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

class PDFViewer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            numPages: null,
            pageNumber: 3,
        };
    }

    onDocumentLoad = ({ numPages }) => {
        console.log("test1");
        this.setState({ numPages });
    }
    goToPrevPage = () =>
        this.setState(state => ({ pageNumber: state.pageNumber - 1 }));
    goToNextPage = () =>
        this.setState(state => ({ pageNumber: state.pageNumber + 1 }));
    onclick = () => {
        console.log(this.props.src);
    }
    render() {
        return (
            <div>
                <nav>
                    <button onClick={this.goToPrevPage}>Prev</button>
                    <button onClick={this.goToNextPage}>Next</button>
                </nav>
                <Document
                    file={this.props.src}
                    onLoadSuccess={this.onDocumentLoad}
                >
                    <Page pageNumber={this.state.pageNumber} onLoadError={e => { console.log(e) }} />
                </Document>
                <p>Page {this.state.pageNumber} of {this.state.numPages}</p>
                <button onClick={this.onclick}>click me</button>
            </div>);
    }
}

export default PDFViewer;

<PDFViewer src="data:application/pdf;base64,JVBERi0xLjcKJbe+raoKMSAwI.................."/>

The base64 encoded string size 11.2 MB, length 11783021

please help

[wojtekmaj]

Test suite source code is here in the repository: https://github.com/wojtekmaj/react-pdf/tree/master/test

[Siddhartha-chaki]

sir, what cause the error "RangeError: Maximum call stack size exceeded" while render PDF from base64 string. I fellow the test suit code which works find in case of pdf- < 5MBs 20 to 30 pages.
My main task is to show PDF from row base64 string data it can be of any size (100KBs to 50MBs ) with faster rendering time.

[wojtekmaj]

I'd need to see the call stack of this error message you're facing to be able to tell you more.

[tonsquemike]

I have the same problem while rendering a 272pages PDF file. My react App freezes on rendering and after 5 minutes the App unfreezes. Is thera a way to use a Promise in order to wait at the rendering finishes of PDFDownloadLink?

[wojtekmaj]

Are you rendering the whole PDF at once? Because this sounds like you're trying to do exactly that, which can be a bad idea on an army of Apple M1s.

[michaelwschultz]

I have an issue with a single 3 page PDF rendering slowly on page change. @wojtekmaj thanks for the note about the test-suite. Didn't realize that was a thing. Through it, I discovered that the text-layer was the issue for me. Turning that off made things instant! Guess this PDF has some wild stuff going on under the hood. Hope that helps @tonsquemike, @SevenSinS02.