WebSocket connection failed when using a reverse proxy like nginx

Hey there!
I’m running Grafana 8.1.2 behind a nginx reverse proxy, configured as shown here.

The website is working correctly, I can create users, add panels, dashboards, data sources, etc, but if I try to go on any dashboard, I get those errors in the top right corner:

Templating [job]
Error updating options: Cannot read property 'result' of undefined

Templating [instance]
Error updating options: Cannot read property 'result' of undefined

Templating [world]
Error updating options: Cannot read property 'result' of undefined

and when I check the console to see what’s happening, I get this error WebSocket connection to 'wss://website.tld/api/live/ws' failed.
If I check my Grafana server logs, I see this error:

t=2021-08-21T13:36:47+0200 lvl=info msg="Request Completed" logger=context userId=1 orgId=1 uname=admin method=GET path=//ws status=404 remote_addr=IP time_ms=2 size=33010 referer=

Here are my configurations:

  • Grafana:
[server]
# The ip address to bind to, empty will bind to all interfaces
http_addr = localhost

# The public facing domain name used to access grafana from a browser
domain = website.tld
  • Nginx:
# this is required to proxy Grafana Live WebSocket connections.
map $http_upgrade $connection_upgrade {
  default upgrade;
  '' close;
}

server {
  server_name website.tld;
  root /usr/share/nginx/html;
  index index.html index.htm;

  location / {
    proxy_pass http://grafana.staged-by-discourse.com/;
  }

  # Proxy Grafana Live WebSocket connections.
  location /api/live {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $http_host;
    proxy_pass http://grafana.staged-by-discourse.com/;
  }


    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/website.tld/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/website.tld/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = website.tld) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

  listen 80;
  server_name website.tld;
    return 404; # managed by Certbot
}

How can I fix this problem?

This topic was automatically closed after 365 days. New replies are no longer allowed.