Laggy CSS animations on graphical dashboard on electron-reactjs base/Remote Debugging Problem

Hi,

I’m running a dashboard on a electron-reactjs base.
In the dev environment on my macbook there are no problems. When I run it on the RPI the CSS animations are kind of laggy. I’m changing the background images and the switch between them is pretty slow/low on FPS.
Someone knows what the performance problem could be?

Logs depending the CSS animations (I guess)

 main  [55:0628/132726.910257:ERROR:bus.cc(399)] Failed to connect to the bus: Failed to connect to socket /run/dbus/system_bus_socket: No such file or directory
 main  [55:0628/132731.523582:ERROR:bus.cc(399)] Failed to connect to the bus: Failed to connect to socket /run/dbus/system_bus_socket: No such file or directory
 main  [55:0628/132731.524866:ERROR:bus.cc(399)] Failed to connect to the bus: Failed to connect to socket /run/dbus/system_bus_socket: No such file or directory
 main  [55:0628/132731.550134:ERROR:bus.cc(399)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
 main  [55:0628/132731.551817:ERROR:bus.cc(399)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
 main  
 main  DevTools listening on ws://127.0.0.1:9222/devtools/browser/2075b59e-b76d-4307-81f0-b821c2c2b952
 main  [55:0628/132732.098567:ERROR:bus.cc(399)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
 main  listing on 80
 main  [55:0628/132732.170750:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
 main  [91:0628/132733.225186:ERROR:gl_surface_egl.cc(321)] No suitable EGL configs found.
 main  [91:0628/132733.225877:ERROR:gl_context_egl.cc(140)] eglGetConfigAttrib failed with error EGL_BAD_CONFIG
 main  [91:0628/132733.226814:ERROR:gl_surface_egl.cc(321)] No suitable EGL configs found.
 main  [91:0628/132733.227228:ERROR:gl_surface_egl.cc(1110)] eglCreatePbufferSurface failed with error EGL_BAD_CONFIG
 main  [91:0628/132733.227985:ERROR:gpu_info_collector.cc(80)] gl::GLContext::CreateOffscreenGLSurface failed
 main  [91:0628/132733.228970:ERROR:gpu_info_collector.cc(401)] Could not create surface for info collection.
 main  [91:0628/132733.229935:ERROR:gpu_init.cc(88)] CollectGraphicsInfo failed.
 main  [91:0628/132733.296882:ERROR:viz_main_impl.cc(186)] Exiting GPU process due to errors during initialization
 main  [134:0628/132733.492938:WARNING:sandbox_linux.cc(393)] InitializeSandbox() called with multiple threads in process gpu-process.
 main  [134:0628/132733.597606:ERROR:gpu_memory_buffer_support_x11.cc(49)] dri3 extension not supported.
 main  [55:0628/132734.547597:INFO:CONSOLE(2)] "react-index loading", source: file:///usr/src/app/build/static/js/main.cdcde399.js (2)

Plus: I would like to inspect the electron and react instance on the RPI. I activated the remote dev tools, but I can’t connect to it. If someone knows how to remote debug it, please let me know.

Informations to the remote debugging problem:
When the container starting it even says “DevTools listening on ws://127.0.0.1:9222/devtools/browser/453890f6-779b-405a-a5d7-508a698a89e7” in the logs.

dockerfile:

FROM balenalib/%%BALENA_MACHINE_NAME%%-node:14.17-bullseye-build as build

# Install other apt deps
RUN apt-get update && apt-get install -y \
  apt-utils \
  ....

# Set Xorg and FLUXBOX preferences
RUN mkdir ~/.fluxbox
RUN echo "xset s off" > ~/.fluxbox/startup && echo "xserver-command=X -s 0 dpms" >> ~/.fluxbox/startup
RUN echo "#!/bin/bash" > /etc/X11/xinit/xserverrc \
  && echo "" >> /etc/X11/xinit/xserverrc \
  && echo 'exec /usr/bin/X -s 0 dpms -nocursor -nolisten tcp "$@"' >> /etc/X11/xinit/xserverrc

# Move to app dir
WORKDIR /usr/src/app

# Move package.json to filesystem
COPY ./app/package.json ./

# Install npm modules for the application
# Install dev deps so we can build app
RUN JOBS=MAX npm install --unsafe-perm \
	&& npm cache verify && node_modules/.bin/electron-rebuild

# Move app to filesystem
COPY ./app ./

# Build react app
RUN JOBS=MAX npm run build

## uncomment if you want systemd
ENV INITSYSTEM on

# Expose the debugging port
EXPOSE 9222

# Start app
CMD ["bash", "/usr/src/app/start.sh"]

start.sh

#!/bin/bash
export URL_LAUNCHER_NODE=1
export NODE_ENV=production
# By default docker gives us 64MB of shared memory size but to display heavy
# pages we need more.
umount /dev/shm && mount -t tmpfs shm /dev/shm

# using local electron module instead of the global electron lets you
# easily control specific version dependency between your app and electron itself.
# the syntax below starts an X istance with ONLY our electronJS fired up,
# it saves you a LOT of resources avoiding full-desktops envs

rm /tmp/.X0-lock &>/dev/null || true
startx /usr/src/app/node_modules/electron/dist/electron /usr/src/app --no-sandbox --enable-logging --remote-debugging-port=9222

main.js

app.commandLine.appendSwitch("remote-debugging-port", "9222");
// enable touch events if your device supports them
if (electronConfig.URL_LAUNCHER_TOUCH) {
  app.commandLine.appendSwitch("--touch-devices");

SUPERVISOR VERSION: 14.11.2
HOST OS VERSION: balenaOS 2.113.18

Did you configure the service in the docker-compose file to route the port to the hostOS? Otherwise, you’d only be able to access that port from within the container. I’m assuming you are trying to access it externally…

I didn’t route anything else. As far as I know this is the way how it worked the last time (5 years ago).
What exactly do I have to route in the docker file?

Yes, I try to access it from my macbook (Which is in the same network)