Posts made by msageryd

Has anyone else had problems with 4.6 or 4.7 on Fargate? Both versions works great in local Docker, but when I deploy to AWS Fargate Puppeteer hangs.

I have now upgraded from 4.3.1 to 4.5.0 on my production server. Any further upgrade breaks Puppeteer.

I have logged an issue:
https://github.com/jsreport/jsreport/issues/1207

If anyone is interested, or encounters the same problem.

Topping out the CPU is really bad. When it reaches the top, the current report rendering seems to slow down to almost stand-still. I was contemplating setting up a second JSReport server, but that would not have solved our type of load. We have very few renderings (10-20 per day), but sometimes really big reports are rendered. The most important bottleneck in our setup seems to be topping out the CPUs.

The left part of this chart shows three attempts to render a very large report. Each of the attempts timed out after 10 minutes.

To the right in the chart, the same report is rendered two times after upgrading from 2 vCPU to 4 vCPU. Each render took about 40-42 seconds.

The last cpu bump is a smaller report. This particular report was actually rendered successfully with 2 vCPUs a couple of days ago, so I had metrics to compare. With 2vCPUs the smaller report took 14 seconds to render. After the upgrade, the same report took 9 seconds. This is a reasonable performance bump, but its always nice with confirmation.

Thanks.
This solved the timeout issue.

The 2vCPU server tops out at 99.5% while rendering this report at AWS. I'm guessing that this CPU overload leads to very long rendering times. I got some suggestions from Claude AI.

Firstly, I increased to 4 vCPU.

I also added some chrome args:

 "args": [
        "--no-sandbox",
        "--disable-gpu",
        "--disable-dev-shm-usage"
      ]

The report now renders at about 40 seconds on Fargate. I had to switch back to AMD64. It seems as is Puppeteer has some problems in the AWS ARM environment. Works great on M2 Mac though.

Is there anything I could do to make the JSReport run on ARM64 at AWS?

Update.
I have now moved the AWS server to ARM64 to mimic my local environment. Problem remains.

I noticed that the report timed out after about 3 minutes, despite my jsreport config states "reportTimeout": 600000,. Are there other timeout settings somewhere? What is "protocolTimeout"?

Network.enable timed out. Increase the 'protocolTimeout' setting in launch/connect calls for a higher timeout if needed. ProtocolError: Network.enable timed out. Increase the 'protocolTimeout' setting in launch/connect calls for a higher timeout if needed.

My JSReport server at AWS Fargate renders many heavy reports every day, but one particular report cannot be rendered.

I have seen different errors from the many retries of this report, such as:

• Network.enable timed out. Increase the 'protocolTimeout' setting in launch/connect calls for a higher timeout if needed.
• Protocol error (Page.printToPDF): Printing failed
• Protocol error (IO.read): Target closed

The JSON data is quite large, about 33 MB. If I copy this data to my local JSReport and run it, the complete rendering is finished after about 27 seconds. My local server is ARM64.

• The timeout on the server is set to 10 minutes.
• The server at AWS har 2vCPU and 5GB memory.
• The server is AMD64
• My reports are served from a queue. Ihave set the max concurrent to 1, i.e. no other reports are rendered at the server concurrently.

I tried to upgrade from 4.3 to 4.7, but the problem remains.

How should I move on with this?
Are there any detailed logs I can look at?

My local docker server har 8GB of memory, but it peaks at aprox 1.8GB usage, so this does not seem lika a memory problem, at least not locally.

Update:
I got window.JSREPORT_READY_TO_START to work by ckecking "wait for printing trigger", but the measurement are still taken before automatic page breaks.

I have tried both setTimeout and requestAnimationFrame. Is there no way to await chrome-pdf's automatic page breaking before taking measurements?

I need to measure some elements. This works great with the following concept:

1. In a script tag, iterate alle elements and collect element.getBoundingClientRect()
2. stringify the measures and mashal them to the server side via console.log
3. add measurement data to req.data
4. start a second render where I now have access to the measurements

Unfortunately, I'm having trouble with the timing. I'm currently measuring at window.onload. It seems as chrome-pdf applies the automatic page breaks after my measurements. I.e. the boundingboxes will sometimes relate to the position the element had before chrome-pdf added the automatic pagebreaks.

Is there any way to await the complete layout?

I tried with a simple setTimeout but jsReport does not await such timeouts on the client side.
I also tried to set window.JSREPORT_READY_TO_START = false; and then set it to true after my timeout, but jsReport did not wait for this.

Never mind.
I see that the message is truncated at 1000 characters. This is probably reasonable to not bloat the logs.

I solved it by chunking my console.log calls instead.

New problem.
I'm collecting measurement data from my html elements, put them in an array and stringify before sending the data to the server side via console.log. It seems as if the message gets truncated. Is console.log not a reliable way to marshal data to the server?

I get the feeling that the profile pane in jsReport truncates long strings, and the truncated string is also what is what I get in req.context.logs[i].message.

Solved. I got it to work when I changed recipe to chrome-pdf.
Is this as it should, i.e. console.log at the client side only works for chrome-pdf?

I get it to work with your docker run command. But it does not work in my docker-compose environment. What could differ?

My Dockerfile is quite minimalistic. I don't think the prolem is here:

FROM --platform=linux/arm64 jsreport/jsreport:4.7.0

COPY .npmrc /app/.npmrc
ARG NPM_TOKEN

RUN cd /app && npm install \
  handlebars-helpers \
  node-fetch \
  i18next \
  i18next-locize-backend \
  bwip-js \
  @plantrail/ddp

RUN cd /app && npm ls

My jsreport.config.json is quite old. Maybe something deprecated is in here?

{
  "encryption": {
    "secretKey": "secret"
  },
  "logger": {
    "console": { "transport": "console", "level": "debug" }
  },

  "workers": { "numberOfWorkers": 4 },
  "reportTimeout": 600000,
  "httpPort": 5488,
  "allowLocalFilesAccess": true,
  "store": {
    "provider": "fs"
  },
  "blobStorage": {
    "provider": "fs"
  },

  "extensions": {
    "chrome-pdf": {
      "strategy": "chrome-pool",
      "numberOfWorkers": 10
    },
    "express": {
      "inputRequestLimit": "100mb",
      "enabled": true
    },
    "child-templates": {
      "parallelLimit": 20
    },
    "fs-store": {
      "sync": {
        "usePolling": false
      }
    },
  }
}

This is the jsReport section from my docker-compose.yaml. I just added the chrome launch options, but it didn't work:

  jsreport4:
    build:
      context: ../services/jsreport4
      args:
        - NPM_TOKEN
    environment:
      - mode=development
      - chrome_launchOptions_args=--no-sandbox, --disable-dev-shm-usage, --disable-gpu
    expose:
      - '5488'
    ports:
      - '5487:5488'
    volumes:
      - ../services/jsreport4/mounted:/jsreport

The console.log can be seen in the chrome console:

sending req.context.logs to the console at the server in afterRender shows other logs, but not the log from my script tag.

Something is different between my environment (jsreport 4.7 Docker image) and the playground.

When I console.log in a script tag I cannot see this in req.context.logs. I have configured logging to console with level "debug". req.context.logs includes other info and debug logs, but not the one from by script tag.

Do I need to add some extension for this to work?

After upgrading from v4.3 to v4.7 some images on my cover page disappeared.
It took some tinkering to solve this, so I'll post here for others to avoid the same pit fall.

I don't know how many of the requisites has to be true to get into this trouble. My setup:

• the cover page is based on css grid
• images are laid out witout margins, i.e. all the way to the edge of the page
• some images had opacity: 0.3; via css class
• the cover page is prepended via PDF Utils

If I render the cover page separately, all images are rendered. But when the cover page is rendered via PDF Utils and prepended to my report, the images disappear.

After changing opacity: 0.3; to filter: opacity(30%); everything seems to work as it should. I'm happy that it works now but I don't understand why it broke in the first place.

Are you using Handlebars?
I'm not shure what {MREGEFIELD defect} means. Is defect a property of MREGEFIELD? I.e. MREGEFIELD.defect?

I don't think Handlebars has a comparison helper out of the box. #if can only check if a value is truthy.

I'm using the npm package "handlebars-helpers" which for example includes #eq for comparing values, like below. If your use case is a one-off it's probably easier to just write a function. Are you using JSReport Studio? In that case it's really simple to write a comparison helper function in the helper pane and call this function from Handlebars.

Here is how your comparison could look like with #eq.

{{#eq MREGEFIELD.defect "New"}}
    Yes
{{else}}
    No
{{/eq}}

That's really great.
Thank you!

I have had a hard time to debug my scripts. This way I can "forward" my console from the script so I can see them in the profiler. Is this a good solution for this, or is there an easier way to se logs from scripts?

I have always used the jsreport docker image in my Fargate cluster at AWS. Now I want to expand some small functionality:

• /health endpoint for AWS health checks
• logging to Datadog and Slack when server starts
• later on I would like my server to git pull templates instead of spinning up a new server when templates are updated

I have found some information on this but I'm struggling to get it right and could really use a "best practice" document.

1. I have concluded that the best startingpoint is the official Docker image. I tried to create my own, but there are so many deps and other stuff that is already solved in the official Dockerfile.

2. I want to mount a local "/data" and a local "/src" folder during development. When I build the image for production these folders needs to be copied and possibly change owner to "jsreport", but looking at run.sh this might not always be the case. What folder structure should I use for the easiest implementation, i.e. without needing to tinker with "rootDirectory" etc.

3. At what "level" should I override the start script?
   There is already quite some features built in the start scripts in the offficial image. run.sh and server.js, such as copying license files and auto-registe extensions if they exist in package.json.
   3.1 simply create my own start.js?
   3.2 or create my own run.sh
   3.3 or replace server.js

4. What specific differences do I need to implemement for running in dev mode in a local docker-compose environment? As of now I cannot get rid of the license nag screen with a 5 template limit. (I have tried setting NODE_ENV=development without luck)

Thanks.

I have a complicated report layout using css grids. I need to be precise with my page breaks so I need to know the height on some specific divs before rendering.

I'm measuring the divs in a script, and my hope was that I could somehow communicate the measurements back to the server side before the second render pass. I tried to handle the page breaks directly in the script, but this quickly went into a mess as so many things break, for instance the page counter.

How about this:

1. measure height in a script tag
2. send the measurements from the scrip tag to an API endpoint and tag the data with a unique report id
3. fetch the measurements from within afterRender and then start a second render pass

The API endpoint could be at my API server, or even at the jsreport server with an express server.

I have a two pass report where some critical rowHeights are calculated during the first pass. On the secont pass I need to use those rowHeight for some decisions in the rendering.

I know that it's almost impossible to send the data back to the server, but maybe it's possible via AJAX? I would need to setup an endpoint at the server.

Can I somehow get access to express so I can setup an endpoint from the afterRender function and send data to this via fetch from the html script?

Ok, I thought your problem was that the header neded to change based on what happened in the main report. pdfCreatePagesGroup is the way to go if that's the case.

If your header data is static it's much easier. Do you have the data in the dataset you provide for rendering the report? Just access it from your header-report like Jan described above in this thread.

If you don't have the data in your original dataset, you might want to fetch it from a remote place. The fetch would be easies to to in onBeforeRender. When you have the data you can add it to req.data.whatever and then reach it from your header-report as {{@root.whatever}}

If I understand correctly I have the same need, and a solution.

1. I have a separate header-footer report which I merge with PDF-utils
2. I'm "sending" data to the header-footer report via $pdf.pages, i.e. by calling {{{pdfCreatePagesGroup}}}
3. The header-footer report simply iterates $pdf.pages

Iterating $pdf.pages in the header-footer report. All pages but the first (19=0) gets a pageBreak:

        {{#each $pdf.pages}}
            {{#if 19}}
                <div style="page-break-before: always;"></div>
            {{/if}}

            <main class="main">
                <header class="top">
                    {{#if group.bannerColor}}
                        <div class="top-banner" style="background-color: {{group.bannerColor}}; color: {{group.textColor}};">

...etc

Here is an example calling pdfCreatePagesGroup in my main report:

{{{pdfCreatePagesGroup bannerColor=(getLevelColor @root.controlpointLevelColors levelId 'report') 
   textColor=(getLevelColor @root.controlpointLevelColors levelId 'text') 
   title=(getLevelTitle @root.report.properties.mainControlpointTypeId levelId) 
   subtitle=(getControlpointIdentifierLong ./this) 
   infoText1=../name  
   infoText2=../images.[0].name 
   showAddress=true
}}}