Protocol Error (Browser.getVersion) - JSReports 2.11.0

danielmmack

Hello! I'm currently trying to get JSreport running properly in my local environment. I'm able to get to the reports dashboard with no issues. Here is what the Dockerfile looks like:

FROM jsreport/jsreport:2.11.0

ARG APP=/app

WORKDIR $APP

COPY --chown=jsreport:jsreport .prettierrc.js $APP/
COPY --chown=jsreport:jsreport .eslintrc.js $APP/
COPY --chown=jsreport:jsreport package.json $APP/
RUN npm install

COPY --chown=jsreport:jsreport jsreport.config.json $APP/
COPY --chown=jsreport:jsreport /data $APP/data

When I try and generate a pdf report, I'm getting hit with this error:

Protocol error (Browser.getVersion): Target closed.
logs:
+0      Starting rendering request 4 (user: test)
+5      Rendering template { name: weeklyProgressReport, recipe: chrome-pdf, engine: handlebars, preview: true }
+10     Adding sample data 07CWvWxCRT
+13     Resources not defined for this template.
+15     Base url not specified, skipping its injection.
+37     Replaced assets ["weeklyProgressReportDemo.css"]
+38     Rendering engine handlebars using dedicated-process strategy
+898    Compiled template not found in the cache, compiling
+945    Executing recipe chrome-pdf
+2038   Rendering request 4 finished with error in 2038 ms
Error: Protocol error (Browser.getVersion): Target closed.
    at /app/node_modules/puppeteer/lib/Connection.js:74:56
    at new Promise (<anonymous>)
    at Connection.send (/app/node_modules/puppeteer/lib/Connection.js:73:12)
    at Browser._getVersion (/app/node_modules/puppeteer/lib/Browser.js:274:29)
    at Browser.version (/app/node_modules/puppeteer/lib/Browser.js:242:32)
    at Browser.<anonymous> (/app/node_modules/puppeteer/lib/helper.js:112:23)
    at /app/node_modules/jsreport-chrome-pdf/lib/conversion.js:27:41
    at /app/node_modules/jsreport-chrome-pdf/lib/conversion.js:301:28
    at new Promise (<anonymous>)
    at runWithTimeout (/app/node_modules/jsreport-chrome-pdf/lib/conversion.js:283:10)
    at module.exports (/app/node_modules/jsreport-chrome-pdf/lib/conversion.js:26:34)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async execute (/app/node_modules/jsreport-chrome-pdf/lib/dedicatedProcessStrategy.js:10:22)
    at async Object.execute (/app/node_modules/jsreport-chrome-pdf/lib/chrome.js:68:20)
    at async module.exports (/app/node_modules/jsreport-core/lib/render/render.js:150:5)

Any ideas as to what's causing this error to occur?

jan_blaha

What's in your package.json and jsrepoirt.config.json? It seems its trying to use a different version of chrome than it uses in the base image.

danielmmack

Thank you for the quick reply! Here's what in the package.json file:

{
  "name": "jsreport-server",
  "main": "server.js",
  "license": "UNLICENSED",
  "private": true,
  "repository": {
    "type": "git",
    "url": "https://github.com/ThriveTRM/thrive-js-report"
  },
  "engines": {
    "node": "^14.16.0"
  },
  "scripts": {
    "postinstall": "[ -d '.git/hooks' ] && .githooks/install || exit 0",
    "start": "node server",
    "jsreport": "jsreport",
    "precommit": "lint-staged",
    "lint": "eslint data/*.js --fix",
    "lint:check": "eslint data/*.js",
    "format:css": "prettier --loglevel warn --write data/*/*/assets/*/*.css",
    "format:css:check": "prettier --check data/*/*/assets/*/*.css",
    "format:js": "prettier --loglevel warn --write data/*/*.js",
    "format:json": "prettier --loglevel warn --write data/*/data/*/dataJson.json",
    "format:js:check": "prettier --check data/*/*.js",
    "format:handlebars": "prettier --write data/*/*/pdf/*/*.handlebars --parser=glimmer",
    "format:handlebars:check": "prettier --check data/*/*/pdf/*/*.handlebars --parser=glimmer",
    "format:json:check": "prettier --check data/*/data/*/dataJson.json",
    "test": "jest --coverage",
    "test:watch": "jest --watch --runInBand"
  },
  "jsreport": {
    "entryPoint": "server.js"
  },
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "prettier --loglevel warn --write "
    ],
    "*.handlebars": [
      "prettier --loglevel warn --write --parser=glimmer"
    ],
    "*.css": [
      "prettier --loglevel warn --write"
    ],
    "dataJson.json": [
      "prettier --loglevel warn --write"
    ]
  },
  "dependencies": {
    "handlebars": "^4.7.6",
    "handlebars-group-by": "^1.0.1",
    "jsreport": "^2.11.0",
    "jsreport-html-embedded-in-docx": "^2.2.0"
  },
  "devDependencies": {
    "eslint": "^7.19.0",
    "eslint-config-prettier": "^7.2.0",
    "jest": "^26.6.3",
    "eslint-plugin-jest": "^24.1.9",
    "lint-staged": "^10.2.11",
    "prettier": "^2.2.1"
  }
}

Here's what's in the jsreport.config.json file:

{
    "extensions": {
        "fs-store": {
            "dataDirectory": "data",
            "syncModifications": {
                "updateStudio": true
              }
        },
        "chrome-pdf": {
            "timeout": 600000
        }
    },
    "store": {
        "provider": "fs"
    },
    "allowLocalFilesAccess" : true,
    "templatingEngines" : { 
        "allowedModules": ["handlebars-group-by"]
    }
}

danielmmack

Any other pieces of information you'd like me to provide?

jan_blaha

I've tried the same dockrefile and jsreport.config.json and I can render pdf without problems.

Could you try to build the image with no cache? What platform are you on? How do you run the container?

danielmmack

I tried building the image with no cache but ran into the same error. I run docker compose up to starts things off and then head over to the jsreports dashboard. I'm on macOS Monterey 12.6, I'm running this on an M1 which I've been wondering if that is somehow playing a role in the issues I'm seeing.

bjrmatos

hi @danielmmack yes, our docker images by default does not work on docker + M1, you can see this topic for some context about it.

we investigated the issue already, and the conclusion is that in order to run chrome on docker + M1 hardware you need to do it with one of these steps:

there needs to exists dedicated images (prepared by us the jsreport team) prepared to run on arm based hardware (linux/arm64), this method will make it work natively on macOS with M1 and it is the fastest
run the existing images (linux/amd64) with some extra options for docker and jsreport, this method is slow because docker will need to virtualize the architecture to amd64 (because M1 architecture is arm64)

both steps will work just fine on the next release of jsreport v3.

now for your case which uses jsreport 2.11.0, your option will be to use the step 2 (run docker with some extra option), although i did not give it too much testing because it is old version but at least i have confirmed that it works. the command and options for it looks like this:

docker run --platform=linux/amd64 -p 5488:5488 -e "chrome_launchOptions_executablePath=/usr/bin/chromium-browser" -e "chrome_launchOptions_args=--no-sandbox, --disable-dev-shm-usage, --disable-dev-profile, --no-zygote, --disable-gpu, --disable-audio-output, --disable-setuid-sandbox, --single-process" <YOUR CUSTOM IMAGE HERE>

just build your image and then run it like the command above, it should work.

bjrmatos

for docker compose you need to update your docker compose file to pass those extra options to docker and the custom jsreport image.

danielmmack

Thanks so much for the information! Working on giving this a try now.