PDF of 2.6k page takes more than one hour to generate



  • Re: Performance Rendering of report issue with 18-20k rows of data.
    0_1654169484731_upload-f366ed3d-736f-48aa-a435-26c6db2f6ee7
    it took around 1 hour for 18k objects .

    Main template code ---
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>SAMPLE CIOMS II Case List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <style>{{asset "./styles/main.css"}}</style>
    </head>
    <body>

    {{childTemplate (getTOCTemplate)}}
    <section style="page-break-before: always;"></section>
      <section id="CIOMS-II" class="padding-05">
      {{{pdfCreatePagesGroup pageName="CIOMS-II" reportTitle=reportTitle }}}
      {{{pdfAddPageItem caseListFirstPage=true}}}
      {{component "./components/reportCriteria"}}
      <section style="page-break-before: always;"></section>
      {{component "./components/caseListView"}}
      </section>
    

    </body>

    --- Component code---
    <section id="{{getPageNameSectionName reportId "case-list-view"}}">
    {{{pdfAddPageItem id=(getPageNameSectionName reportId "case-list-view")}}}
    <table class="case-list width-100 table-stripe" >
    <thead class="case-list-header">
    {{#each (getCaselistHeader)}}
    <th class="case-list-header">{{this}}</th>
    {{/each}}
    </thead>
    <tbody class="width-100">
    {{#each caseList}}
    <tr class="case-list-tr">
    <td>
    <p>{{caseNumber}}</p>
    <p>{{studyId}}</p>
    {{#if text}}
    <label>Narrative: </label>
    <p>{{text}}</p>
    {{/if}}
    </td>
    <td>
    <p>{{country}}</p>
    <p>{{source}}</p>
    </td>
    <td>
    <p>{{age}}</p>
    <p>{{gender}}</p>
    <p>{{patientId}}</p>
    </td>
    <td>
    <p>{{suspectProd}}</p>
    <p>{{route}}</p>
    </td>
    <td>
    <p>{{dose}}</p>
    </td>
    <td>
    <p>{{dateOfTreatment}}</p>
    </td>
    <td>
    <p>{{tto}}</p>
    </td>
    {{!-- TODO add the value when known --}}
    <td>
    <p>-</p>
    </td>
    <td>
    <p>{{outcome}}</p>
    </td>
    </tr>
    {{/each}}
    </tbody>
    </table>
    <table class="width-100">
    <tr class="width-100">
    <td class="text-bold">Total Number of Cases</td>
    <td class="text-end text-bold">{{caseList.length}}</td>
    </tr>
    </table>
    </section>

    caseList - Array of 18k objects.

    Any idea how can i increase performance and make it generate in 5-10 mins?

    my jsconfig looks like this below
    {
    "workers": {
    "numberOfWorkers": "5"
    },
    "trustUserCode": true,
    "store": {
    "provider": "fs"
    },
    "blobStorage": {
    "provider": "aws-s3-storage"
    },
    "reportTimeout": 3600000,
    "templatingEngines": {
    "timeout": 3600000,
    "strategy": "dedicated-process"
    },
    "express": {
    "inputRequestLimit": "1024mb"
    },
    "chrome": {
    "timeout": 3600000,
    "strategy":"dedicated-process",
    "numberOfWorkers":"5"
    },
    "extensions": {
    "fs-store": {
    "dataDirectory": "data",
    "externalModificationsSync": true
    },
    "scripts": {
    "timeout": 3600000
    },
    "express": {
    "renderTimeout": 3600000
    },
    "aws-s3-storage": {
    "accessKeyId": "AKIA47ETWGM2OFFA5T6A",
    "secretAccessKey": "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",
    "bucket": "safety-bucket-local-02"
    },
    "studio": {
    "title": "ConvergeHEALTH Safety",
    "theme": {
    "variables": {
    "toolbar-backgroundColor": "#1480AF",
    "entityTree-node-hover-backgroundColor": "#5CA8C5",
    "tab-title-hover-backgroundColor": "#5CA8C5",
    "entityTree-node-active-backgroundColor": "#5CA8C5",
    "tab-title-active-backgroundColor": "#5CA8C5",
    "entityIcon-color": "#1480AF",
    "toolbar-target-backgroundColor": "#1480AF",
    "toolbar-button-hover-backgroundColor": "#5CA8C5"
    },
    "logo": {
    "type": "object",
    "base64": {
    "type": "png",
    "content": "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"
    }
    }
    }
    }
    }
    }



  • It depends on what is the bottleneck. In some cases, it is problem with the images described here https://jsreport.net/learn/chrome-pdf#images-increasing-pdf-size but it can be anything. Could you run with the full profile enabled and upload the profile somewhere and share the link? https://jsreport.net/learn/studio





  • That is just the standard profile without data. The full profile would give me more insights
    0_1654186478818_upload-53baddcd-8b09-4cd9-bd9d-0416e9838f33

    I can see the rendering mostly does the chrome pdf conversion which is something we can't optimize. It could be the problem with the images I mentioned earlier. If that doesn't help, the only technique to find out how to optimize the chrome rendering is to remove styles step by step to see what costs the most. Also long tables are typically problematic for chrome to render and better to avoid them and use divs if possible.



  • 2022-06-03T05:27:26.630Z - error: Error when processing render request 46 Maximum call stack size exceeded RangeError: Maximum call stack size exceeded
    at createPatch (/app/node_modules/@jsreport/jsreport-core/lib/worker/render/diff.js:76:16)
    at Profiler.emit (/app/node_modules/@jsreport/jsreport-core/lib/worker/render/profiler.js:87:24)

    Getting this error on running full profile with 18k data



  • Upon trying with 1k data Full profile doesnt throw any error.

    // Jan Blaha: I deleted the link to avoid leaking the data somewhere, but I have it.



  • Is there a way where we can create sub report chunks of components and merge them ?



  • Thank you for the profile. I see you render basically very long HTML table.
    Unfortunately, browsers have had poor performance on long tables since I was a kid.
    Perhaps you could try to avoid using tables and replace cells with divs if it helps to improve performance?
    Otherwise, I'm afraid I can't help. Maybe a more CPU-oriented VM, but I think it won't help much.

    Is there a way where we can create sub report chunks of components and merge them ?

    I believe you asks for some parallelization? You can split the data and use pdf utils in the script to concat the results.
    Here is an example and docs
    https://playground.jsreport.net/w/admin/UpVVJcAk
    https://jsreport.net/learn/pdf-utils
    However, this partially breaks the TOC because the links won't be clickable.
    https://github.com/jsreport/jsreport/issues/771

    However, we experienced with such data splitting and parallel chrome render and it turned out it wasn't improving the performance. The chrome should already use multiple processors and the costs for splitting,appending and managing chrome instances was wasting the gains from the parallelization.



  • I have resolved the long table css issue by removing the border collapse. Also, when we tested with 30k or 50k data we are getting js core page request closed error. Could you please help?



  • Nice! Thank you for sharing!

    js core page request closed error.

    Could you share the whole error? I'm not sure where it comes from.



  • Protocol error: Connection closed. Most likely the page has been closed.
    Error: Protocol error: Connection closed. Most likely the page has been closed.
    at assert (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/assert.js:26:15)
    at Page.close (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:2115:32)



  • Could you run the template with the HTML recipe and email me the output?
    I would try to replicate the problem on my machine.





  • I have sent an email with shashank16aug19@gmail.com with data json as well.



  • How long does it take to get that error?

    For me, it seems it just endlessly runs...
    As I noted, the chrome has problems with long tables and there is nothing we can do about it. There is a bug tracked for it, however I tried a later chrome and it doesn't seems to improve. The 80mb HTML is likely an edge case.
    You can try to replace the table with divs if its possible.



  • Can we do lazy loading instead of one long iteration?



  • Not sure what you mean, but we have no influence on how chrome is converting HTML to pdf.


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.