Possible memory leak WebViewer v11.10.0

Technical Support WebViewer
, ,
1

WebViewer Version: 11.10.0

Do you have an issue with a specific file(s)?
No, happens with any PDF file.

Can you reproduce using one of our samples or online demos?
I haven’t tested with the online demos yet, but reproduces consistently in my React app.

Are you using the WebViewer server?
No.

Does the issue only happen on certain browsers?
Tested on Chrome, confirmed issue there.

Is your issue related to a front-end framework?
Yes, I’m using React 17 with TypeScript.

Is your issue related to annotations?
No, just loading and closing PDFs repeatedly.

Please give a brief summary of your issue:
memory leak: around 20-25mb per PDF open never released.

Please describe your issue and provide steps to reproduce it:

I initialize WebViewer.Iframe once on component mount and the component unmounts/remounts each time a different PDF is opened. Each PDF open creates a new WebViewer instance with cleanup function, but memory heap grows by 20-25 mb when I open and never decreases even after I force garbage collection.

Steps to reproduce:

  1. Open PDF 1: heap = 70MB
  2. Close PDF (component unmounts, cleanup runs successfully)
  3. Open PDF 2 : heap = 95MB (+25MB)
  4. Close PDF (cleanup runs successfully)
  5. Open PDF 3: heap = 118MB (+23MB)
  6. Force garbage collection: heap stays at 118MB (no decrease, not returning to a normal baseline)
  7. If I continue : 141MB => 157MB => 175MB…

Network tab observation:
Every single PDF open triggers downloads:

  • PDFNetC.wasm.br.wasm (around 2,734 kB)
  • pdfnet.res (around 1,765 kB)
  • webviewer-core.min.js
  • webviewer-ui.min.js
  • fonts, etc.

My implementation:

Component mounts/unmounts per PDF. I added this cleanup to see if it solved the memory leaks, but it didn’t:

useEffect(() => {
    let instance: WebViewerInstance | null = null;

    WebViewer.Iframe({
        path: "/webviewer/lib/", // it is coming from a s3 bucket
        licenseKey: "...",
    }, viewerRef.current).then((inst) => {
        ...
        instance = inst;
        setPDFTron(inst);
    });

     return () => {
            if (instance) {
                try {
                    const { UI, Core } = instance;

                    const documentViewer = Core.documentViewer;
                    if (documentViewer) {
                        documentViewer.closeDocument();
                    }

                    UI.dispose();

                } catch (error) {
                    console.error("Error disposing PDFTron:", error);
                } finally {
                    instance = null;
                }
            }

            if (documentRef.current) {
                documentRef.current = null;
            }

            setPDFTron(null);

            if (viewerRef.current) {
                viewerRef.current.innerHTML = '';
            }
        };
}, []);

Here I kept opening and closing a the same pdf repeatedly. The heap size keeps growing over time.

image
image1914×390 78.4 KB

Cleanup function is confirmed working via logs, but memory is never released for some reason. Is there additional cleanup needed other than closeDocument() and UI.dispose()? Are there known memory leak issues in version 11.10.0 with this mount/unmount pattern? I upgraded to version 11.10.0 but it didn’t solve the problem.

3

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.



It seems that you are experiencing a memory leak issue when repeatedly opening and closing PDFs in a React application using Apryse’s WebViewer. This issue may be related to the lifecycle of the WebViewer instance and the way resources are managed in your application.

Some things you can try:

  • Ensure that you are using the PDFNet.runWithCleanup() method to initialize your application. This will help manage memory and resources more effectively.

  • Verify that all resources are properly disposed of by checking for any lingering references to WebViewer instances, documents, or UI elements.

  • Consider reusing a single WebViewer instance rather than creating a new one each time a PDF is opened. This can help reduce the memory overhead associated with multiple instances.

  • Review your use of React’s useEffect and ensure that dependencies are correctly managed to prevent unnecessary re-renders or resource allocations.

  • Test the behavior using a minimal example or one of Apryse’s online demos to verify if the issue persists outside your specific application setup.




Here are some resources that might help you:



Hopefully, this helps you solve your problem while you wait for a human to get back to you.

4

Hello Rafael,

Thank you for contacting WebViewer Forums.

Our development team is aware of smaller memory leaks in our latest version and is consistently working to reduce the impact. If you can provide more details, that will help with our investigation.

  1. Are you seeing a memory leak in both Iframe and WebComponent?
  2. Is there a specific workflow in which the same instance is reused or files are opened repeatedly?

Your cleanup approach is correct - though I recommend adding the following unmount function:

await instance.UI.dispose()
await instance.Core.documentViewer.unmount()

Regards,
Luke

5

Hello, I was reviewing the way the PDF viewer was implemented in my project and I came across a problem that was causing the memory leak. It’s actually nothing related to the WebViewer.
There was a state holding the instance that was surviving clean up and preventing garbage collector from freeing memory. I replaced it with useRef and that fixed the problem.

Thank you!