Error generating PDF: Unable to determine the page height.

[Waji-97]

Hello, nice project! However whenever I try to generate the pdf, I get the following error:

Error generating PDF: Unable to determine the page height. The selector '.scrollbar-view' might be incorrect or missing.homelab@bastion

I tried using curl and using the .sh inside the container but got the same error message.

Here are the container logs:

grafana-export-to-pdf-1  | Server is listening on port 3000
grafana-export-to-pdf-1  | Script grafana_pdf.js started...
grafana-export-to-pdf-1  | URL provided: https://my-grafana.com/d/<dashboard-uid>?orgId=1&kiosk
grafana-export-to-pdf-1  | Checking URL accessibility...
grafana-export-to-pdf-1  | Checking if kiosk mode is enabled.
grafana-export-to-pdf-1  | Kiosk mode enabled.
grafana-export-to-pdf-1  | Starting browser...
grafana-export-to-pdf-1  | Browser started...
grafana-export-to-pdf-1  | Navigating to URL...
grafana-export-to-pdf-1  | Page loaded...
grafana-export-to-pdf-1  | Extracting dashboard name and date from the URL...
grafana-export-to-pdf-1  | Dashboard name fetched from URL: <dashboard-uid>
grafana-export-to-pdf-1  | Trying to fetch the panel name from the page...
grafana-export-to-pdf-1  | Date fetched from URL: 2024-07-13
grafana-export-to-pdf-1  | Error during PDF generation: Unable to determine the page height. The selector '.scrollbar-view' might be incorrect or missing.

[arthur-mdn]

Hello, Thanks for your message !

It seems that the page architecture is not the same as mine.

Can you please tell me which Grafana version are you running ?

I will then update the script, to adjust to different Grafana architecture.

[QuentinTournier40]

Hey,

I have the same issue.

Error generating PDF: Unable to determine the page height. The selector '.scrollbar-view' might be incorrect or missing.

Here is my grafana version : Grafana v11.0.0 (83b9528bce)

[arthur-mdn]

Hey, Thanks for your message.

Could you please try to execute this line in your console while being on the dashboard page :

document.querySelector(".scrollbar-view")

And share the result of this command.

Thanks !

[Waji-97]

Hey there,

Sorry I couldn't get back to you.

I am using Grafana v11.1.0.

Here is the result of the line:

[QuentinTournier40]

For the v11.0.0:

[arthur-mdn]

The error occurs because the server is unable to access the dashboard page due to authentication requirements. You need to create a Grafana user and provide the user credentials in the .env file.

To address this, I have made the following updates:

• https://github.com/arthur-mdn/ExportGrafanaDashboardToPDF/commit/24a858619b975d36330abed12ab36fbe1ba71ef6 Added detection of the login page to make the error message more specific + Fix Export button display in v11.

• https://github.com/arthur-mdn/ExportGrafanaDashboardToPDF/commit/d599b4df53cc91078e5f447ef20486c681cb8cea Added credentials verification at server launch.

These changes should help resolve the issue.

[Waji-97]

Hey, I already have provided the user credentials in the .env file. However, I still get the same error:

Error: The server response is not valid JSON. Raw response: Error generating PDF: Unable to determine the page height. The selector '.scrollbar-view' might be incorrect or missing.

Here's how I am running the command:

docker compose exec grafana-export-to-pdf /usr/src/app/generate-pdf.sh GF_DASH_URL 'https://my.grafana.com/d/<dashboard-id>?orgId=1&kiosk'

[QuentinTournier40]

Hey, same for me. I already provided the credentials and i still have the problem

[arthur-mdn]

Hey, Let's try to debug this issue together. We can now get more details about the issue :

Please git pull the latest commit and add this line in your .env file :

DEBUG_WEB_PAGE=true

This will store the HTML web page content in a folder debug, when launching the script.

Tell me about the content file, does it seems to be good ..?

docker compose exec grafana-export-to-pdf cat debug/debug_XXXX.html

[QuentinTournier40]

The creation of the site by grafana does not seem to be done in the same way.

For v10.1.0, I have the html tags created to render the dashboard.

However for v11, my dashboard appears in its json form. Like this:

<div class="preloader preloader--done">
  <div class="preloader__enter">
    <div class="preloader__bounce">
      <div class="preloader__logo" aria-live="polite" role="status" aria-label="Loading Grafana"></div>
    </div>
  </div>
  <div class="preloader__text preloader__text--fail">
    <p>
      <strong>If you're seeing this Grafana has failed to load its application files</strong>
      <br>
      <br>
    </p>
    <p>
      1. This could be caused by your reverse proxy settings.<br><br>
      2. If you host grafana under subpath make sure your grafana.ini root_url setting includes subpath. If not
      using a reverse proxy make sure to set serve_from_sub_path to true.<br>
      <br>
      3. If you have a local dev build make sure you build frontend using: yarn start, or yarn build<br>
      <br>
      4. Sometimes restarting grafana-server can help<br>
      <br>
      5. Check if you are using a non-supported browser. For more information, refer to the list of
      <a href="https://grafana.com/docs/grafana/latest/installation/requirements/#supported-web-browsers">
        supported browsers</a>.
    </p>
  </div>

<div id="reactRoot"></div>

<script nonce="">
    window.grafanaBootData = {
      settings: { "defaultDatasource": "Prometheus", "datasources": { "-- Dashboard --": { "type": "datasource", "name": "-- Dashboard --", "meta": { "id": "dashboard", "type": "datasource", "name": "-- Dashboard --", ...
</script>

[Waji-97]

Yeah, when I look into the debug.html file, I get the same format for Grafana v11 as @QuentinTournier40 mentioned above.

[PAPAMICA]

Same here with Grafana v11.1.1 (7e03b70f02) :

      <div class="preloader__text preloader__text--fail">
        <p>
          <strong>If you're seeing this Grafana has failed to load its application files</strong>
          <br>
          <br>
        </p>
        <p>
          1. This could be caused by your reverse proxy settings.<br><br>
          2. If you host grafana under subpath make sure your grafana.ini root_url setting includes subpath. If not
          using a reverse proxy make sure to set serve_from_sub_path to true.<br>
          <br>
          3. If you have a local dev build make sure you build frontend using: yarn start, or yarn build<br>
          <br>
          4. Sometimes restarting grafana-server can help<br>
          <br>
          5. Check if you are using a non-supported browser. For more information, refer to the list of
          <a href="https://grafana.com/docs/grafana/latest/installation/requirements/#supported-web-browsers">
            supported browsers</a>.
        </p>
      </div>

[arthur-mdn]

Hey, I’ve updated the Dockerfile to use the latest version of Node.js, which should resolve the issue. Please let me know if you encounter any further problems. FROM node:16-slim -> FROM node:latest

P.S.: I’ve also added a parameter for the Node.js listening port to avoid hardcoding. Make sure to include it in your .env file.

EXPORT_SERVER_PORT=3001