Hello,
I’m currently facing an issue with Penpot where the WebSocket connection fails with the following error in the browser console:
“WebSocket connection to ‘wss://my-domain/ws/notifications?session-id=81c469c4-c99b-803b-8005-c331bd363ad9’ failed: Invalid frame header”
This happens right after the login process, and the UI seems to hang or behave unexpectedly afterward.
The instance is self-hosted, deployed behind a reverse proxy (Nginx), with HTTPS enabled via a valid certificate. I’ve verified that the backend is running correctly and the WebSocket endpoint is reachable at the expected URL. Other functionalities appear to be working fine.
Has anyone encountered this kind of issue? Could it be related to reverse proxy configuration, WebSocket handling, or some misalignment in the backend/frontend versions?
Any pointers or guidance would be very helpful. Thanks in advance!
Yes, Penpot uses WebSocket connections for real-time features. When a user opens a file, a persistent websocket is opened with the backend and associated to the file id. This is used to send presence events and receive changes made by other users editing the same file 1.
For Nginx, you need to configure the following in your reverse proxy settings:
location /ws/notifications { proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_pass http://localhost:9001/ws/notifications;}
2
Make sure you also have the basic proxy settings configured:
location / { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Scheme $scheme; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_redirect off; proxy_pass http://localhost:9001/;}
2
Additionally, verify that:
- You have the correct
PENPOT_PUBLIC_URI environment variable set to your domain with HTTPS 3
- The WebSocket endpoint
/ws/notifications is properly configured in your proxy 2
- Your SSL/TLS configuration is properly set up for both HTTP and WebSocket connections 2
The WebSocket connection is essential for Penpot’s real-time collaboration features and presence events 1, so ensuring proper proxy configuration is crucial for functionality.
