3. jsreportonline - chrome pdf generation timed out

jsreportonline - chrome pdf generation timed out

  • F

    Hello, I'm getting the error "chrome pdf generation timed out" on an report hosted at jsreportonline when running from the web interface (studio).

    I've searched the forums and only found answers for self-hosted servers.

    When I pull a subset of the data, the report does not time out.

    I don't think that the time it takes my api to respond is included in the pdf generation time, but it takes between 2 and 5 seconds and returns 558kb of data.

    Here's the relevant part of the log:

    Executing recipe chrome-pdf
debug
+23
Converting with chrome HeadlessChrome/114.0.5735.90 using chrome-pool strategy
debug
+27
Page request: GET (document) file:///tmp/jsreport/autocleanup/8036d1bd-f1b1-49fd-8f5c-1f00db2e195e-chrome-pdf.html
debug
+40
Page request finished: GET (document) 200 file:///tmp/jsreport/autocleanup/8036d1bd-f1b1-49fd-8f5c-1f00db2e195e-chrome-pdf.html
debug
+488
Running chrome with params {"printBackground":true,"viewportHeight":null,"width":"","marginTop":"2cm","marginRight":"1cm","marginBottom":"1cm","marginLeft":"1cm","timeout":52486,"margin":{"top":"2cm","right":"1cm","bottom":"1cm","left":"1cm"}}
info
+51932
Credits spent in request: 59.98, the credits weren't charged because this was preview request from jsreport studio
warn
+11
Error when processing render request 86303
(because) chrome pdf generation timed out
Error: chrome pdf generation timed out
    at module.exports (/app/node_modules/@jsreport/jsreport-core/lib/shared/createError.js:10:13)
    at WorkerReporter.createError (/app/node_modules/@jsreport/jsreport-core/lib/shared/reporter.js:49:12)
    at Timeout.<anonymous> (/app/node_modules/@jsreport/jsreport-chrome-pdf/lib/conversion.js:423:30)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7)
warn
+0
Rendering request 86303 finished with error in 60013 ms

    Here is the html template for the report:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Summary Report</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .org-header,
        .campaign-header {
            background: #f0f0f0;
            padding: 10px;
            margin-bottom: 20px;
        }

        .org-header {
            border-bottom: 3pt solid #000;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .card {
            border: 1px solid #ccc;
            padding: 10px;
            flex: 1 1 18%;
            margin: 5px;
            box-sizing: border-box;
        }

        .card hr {
            margin: 10px 0;
        }

        .card-title {
            font-size: 14px;
            font-weight: bold;
        }

        .total-amount {
            font-size: 20px;
        }

        .details {
            font-size: 8px;
        }

        .no-campaigns,
        .totals-header {
            font-size: 14px;
            color: red;
        }

        .prevent-page-break {
            page-break-inside: avoid;
        }

        .page-break {
            page-break-after: always;
        }
    </style>
</head>

<body>
    <h1>Admin Summary Report</h1>
    {{#each reportData.organizations}}
    <div class="page-break">
        <div class="org-header">
            <h2>{{name}}</h2>
            <p>Phone: {{phoneNumber}}</p>
            <p>Address: {{mailingAddress1}}, {{mailingCity}}, {{mailingState}} {{mailingZip}}</p>
            <p>Sales Rep: {{salesRep}}</p>
        </div>
        {{#if campaigns.length}} {{#each campaigns}}
        <div class="prevent-page-break">
            <div class="campaign-header">
                <h3>{{../name}} Campaign: {{prettyDate startDate}} - {{prettyDate endDate}} ({{status}})</h3>
            </div>
            <div class="row">
                <div class="card">
                    <div class="card-title">Packages Sold</div>
                    <hr>
                    <div class="total-amount">{{packagesSold}}</div>
                </div>
                <div class="card">
                    <div class="card-title">Total Sales</div>
                    <hr>
                    <div class="total-amount">{{formatCurrency totalSales}}</div>
                    <div class="details">
                        <div>Includes tips of: {{formatCurrency includesTipOf}}</div>
                        <div>Convenience fees: {{formatCurrency convenienceFee}}</div>
                        <div>Sales: {{formatCurrency sales}}</div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">Funds Collected</div>
                    <hr>
                    <div class="total-amount">{{formatCurrency fundsCollected}}</div>
                    <div class="details">
                        <div>Credit Card: {{formatCurrency creditCard}}</div>
                        <div>Cash & Check: {{formatCurrency cashAndCheck}}</div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">Balance Due From Students</div>
                    <hr>
                    <!-- Placeholder for calculated amount -->
                    <div class="total-amount">{{formatCurrency balanceDueFromStudents}}</div>
                </div>
                <div class="card">
                    <div class="card-title">Product Gross Profit</div>
                    <hr>
                    <div class="total-amount">{{formatCurrency productGrossProfit}}</div>
                </div>
                <div class="card">
                    <div class="card-title">Gross Donations</div>
                    <hr>
                    <div class="total-amount">{{formatCurrency grossDonations}}</div>
                </div>
                <div class="card">
                    <div class="card-title">Net Donations</div>
                    <hr>
                    <!-- Placeholder for calculated amount -->
                    <div class="total-amount">{{formatCurrency netDonations}}</div>
                </div>
                <div class="card">
                    <div class="card-title">Credit Card Fees</div>
                    <hr>
                    <div class="total-amount">{{formatCurrency creditCardFees}}</div>
                </div>
                <div class="card">
                    <div class="card-title">Credit Due From FCFR</div>
                    <hr>
                    <!-- Placeholder for calculated amount -->
                    <div class="total-amount">{{formatCurrency creditDueFromFCFR}}</div>
                </div>
                <div class="card">
                    <div class="card-title">Total Gross Profit</div>
                    <hr>
                    <div class="total-amount">{{formatCurrency totalGrossProfit}}</div>
                </div>
            </div>
        </div>
        {{/each}} {{else}}
        <p class="no-campaigns">No campaigns available for this organization.</p>
        {{/if}} {{#with orgTotals}}
        <div class=" prevent-page-break">
        <div class="totals-header">
            <h3>Organization Totals - {{../name}}</h3>
        </div>
        <div class="row">
            <div class="card">
                <div class="card-title">Packages Sold</div>
                <hr>
                <div class="total-amount">{{packagesSold}}</div>
            </div>
            <div class="card">
                <div class="card-title">Total Sales</div>
                <hr>
                <div class="total-amount">{{formatCurrency totalSales}}</div>
                <div class="details">
                    <div>Includes tips of: {{formatCurrency includesTipOf}}</div>
                    <div>Convenience fees: {{formatCurrency convenienceFee}}</div>
                    <div>Sales: {{formatCurrency sales}}</div>
                </div>
            </div>
            <div class="card">
                <div class="card-title">Funds Collected</div>
                <hr>
                <div class="total-amount">{{formatCurrency fundsCollected}}</div>
                <div class="details">
                    <div>Credit Card: {{formatCurrency creditCard}}</div>
                    <div>Cash & Check: {{formatCurrency cashAndCheck}}</div>
                </div>
            </div>
            <div class="card">
                <div class="card-title">Balance Due From Students</div>
                <hr>
                <!-- Placeholder for calculated amount -->
                <div class="total-amount">{{formatCurrency balanceDueFromStudents}}</div>
            </div>
            <div class="card">
                <div class="card-title">Product Gross Profit</div>
                <hr>
                <div class="total-amount">{{formatCurrency productGrossProfit}}</div>
            </div>
            <div class="card">
                <div class="card-title">Gross Donations</div>
                <hr>
                <div class="total-amount">{{formatCurrency grossDonations}}</div>
            </div>
            <div class="card">
                <div class="card-title">Net Donations</div>
                <hr>
                <!-- Placeholder for calculated amount -->
                <div class="total-amount">{{formatCurrency netDonations}}</div>
            </div>
            <div class="card">
                <div class="card-title">Credit Card Fees</div>
                <hr>
                <div class="total-amount">{{formatCurrency creditCardFees}}</div>
            </div>
            <div class="card">
                <div class="card-title">Credit Due From FCFR</div>
                <hr>
                <!-- Placeholder for calculated amount -->
                <div class="total-amount">{{formatCurrency creditDueFromFCFR}}</div>
            </div>
            <div class="card">
                <div class="card-title">Total Gross Profit</div>
                <hr>
                <div class="total-amount">{{formatCurrency totalGrossProfit}}</div>
            </div>
        </div>
        </div>
        {{/with}}
    </div>
    {{/each}} {{#with reportData.grandTotals}}
    <div class="totals-header">
        <h2>Grand Totals</h2>
    </div>
    <div class="row prevent-page-break">
        <div class="card">
            <div class="card-title">Packages Sold</div>
            <hr>
            <div class="total-amount">{{packagesSold}}</div>
        </div>
        <div class="card">
            <div class="card-title">Total Sales</div>
            <hr>
            <div class="total-amount">{{formatCurrency totalSales}}</div>
            <div class="details">
                <div>Includes tips of: {{formatCurrency includesTipOf}}</div>
                <div>Convenience fees: {{formatCurrency convenienceFee}}</div>
                <div>Sales: {{formatCurrency sales}}</div>
            </div>
        </div>
        <div class="card">
            <div class="card-title">Funds Collected</div>
            <hr>
            <div class="total-amount">{{formatCurrency fundsCollected}}</div>
            <div class="details">
                <div>Credit Card: {{formatCurrency creditCard}}</div>
                <div>Cash & Check: {{formatCurrency cashAndCheck}}</div>
            </div>
        </div>
        <div class="card">
            <div class="card-title">Balance Due From Students</div>
            <hr>
            <!-- Placeholder for calculated amount -->
            <div class="total-amount">{{formatCurrency balanceDueFromStudents}}</div>
        </div>
        <div class="card">
            <div class="card-title">Product Gross Profit</div>
            <hr>
            <div class="total-amount">{{formatCurrency productGrossProfit}}</div>
        </div>
        <div class="card">
            <div class="card-title">Gross Donations</div>
            <hr>
            <div class="total-amount">{{formatCurrency grossDonations}}</div>
        </div>
        <div class="card">
            <div class="card-title">Net Donations</div>
            <hr>
            <!-- Placeholder for calculated amount -->
            <div class="total-amount">{{formatCurrency netDonations}}</div>
        </div>
        <div class="card">
            <div class="card-title">Credit Card Fees</div>
            <hr>
            <div class="total-amount">{{formatCurrency creditCardFees}}</div>
        </div>
        <div class="card">
            <div class="card-title">Credit Due From FCFR</div>
            <hr>
            <!-- Placeholder for calculated amount -->
            <div class="total-amount">{{formatCurrency creditDueFromFCFR}}</div>
        </div>
        <div class="card">
            <div class="card-title">Total Gross Profit</div>
            <hr>
            <div class="total-amount">{{formatCurrency totalGrossProfit}}</div>
        </div>
    </div>
    {{/with}}

</body>

</html>

    Is there anything that can be done to extend the pdf generation time for this report?

    Thanks!

    0

  • Try to disable aria tag generation with <body aria-hidden="true">... otherwise, I have no recommendation at first glance.
    However, if you email me a data sample confidentially, I will take a look at what could be improved.

    0
  • F

    That helped a lot, thanks! The whole thing is down to about 36 seconds now and I was able to generate the report.

    0
Log in to reply
 

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