Browser stucked and not responding while rendering 5000 table rows in chrome-pdf

[Aravinth3366]

jsreport.config.json :

{
  "httpPort": 3333,
  "store": {
    "provider": "fs"
  },
  "blobStorage": {
    "provider": "fs"
  },
  "logger": {
    "console": {
      "transport": "console",
      "level": "debug"
    }
  },
  "allowLocalFilesAccess": false,
  "reportTimeout": 600000,
  "templatingEngines": {
    "strategy": "http-server"
  },
  "extensions": {
    "authentication": {
      "cookieSession": {},
      "admin": {
        "username": "admin",
        "password": "password"
      },
      "enabled": false
    },
    "scripts": {
      "strategy": "http-server"
    }
  }
}

TEMPLATE:

<style>
{#asset gridTemplate.css @encoding=utf8}
</style>
{{if data}}
	{{if drillDownPfdHearder.length }}
		<ul class="drillHeader p-2 ">
			{{for drillDownPfdHearder}}
				<li><span class="font-Bold">{{:tabLabel}} :</span> {{:tabName}}</li>
			{{/for}}
		</ul>
	{{/if}}
	<div class="d-flex w-100">
		<table style="width: {{:tableWidth}}%" class="table table-bordered">
			<thead>
				{{for columnHeaderslst}}
					<tr >
						{{for : }}
							<th scope="col" style="{{if colspan <= 1}}width: {{:columnWidth}}%{{/if}}" rowspan="{{:rowspan}}" colspan="{{:colspan}}">{{:caption}}</th>
						{{/for}}
					</tr>
			{{/for}}
			</thead>
			<tbody>
				{{for gridDataSet}}
					<tr>
						{{for : }}
							<td class="{{:class}}">{{:value}}</td>
						{{/for}} 
					</tr>
				{{/for}} 
			</tbody>
		</table>			
	</div>
{{else}}
	<div class="d-flex justify-content-center font-18">
		No Records Found
	</div>
{{/if}}

[jan_blaha]

Please elaborate... Does it work with fewer rows?
What does it mean browser hanged, do you invoke the rendering from browser?
Please share the jsreport server logs.

[Aravinth3366]

Yeah it is work with the fewer rows. But more than 5000 rows the browser is stuck and not responding. yes, i invoked the rendering from browser.

log Details:

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation. All rights reserved.

C:\Users\admin>D:

D:>cd jsreport_sample

D:\jsreport_sample>cd JSREPORT_NPM

D:\jsreport_sample\JSREPORT_NPM>jsreport start
2021-03-31T06:34:26.245Z - info: Initializing jsreport@2.11.0 in development mod
e using configuration file: jsreport.config.json
2021-03-31T06:34:26.249Z - info: Searching for available extensions in D:\jsrepo
rt_sample\JSREPORT_NPM
2021-03-31T06:34:26.271Z - info: Extensions location cache contains up to date i
nformation, skipping crawling in D:\jsreport_sample\JSREPORT_NPM
2021-03-31T06:34:26.297Z - info: Found 35 extensions
2021-03-31T06:34:27.025Z - debug: Writing extension locations cache to C:\Users
admin\AppData\Local\Temp\jsreport\core\locations.json
2021-03-31T06:34:27.027Z - debug: Discovered 35 extensions
2021-03-31T06:34:27.119Z - info: Setting http-server strategy for rendering
2021-03-31T06:34:27.377Z - debug: Extension authentication@2.6.1 is disabled, sk
ipping
2021-03-31T06:34:27.378Z - info: Using extension cli@2.2.5
2021-03-31T06:34:27.401Z - info: Using extension debug@2.1.3
2021-03-31T06:34:27.416Z - info: Using extension express@2.8.1
2021-03-31T06:34:27.990Z - info: Using extension freeze@2.0.0
2021-03-31T06:34:27.993Z - info: Using extension handlebars@2.1.0
2021-03-31T06:34:28.002Z - info: Using extension import-export@2.1.1
2021-03-31T06:34:28.213Z - info: Using extension jsrender@2.1.1
2021-03-31T06:34:28.214Z - info: Using extension tags@2.5.0
2021-03-31T06:34:28.218Z - info: Using extension templates@2.4.0
2021-03-31T06:34:28.224Z - info: Using extension authorization@2.4.0
2021-03-31T06:34:28.240Z - debug: Extension authorization@2.4.0 was disabled
2021-03-31T06:34:28.241Z - info: Using extension base@2.0.2
2021-03-31T06:34:28.243Z - info: Using extension browser-client@2.2.2
2021-03-31T06:34:28.255Z - info: Using extension child-templates@1.4.0
2021-03-31T06:34:28.274Z - info: Using extension chrome-pdf@1.10.0
2021-03-31T06:34:28.548Z - debug: Chrome strategy is dedicated-process
2021-03-31T06:34:28.549Z - info: Using extension data@2.4.0
2021-03-31T06:34:28.551Z - info: Using extension docx@2.9.0
2021-03-31T06:34:28.557Z - info: Using extension fs-store@2.9.1
2021-03-31T06:34:29.075Z - info: Using extension licensing@2.2.3
2021-03-31T06:34:29.081Z - info: Using extension pdf-utils@1.10.1
2021-03-31T06:34:29.389Z - info: Using extension pptx@0.7.0
2021-03-31T06:34:29.406Z - info: Using extension reports@2.5.1
2021-03-31T06:34:29.426Z - info: Using extension static-pdf@0.4.0
2021-03-31T06:34:29.443Z - info: Using extension studio@2.10.1
2021-03-31T06:34:29.652Z - debug: studio request logs are enabled (flush interva
l: 2000)
2021-03-31T06:34:29.655Z - info: Using extension text@2.0.0
2021-03-31T06:34:29.660Z - info: Using extension version-control@1.6.0
2021-03-31T06:34:30.003Z - info: Using extension assets@1.7.0
2021-03-31T06:34:30.026Z - info: Using extension html-to-xlsx@2.8.3
2021-03-31T06:34:31.338Z - info: html-to-xlsx detected chrome as available html
engine
2021-03-31T06:34:31.339Z - info: Using extension scheduling@2.5.0
2021-03-31T06:34:31.483Z - info: Using extension scripts@2.6.0
2021-03-31T06:34:31.493Z - info: Using extension studio-theme-dark@0.3.0
2021-03-31T06:34:31.503Z - info: Using extension xlsx@2.5.0
2021-03-31T06:34:32.023Z - info: Using extension public-templates@2.2.0
2021-03-31T06:34:32.025Z - debug: Extension public-templates@2.2.0 was disabled
2021-03-31T06:34:32.025Z - info: Using extension resources@2.1.0
2021-03-31T06:34:32.027Z - info: Using extension sample-template@2.6.1
2021-03-31T06:34:32.036Z - info: Using general timeout for rendering (reportTime
out: 600000)
2021-03-31T06:34:32.036Z - info: Using fs provider for template store.
2021-03-31T06:34:32.045Z - info: fs store is persisting using fs
2021-03-31T06:34:32.047Z - info: fs store is synchronizing using fs
2021-03-31T06:34:32.069Z - info: fs store is loading data
2021-03-31T06:34:32.201Z - debug: fs store sync is configured to use polling for
files watcher
2021-03-31T06:34:32.249Z - info: fs store is initialized successfully
2021-03-31T06:34:32.258Z - debug: studio default theme is: light
2021-03-31T06:34:32.269Z - info: Creating default express app.
2021-03-31T06:34:32.398Z - info: jsreport server successfully started on http po
rt: 3333
2021-03-31T06:34:32.400Z - info: fs store emits sockets to synchronize underlyin
g changes with studio
2021-03-31T06:34:32.469Z - info: Verifying license key free
2021-03-31T06:34:33.578Z - info: Using enterprise trial license
2021-03-31T06:34:33.583Z - debug: Creating samples is disabled
2021-03-31T06:34:33.585Z - info: reporter initialized
2021-03-31T06:34:39.136Z - debug: OData query on templates
2021-03-31T06:34:39.139Z - debug: OData query on folders
2021-03-31T06:34:39.148Z - debug: OData query on tags
2021-03-31T06:34:39.149Z - debug: OData query on data
2021-03-31T06:34:39.155Z - debug: OData query on assets
2021-03-31T06:34:39.164Z - debug: OData query on scripts
2021-03-31T06:34:39.166Z - debug: OData query on xlsxTemplates
2021-03-31T06:34:39.173Z - debug: OData query on schedules
2021-03-31T06:34:39.184Z - debug: OData query on settings
2021-03-31T06:34:39.308Z - debug: OData query on templates
2021-03-31T06:35:21.972Z - info: Starting rendering request 1 (user: null)
2021-03-31T06:35:21.976Z - info: Rendering template { name: gridhtml, recipe: ht
ml-with-browser-client, engine: jsrender, preview: false }
2021-03-31T06:35:21.978Z - debug: Inline data specified.
2021-03-31T06:35:21.979Z - debug: Resources not defined for this template.
2021-03-31T06:35:21.983Z - debug: Base url not specified, skipping its injection
.
2021-03-31T06:35:21.992Z - debug: Replaced assets ["gridTemplate.css"]
2021-03-31T06:35:21.993Z - debug: Rendering engine jsrender using http-server st
rategy
2021-03-31T06:35:23.168Z - debug: Compiled template not found in the cache, comp
iling
2021-03-31T06:35:23.211Z - debug: Executing recipe html-with-browser-client
2021-03-31T06:35:23.248Z - debug: Skipping pdf utils processing because template
is rendered with non-pdf recipe.
2021-03-31T06:35:23.250Z - info: Rendering request 1 finished in 1278 ms
2021-03-31T06:35:23.251Z - debug: Skipping storing report.
2021-03-31T06:36:04.788Z - debug: OData update on templates
2021-03-31T06:36:04.834Z - debug: OData query on templates
2021-03-31T06:36:06.111Z - debug: OData query on templates
2021-03-31T06:36:16.934Z - info: Starting rendering request 2 (user: null)
2021-03-31T06:36:16.958Z - info: Rendering template { name: gridhtml, recipe: ch
rome-pdf, engine: jsrender, preview: false }
2021-03-31T06:36:16.960Z - debug: Inline data specified.
2021-03-31T06:36:16.960Z - debug: Resources not defined for this template.
2021-03-31T06:36:16.986Z - debug: Base url not specified, skipping its injection
.
2021-03-31T06:36:16.991Z - debug: Replaced assets ["gridTemplate.css"]
2021-03-31T06:36:16.992Z - debug: Rendering engine jsrender using http-server st
rategy
2021-03-31T06:36:17.730Z - debug: Taking compiled template from engine cache
2021-03-31T06:36:17.780Z - debug: Executing recipe chrome-pdf
2021-03-31T06:36:18.411Z - debug: Converting with chrome HeadlessChrome/79.0.394
5.0 using dedicated-process strategy
2021-03-31T06:36:19.881Z - debug: Page request: GET (document) file:///C:/Users/
admin/AppData/Local/Temp/jsreport/autocleanup/78b7b8e9-9118-49ad-a201-791c452c69
04-chrome-pdf.html
2021-03-31T06:36:29.972Z - debug: Page request finished: GET (document) file:///
C:/Users/admin/AppData/Local/Temp/jsreport/autocleanup/78b7b8e9-9118-49ad-a201-7
91c452c6904-chrome-pdf.html
2021-03-31T06:36:30.747Z - debug: Running chrome with params {"printBackground":
false,"landscape":false,"pageRanges":"","marginBottom":"2cm","marginTop":"3cm","
displayHeaderFooter":false,"scale":null,"mediaType":"print","format":"","width":
"","height":"","marginRight":"1cm","marginLeft":"1cm","waitForJS":false,"margin"
:{"top":"3cm","right":"1cm","bottom":"2cm","left":"1cm"}}
2021-03-31T06:44:09.977Z - info: pdf-utils is starting pdf processing
2021-03-31T06:44:31.396Z - debug: pdf-utils detected 1 pdf operation(s) to proce
ss
2021-03-31T06:44:31.404Z - debug: pdf-utils running pdf operation merge
2021-03-31T06:44:31.440Z - info: Starting rendering request 3 (user: null)
2021-03-31T06:44:31.443Z - info: Rendering template { name: header-footer, recip
e: chrome-pdf, engine: jsrender, preview: false }
2021-03-31T06:44:31.444Z - debug: Inline data specified.
2021-03-31T06:44:31.444Z - debug: Resources not defined for this template.
2021-03-31T06:44:31.463Z - debug: Base url not specified, skipping its injection
.
2021-03-31T06:44:31.492Z - debug: Replaced assets ["header-footer.css","logo-log
in.png","clientLogo.png"]
2021-03-31T06:44:31.493Z - debug: Rendering engine jsrender using http-server st
rategy
2021-03-31T06:44:50.901Z - debug: Compiled template not found in the cache, comp
iling
2021-03-31T06:44:51.378Z - debug: Executing recipe chrome-pdf
2021-03-31T06:44:56.077Z - debug: Converting with chrome HeadlessChrome/79.0.394
5.0 using dedicated-process strategy
2021-03-31T06:44:58.366Z - debug: Page request: GET (document) file:///C:/Users/
admin/AppData/Local/Temp/jsreport/autocleanup/d63576d2-c1d9-462b-b537-20127e0fbc
dc-chrome-pdf.html
2021-03-31T06:44:58.457Z - debug: Page request: GET (image) data:image/png;base6
4,iVBORw0KGgoAAAANSUhEUgAAAvIAAAEMCAYAAACm61K4AAAABGdBTUEAALGOfPtRkwAAACBjSFJNAA
...
2021-03-31T06:44:58.513Z - debug: Page request finished: GET (image) 200 data:im
age/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvIAAAEMCAYAAACm61K4AAAABGdBTUEAALGOfPtRk
wAAACBjSFJNAA...
2021-03-31T06:44:58.514Z - debug: Page request: GET (image) data:image/png;base6
4,iVBORw0KGgoAAAANSUhEUgAAASwAAABsCAYAAADQUo+tAAAACXBIWXMAAC4jAAAuIwF4pT92AAAKT2
...
2021-03-31T06:44:58.514Z - debug: Page request finished: GET (image) 200 data:im
age/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAABsCAYAAADQUo+tAAAACXBIWXMAAC4jAAAuI
wF4pT92AAAKT2...
2021-03-31T06:45:05.067Z - debug: Page request finished: GET (document) file:///
C:/Users/admin/AppData/Local/Temp/jsreport/autocleanup/d63576d2-c1d9-462b-b537-2
0127e0fbcdc-chrome-pdf.html
2021-03-31T06:45:05.268Z - debug: Running chrome with params {"printBackground":
false,"width":"","landscape":false,"format":"","mediaType":"print","height":"","
marginBottom":"","marginRight":"1cm","marginLeft":"1cm","marginTop":"","scale":n
ull,"margin":{"top":"","right":"1cm","bottom":"","left":"1cm"}}
2021-03-31T06:45:10.543Z - info: Rendering request 3 finished in 39103 ms
2021-03-31T06:45:10.544Z - debug: Skipping storing report.
2021-03-31T06:45:15.720Z - debug: pdf-utils postproces start
2021-03-31T06:45:15.723Z - debug: pdf-utils postproces end
2021-03-31T06:45:15.739Z - info: pdf-utils pdf processing was finished
2021-03-31T06:45:15.745Z - info: Rendering request 2 finished in 538811 ms
2021-03-31T06:45:15.746Z - debug: Skipping storing report.

Finally, the report never rendered.

[jan_blaha]

Based on the server log, the report finished rendering after ~9 minutes.
I don't know how are you handling the rendering from the client-side in the browser.
Maybe it fails to display such a big document.

[Aravinth3366]

Thanks for ur reply...

I'm rendered by using the jsreport browser Client.

let request = {
              template: {
                "shortid": objData.groupingReport ? this.orientation ? "qzy1bZ0a7a" : "bRxLQHSj1t" :
                  this.orientation ? "I1pmHx-Z-L" : "HIseNIH5dr",
                "pdfMeta": {
                  "title": this.maintainData['title']
                }
              },
              data: {
                "title": this.maintainData['title'],
                "columnHeaderslst": !isNullOrUndefined(objData) ? objData.colArrayHeader : '',
                "gridDataSet": objData.groupingReport ? gArr : arr,
                "formValue": !isNullOrUndefined(this.filterForm) ? this.filterForm.getRawValue() : {},
                "dateVal": filterPrompt,
                "tableWidth": !isNullOrUndefined(widthFlag) ? widthFlag : '',
                "data": dataAvailable,
                "drillDownPfdHearder": drillDownPfdHearder,
                "maker": localStorage.getItem('User_Name'),
                "clientImg": true
              }
            };

jsreport.renderAsync(request).then(function (res) {
                let placeholder = document.getElementById('reportPlaceholder')
                let iframe = document.createElement('iframe');
                iframe.src = res.toDataURI();
                iframe.style.width = '100%'
                iframe.style.height = '100%'
                while (placeholder.firstChild) {
                  placeholder.removeChild(placeholder.firstChild);
                }
                placeholder.appendChild(iframe);
              }).catch(function (err) {
console.log(err)
})

[jan_blaha]

Please check this in the documentation.
https://jsreport.net/learn/browser-client#large-report-file
Browsers have problems handling big URI. Look on the toObjectURL or toBlob.