Embedding private organisation dashboards on a react app

  • What is your Grafana version?
    Grafana v8.3.6 (bf8766bbf2)
  • Are you using Grafana Cloud or self-hosted Grafana?
    Self-hosted
  • What Grafana version and what operating system are you using?
  • Granafa v8.3.6 (bf8766bbf2)
  • Ubuntu 20.04.2 LTS
  • What are you trying to achieve?
  • We will create organizations on Grafana and all of them will have dashboards, then these dashboards will be embedded in another platform (but we can not embed just dashboard without the navigation, etc… ) on our platform we will get dashboards and loop them to get their panels and embed panel by panel to create the dashboard in our platform
    But organizations will be private so we will have each org. API Key but we can’t use this API key in an iframe embed URL. So somehow we want to get panels from private organizations.
  • How are you trying to achieve it?
  • Grafana itself it’s working behind an Nginx reverse proxy
  • The idea we came up is to create a API endpoint in our backend which proxies it to the grafana adding an API key as a header

For the example lets say we save token from the first request which comes from front-end (just for the example we are still trying to run this example then will be fixed this with token) and send this token with rest of the queries too

let token = '';
  const grafanaProxyMiddleware = createProxyMiddleware({
    target: `http://xxxxxxxxx.xxx`,
    changeOrigin: true,
    secure: false,
    ws: true,
    headers: {
      Authorization: token,
    },

    onProxyReqWs: (proxyReq, req, socket) => {
      socket.on('error', function (error) {
        console.warn('Websockets error.', error);
      });
    },
    onProxyReq: (proxyReq, req, socket) => {
      if (req.query.token) token = req.query.token;
    },
    onError: (err, req, res, target) => {
      console.log(err);
      res.writeHead(500, { 'Content-Type': 'text/plain' });
      res.end('Something went wrong.');
    },
  });

  app.use('/*', grafanaProxyMiddleware);
  • What happened?
  • On the UI it start to visualise the graphs but does not has data and we are getting the next errors
[HPM] Upgrading to WebSocket
Websockets error. Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:209:20) {
  errno: -54,
  code: 'ECONNRESET',
  syscall: 'read'
}
[HPM] Upgrading to WebSocket
Websockets error. Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:209:20) {
  errno: -54,
  code: 'ECONNRESET',
  syscall: 'read'
}
[HPM] Upgrading to WebSocket
Websockets error. Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:209:20) {
  errno: -54,
  code: 'ECONNRESET',
  syscall: 'read'
}
[HPM] Upgrading to WebSocket
Websockets error. Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:209:20) {
  errno: -54,
  code: 'ECONNRESET',
  syscall: 'read'
}
[HPM] Upgrading to WebSocket
Websockets error. Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:209:20) {
  errno: -54,
  code: 'ECONNRESET',
  syscall: 'read'
}
[HPM] Upgrading to WebSocket
[HPM] Upgrading to WebSocket
[HPM] Upgrading to WebSocket
[HPM] Upgrading to WebSocket
  • What did you expect to happen?
  • We are expecting to visualize graphs and data
  • Did you follow any online instructions? If so, what is the URL?

This is how it stays on UI and continues to log errors shown above