Kaleido 1.0.0 errors within Docker container

📊 Plotly Python
,
1

Kaleido._kaleido_tab.JavascriptError is encountered when running Plotly in a docker container
Stack trace indicates this is emanating from:

File “/usr/local/lib/python3.12/site-packages/kaleido/_kaleido_tab.py”, line 323, in _calc_fig
raise e

Environment:

  • Python 3.12.0
  • Plotly 6.1.1
  • kaleido 1.0.0
  • Acquiring stable Chrome while building the container (this is a MUST, our end-users do not want to access Chrome during run-time- restrictions on Internet use)
  • Verified google-chrome and google-chrome-stable are in the /usr/bin directory of container

The plotting is successful when running the code OUTSIDE the container, so this indicates something(s) was/were overlooked or missing in setting up the container??? Any suggestions for trouble-shooting this issue would be appreciated.

Full stack trace:
File “/METviewer-python/METplotpy/metplotpy/plots/base_plot.py”, line 376, in save_to_file
self.figure.write_image(image_name)
File “/usr/local/lib/python3.12/site-packages/plotly/basedatatypes.py”, line 3911, in write_image
return pio.write_image(self, *args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File “/usr/local/lib/python3.12/site-packages/plotly/io/_kaleido.py”, line 509, in write_image
img_data = to_image(
^^^^^^^^^
File “/usr/local/lib/python3.12/site-packages/plotly/io/_kaleido.py”, line 373, in to_image
img_bytes = kaleido.calc_fig_sync(
^^^^^^^^^^^^^^^^^^^^^^
File “/usr/local/lib/python3.12/site-packages/kaleido/init.py”, line 145, in calc_fig_sync
return _async_thread_run(calc_fig, args=args, kwargs=kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File “/usr/local/lib/python3.12/site-packages/kaleido/init.py”, line 138, in _async_thread_run
raise res
File “/usr/local/lib/python3.12/site-packages/kaleido/init.py”, line 129, in run
q.put(asyncio.run(func(*args, **kwargs)))
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File “/usr/local/lib/python3.12/asyncio/runners.py”, line 194, in run
return runner.run(main)
^^^^^^^^^^^^^^^^
File “/usr/local/lib/python3.12/asyncio/runners.py”, line 118, in run
return self._loop.run_until_complete(task)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File “/usr/local/lib/python3.12/asyncio/base_events.py”, line 664, in run_until_complete
return future.result()
^^^^^^^^^^^^^^^
File “/usr/local/lib/python3.12/site-packages/kaleido/init.py”, line 55, in calc_fig
return await k.calc_fig(
^^^^^^^^^^^^^^^^^
File “/usr/local/lib/python3.12/site-packages/kaleido/kaleido.py”, line 332, in calc_fig
data = await asyncio.wait_for(
^^^^^^^^^^^^^^^^^^^^^^^
File “/usr/local/lib/python3.12/asyncio/tasks.py”, line 510, in wait_for
return await fut
^^^^^^^^^
File “/usr/local/lib/python3.12/site-packages/kaleido/_kaleido_tab.py”, line 323, in _calc_fig
raise e
kaleido._kaleido_tab.JavascriptError: {‘result’: {‘type’: ‘object’, ‘subtype’: ‘error’, ‘className’: ‘ReferenceError’, ‘description’: ‘ReferenceError: Plotly is not defined\n at Object.render [as plotly] (file:///usr/local/lib/python3.12/site-packages/kaleido/vendor/kaleido_scopes.js:3021:18)\n at :1:48’, ‘objectId’: ‘-5345872899737574680.1.2’}, ‘exceptionDetails’: {‘exceptionId’: 2, ‘text’: ‘Uncaught’, ‘lineNumber’: 3020, ‘columnNumber’: 17, ‘scriptId’: ‘8’, ‘stackTrace’: {‘callFrames’: [{‘functionName’: ‘render’, ‘scriptId’: ‘8’, ‘url’: ‘file:///usr/local/lib/python3.12/site-packages/kaleido/vendor/kaleido_scopes.js’, ‘lineNumber’: 3020, ‘columnNumber’: 17}, {‘functionName’: ‘’, ‘scriptId’: ‘12’, ‘url’: ‘’, ‘lineNumber’: 0, ‘columnNumber’: 47}]}, ‘exception’: {‘type’: ‘object’, ‘subtype’: ‘error’, ‘className’: ‘ReferenceError’, ‘description’: ‘ReferenceError: Plotly is not defined\n at Object.render [as plotly] (file:///usr/local/lib/python3.12/site-packages/kaleido/vendor/kaleido_scopes.js:3021:18)\n at :1:48’, ‘objectId’: ‘-5345872899737574680.1.3’}}}
root@045c5ccf62b5:/tmp#

2

Hey @mwin I can’t reproduce this. My friend Claude helped me with that.

Dockerfile:

FROM python:3.12-slim

# Set environment variables
ENV DEBIAN_FRONTEND=noninteractive
ENV PYTHONUNBUFFERED=1

# Update and install system dependencies
RUN apt-get update && apt-get install -y \
    python3-pip \
    wget \
    curl \
    gnupg \
    software-properties-common \
    xvfb \
    && rm -rf /var/lib/apt/lists/*


# Install Google Chrome
RUN wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list \
    && apt-get update \
    && apt-get install -y google-chrome-stable \
    && rm -rf /var/lib/apt/lists/*

# Verify Chrome installation
RUN ls -la /usr/bin/google-chrome* && \
    google-chrome --version

# Upgrade pip
RUN python3 -m pip install --upgrade pip

# Install Python packages
RUN pip install plotly==6.1.1 kaleido==1.0.0

# Create working directory
WORKDIR /app

# Copy application files
COPY main.py .

# Create output directory
RUN mkdir -p /app/output

# Run the application
CMD ["python", "main.py"]

docker-compose.yaml

services:
  plotly-app:
    build: .
    container_name: plotly-chart-generator
    volumes:
      - ./output:/app/output
    environment:
      - DISPLAY=:99
    command: >
      bash -c "
        Xvfb :99 -screen 0 1024x768x24 &
        python main.py
      "
    restart: "no"

main.py:

import plotly.graph_objects as go
import plotly.io as pio
import random
import os

def generate_random_line_chart():
    """Generate a random line chart using plotly and save as PNG"""
    
    # Generate random data
    x_values = list(range(1, 21))  # 20 data points
    y_values = [random.randint(10, 100) for _ in range(20)]
    
    # Create the line chart
    fig = go.Figure()
    
    fig.add_trace(go.Scatter(
        x=x_values,
        y=y_values,
        mode='lines+markers',
        name='Random Data',
        line=dict(color='#1f77b4', width=3),
        marker=dict(size=8)
    ))
    
    # Update layout
    fig.update_layout(
        title='Random Line Chart',
        xaxis_title='X Values',
        yaxis_title='Y Values',
        font=dict(size=12),
        width=800,
        height=600,
        template='plotly_white'
    )
    
    # Ensure output directory exists
    os.makedirs('/app/output', exist_ok=True)
    
    # Save as PNG
    output_path = '/app/output/random_line_chart.png'
    fig.write_image(output_path)
    
    print(f"Chart saved successfully to {output_path}")
    print(f"Data points: {len(x_values)}")
    print(f"Y-value range: {min(y_values)} to {max(y_values)}")

if __name__ == "__main__":
    generate_random_line_chart()
3

Unfortunately, this Dockerfile does not build successfully due to an inability to locate google-chrome-stable.

4

Works on my end. There is no way we can help you any further without knowing exactly what you are doing.

5

  • A bit more complicated than the typical plotting paradigm. We have a few ways to generate plots: directly via command line, through use case wrapper scripts, and via Java web app which invokes the Python plotting scripts. The Java web app can be installed on a host, or run in a container.

  • The web app successfully generates plots when installed on a host. The plots are also successfully generated via command line.

  • When the web app is deployed into a container, we observe javascript error observed from _kaleido_tab.py (_calc_fig).

  • Executing the /bin/bash script inside the container and running plotting via command line generates the same javascript error, but provides the stack trace.

Our Dockerfile is a bit more complex, we build on MacOS with the following command:

docker build --platform linux/amd64 -t metviewer .

Dockerfile

ARG MET_BASE_REPO=met-base-metviewer
ARG MET_BASE_TAG=v3.4

FROM dtcenter/${MET_BASE_REPO}:${MET_BASE_TAG}
LABEL org.opencontainers.image.authors="John Halley Gotway <johnhg@ucar.edu>"


#
# This Dockerfile checks out METviewer and its dependencies from GitHub and builds
# the specified branch or tag. Use the develop branches for dependencies by default
# but override with "--build-arg".
#

ARG METPLOTPY_GIT_NAME=feature_525_update_plotly_kaleido
ARG METCALCPY_GIT_NAME=develop
ARG METDATAIO_GIT_NAME=develop

#
# METVIEWER_GIT_NAME is required.
ARG METVIEWER_GIT_NAME=bugfix_kaleido_docker
#
RUN if [ "x${METVIEWER_GIT_NAME}" = "x" ]; then \
      echo "ERROR: METVIEWER_GIT_NAME undefined! Rebuild with \"--build-arg METVIEWER_GIT_NAME={branch, tag, or hash}\""; \
      exit 1; \
    fi 

ENV METVIEWER_GIT_URL=https://github.com/dtcenter/METviewer
ENV CATALINA_HOME=/opt/tomcat

RUN echo "Build Argument METVIEWER_GIT_NAME=${METVIEWER_GIT_NAME}" \
 && echo "Build Argument METPLOTPY_GIT_NAME=${METPLOTPY_GIT_NAME}" \
 && echo "Build Argument METCALCPY_GIT_NAME=${METCALCPY_GIT_NAME}" \
 && echo "Build Argument METDATAIO_GIT_NAME=${METDATAIO_GIT_NAME}"

#
# Set env vars
#
ENV PYTHONPATH="/METviewer-python/METcalcpy/:/METviewer-python/METplotpy/"
ENV METPLOTPY_BASE="/METviewer-python/METplotpy/"

#
# Update the OS, as needed
#
RUN apt update && apt -y upgrade

#
# Clone the METviewer repository
#
RUN echo "Checking out METviewer ${METVIEWER_GIT_NAME} from ${METVIEWER_GIT_URL}"
RUN git clone --branch ${METVIEWER_GIT_NAME} ${METVIEWER_GIT_URL} /METviewer

#
# Configure METviewer
#
RUN echo "Configuring METviewer" \
 && cd /METviewer \
 && cat webapp/metviewer/WEB-INF/classes/build.properties | \
    sed -r 's%db.host=.*%db.host=mysql_mv%g' | \
    sed -r 's%db.user=.*%db.user=root%g' | \
    sed -r 's%db.password=.*%db.password=mvuser%g' | \
    sed -r 's%db.management.system=.*%db.management.system=mysql%g' | \
    sed -r 's%output.dir=.*%output.dir=/opt/tomcat/webapps/metviewer_output/%g' | \
    sed -r 's%webapps.dir=.*%webapps.dir=/opt/tomcat/webapps/metviewer/%g' | \
    sed -r 's%url.output=.*%url.output=http://localhost:8080/metviewer_output/%g' | \
    sed -r 's%python.env=.*%python.env=/usr/local%g' | \
    sed -r 's%metcalcpy.home=.*%metcalcpy.home=/METviewer-python/METcalcpy/%g' | \
    sed -r 's%metplotpy.home=.*%metplotpy.home=/METviewer-python/METplotpy/%g' \
    > build.properties

#
# Run the build script
#
RUN cd /METviewer \
 && internal/scripts/docker/build_metviewer_docker.sh

# Explicitly specify the shell to indicate that using the SHELL
# instruction is a conscious decision: 
# https://docs.docker.com/reference/build-checks/json-args-recommended/
SHELL ["/bin/sh", "-c"]
ENTRYPOINT ${CATALINA_HOME}/bin/startup.sh && /bin/bash
CMD ["true"]


#
# Get Chrome
#
# install wget
RUN apt -f install -y
RUN apt update
RUN apt install -y wget

# Install Chrome
RUN wget -q  https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
RUN apt install -y ./google-chrome-stable_current_amd64.deb

RUN ls -la /usr/bin/google-chrome* && \
      google-chrome --version

# Set the PRE_LOAD_CHROME env variable to True to prevent invoking get_chrome_sync() from METplotpy 
ENV PRE_LOAD_CHROME='False'
RUN echo "INFO: environment PRE_LOAD_CHROME set to ${PRE_LOAD_CHROME} ";


# Ensure correct Plotly and kaleido are installed
# based on requirements.txt file
RUN pip install PLOTLY==6.1.1
RUN pip install kaleido==1.0.0
COPY . .

docker-compose.yml

services:
  db:
      image: mariadb:10.5.8
      container_name: mysql_mv
      user: "mysql:mysql"
      ports:
          - "6603:3306"
      volumes:
          - ${MYSQL_DIR}:/var/lib/mysql

      environment:
          MYSQL_ROOT_PASSWORD: mvuser
      tty: true
  #
  metviewer:
      image: ${METVIEWER_DOCKER_IMAGE}
      container_name: metviewer_1
      ports:
      - "8080:8080"
      volumes:
        - ${METVIEWER_DATA}:/data
        - ${METVIEWER_DIR}/metviewer_output/xml:/opt/tomcat/webapps/metviewer_output/xml
        - ${METVIEWER_DIR}/metviewer_output/plots:/opt/tomcat/webapps/metviewer_output/plots
        - ${METVIEWER_DIR}/metviewer_output/data:/opt/tomcat/webapps/metviewer_output/data
        - ${METVIEWER_DIR}/metviewer_output/scripts:/opt/tomcat/webapps/metviewer_output/scripts
      links:
        - db:mysql_mv
      tty: true

Thank you for your assistance.

6

I managed to reproduce my error message using your Dockerfile and docker-compose.yml:

because I am using an M2 chip on my Mac, I built this way:

docker build --platform linux/amd64 -t .

And I modified the docker-compose.yml by adding the following:
platform: linux/amd64

Upon inspection of my container log (via Docker Desktop), I can replicate the same error I observe in my plotting (via Java Web app and command line). So perhaps this is an issue with amd64 running on arm???

truncated error message:

ile “/usr/local/lib/python3.12/site-packages/kaleido/kaleido.py”, line 332, in calc_fig

data = await asyncio.wait_for(

^^^^^^^^^^^^^^^^^^^^^^^

File “/usr/local/lib/python3.12/asyncio/tasks.py”, line 520, in wait_for

return await fut

^^^^^^^^^

File “/usr/local/lib/python3.12/site-packages/kaleido/_kaleido_tab.py”, line 323, in _calc_fig

raise e

kaleido._kaleido_tab.JavascriptError: {‘result’: {‘type’: ‘object’, ‘subtype’: ‘error’, ‘className’: ‘ReferenceError’, ‘description’: ‘ReferenceError: Plotly is not defined\n at Object.render [as plotly] (file:///usr/local/lib/python3.12/site-packages/kaleido/vendor/kaleido_scopes.js:3021:18)\n at :1:48’, ‘objectId’: ‘-2948903285713425727.1.2’}, ‘exceptionDetails’: {‘exceptionId’: 2, ‘text’: ‘Uncaught’, ‘lineNumber’: 3020, ‘columnNumber’: 17, ‘scriptId’: ‘8’, 'stac

7

I actually can’t give you an answer. Let my try to ask around.

8

@AIMPED thank you for supporting @mwin,

@mwin , this is a question I have to ask my colleagues. We’ll get back from you as soon as we have a good answer.

9

Thank you for all your assistance. I borrowed an older Mac with an Intel chip and I can successfully generate plots when running in a Docker container. So it appears that the errors emanating from _kaleido_tab.py are linked to running on Macs with M2 chipset. In the meantime, our IT is setting up Docker on linux and I will test in that environment, hopefully the error does not occur in that environment.

10

We no longer require assistance with this issue. We migrated to Matplotlib. Thanks to all who provided assistance.