Notifications in slack doesn't include images

Hello everyone!

I want slack notifications include images of panel

I’m using v8.3.0 Grafana version

I start it with prometheus and grafana-image-renderer in docker-compose
docker-compose.yml:

version: '2'

services:
  grafana:
    container_name: grafana
    image: grafana/grafana:main
    ports:
      - '3000:3000'
    environment:
      GF_RENDERING_SERVER_URL: "http://grafanarender:8081/render"
      GF_RENDERING_CALLBACK_URL: "http://grafana:3000/"
      GF_LOG_FILTERS: "rendering:debug"
      GF_INSTALL_PLUGINS: "grafana-clock-panel,grafana-simple-json-datasource,grafana-image-renderer"
    volumes:
      - /home/ivan2g/workspace/test_grafana_renderer/storage/:/var/lib/grafana
  renderer:
    container_name: grafanarender
    image: rebuild_grafanarender
    ports:
      - '8081:8081'
    volumes:
      - /home/ivan2g/workspace/test_grafana_renderer/config.json:/usr/src/app/config.json
  prometheus:
    container_name: prometheus
    image: prom/prometheus
    ports:
      - '9090:9090'

I rebuild grafana-image-renderer with
FROM node:14.1-alpine AS base
instead of node:14-alpine

and adding
RUN npm install -g npm-install-peers
after stage
RUN yarn install --pure-lockfile

here grafana-image-renderer config.json:

{
  "service": {
    "host": "0.0.0.0",
    "port": 8081,

    "metrics": {
      "enabled": true,
      "collectDefaultMetrics": true,
      "requestDurationBuckets": [1, 5, 7, 9, 11, 13, 15, 20, 30]
    },

    "logging": {
      "level": "debug",
      "console": {
        "json": true,
        "colorize": false
      }
    }
  },
  "rendering": {
    "chromeBin": "/usr/bin/chromium-browser",
    "args": ["--no-sandbox","--disable-setuid-sandbox","--disable-gpu","--disable-dev-shm-usage","--disable-accelerated-2d-canvas"],
    "ignoresHttpsErrors": true,

    "timezone": null,
    "acceptLanguage": null,
    "width": 1000,
    "height": 500,
    "deviceScaleFactor": 1,
    "maxWidth": 3080,
    "maxHeight": 3000,
    "maxDeviceScaleFactor": 4,

    "mode": "default",
    "clustering": {
      "mode": "default",
      "maxConcurrency": 5
    },

    "verboseLogging": true,
    "dumpio": true,
    "timingMetrics": true
  }
}

I create and add all permissions to slack app
Снимок экрана от 2021-09-27 22-37-50

I use it webhook url in grafana notification channels settings and also set “include image”

There is no error logs in grafana container:

t=2021-09-27T18:58:01+0000 lvl=info msg=Rendering logger=rendering renderer=http path="d-solo/HXvnixNnk/new-dashboard-copy?orgId=1&panelId=2"
t=2021-09-27T18:58:01+0000 lvl=dbug msg="calling remote rendering service" logger=rendering renderer=http url="http://grafanarender:8081/render?deviceScaleFactor=1.000000&domain=grafana&encoding=&height=500&renderKey=oyFMoq0WSc7infFO5peRRtXnMhmF2S4Q&timeout=15&timezone=&url=http%3A%2F%2Fgrafana%3A3000%2Fd-solo%2FHXvnixNnk%2Fnew-dashboard-copy%3ForgId%3D1%26panelId%3D2%26render%3D1&width=1000"
t=2021-09-27T18:58:03+0000 lvl=info msg="Request Completed" logger=context userId=0 orgId=1 uname= method=GET path=/api/live/ws status=0 remote_addr=172.19.0.2 time_ms=0 size=0 referer=
t=2021-09-27T18:58:04+0000 lvl=info msg="Executing slack notification" logger=alerting.notifier.slack ruleId=3 notification=slack

and here grafana-image-renderer container logs:

DevTools listening on ws://127.0.0.1:36959/devtools/browser/ed37997c-d18d-48c2-aced-485bfc3887da
[0927/185802.031213:ERROR:gl_implementation.cc(403)] Failed to load /usr/lib/chromium/swiftshader/libGLESv2.so: Error loading shared library /usr/lib/chromium/swiftshader/libGLESv2.so: No such file or directory
[0927/185802.060518:ERROR:viz_main_impl.cc(162)] Exiting GPU process due to errors during initialization
[0927/185802.065654:WARNING:vaapi_wrapper.cc(589)] VAAPI video acceleration not available for disabled
[0927/185802.065767:ERROR:gpu_init.cc(441)] Passthrough is not supported, GL is disabled
{"width":"1000","height":"500","deviceScaleFactor":"1","level":"debug","message":"Setting viewport for page"}
{"renderKey":"oyFMoq0WSc7infFO5peRRtXnMhmF2S4Q","domain":"grafana","level":"debug","message":"Setting cookie for page"}
{"x":1000,"y":500,"level":"debug","message":"Moving mouse on page"}
{"url":"http://grafana:3000/d-solo/HXvnixNnk/new-dashboard-copy?orgId=1&panelId=2&render=1","level":"debug","message":"Navigating and waiting for all network requests to finish"}
{"url":"http://grafana:3000/d-solo/HXvnixNnk/new-dashboard-copy?orgId=1&panelId=2&render=1","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/d-solo/HXvnixNnk/new-dashboard-copy?orgId=1&panelId=2&render=1","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/public/build/grafana.dark.94d23724fc18ae1de4ed.css","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/build/runtime.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/build/6695.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/build/1762.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/build/8966.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/build/app.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/public/build/runtime.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/public/build/grafana.dark.94d23724fc18ae1de4ed.css","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/public/build/6695.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/public/build/1762.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/public/img/grafana_icon.svg","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/fonts/roboto/CWB0XYA8bzo0kSThX0UTuA.woff2","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/build/app.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/public/img/grafana_icon.svg","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/public/fonts/roboto/CWB0XYA8bzo0kSThX0UTuA.woff2","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/public/build/8966.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request finished"}
[0927/185803.194847:INFO:CONSOLE(2)] "centrifuge config [object Object]", source: http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js (2)
{"msg":"centrifuge config JSHandle@object","url":"http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js","line":1,"column":592073,"level":"debug","message":"Browser console debug"}
{"msg":"client will connect to websocket endpoint","url":"http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js","line":1,"column":592073,"level":"debug","message":"Browser console debug"}
{"msg":"start connecting","url":"http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js","line":1,"column":592073,"level":"debug","message":"Browser console debug"}
{"msg":"Status disconnected -> connecting","url":"http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js","line":1,"column":592073,"level":"debug","message":"Browser console debug"}
[0927/185803.195637:INFO:CONSOLE(2)] "client will connect to websocket endpoint", source: http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js (2)
[0927/185803.196342:INFO:CONSOLE(2)] "start connecting", source: http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js (2)
[0927/185803.197010:INFO:CONSOLE(2)] "Status disconnected -> connecting", source: http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js (2)
{"url":"http://grafana:3000/public/build/5042.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/build/SoloPanelPage.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/build/5042.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request finished"}
[0927/185803.248869:INFO:CONSOLE(2)] "reset retries count to 0", source: http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js (2)
{"msg":"reset retries count to 0","url":"http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js","line":1,"column":592073,"level":"debug","message":"Browser console debug"}
[0927/185803.249051:INFO:CONSOLE(2)] "Status connecting -> connected", source: http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js (2)
{"msg":"Status connecting -> connected","url":"http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js","line":1,"column":592073,"level":"debug","message":"Browser console debug"}
{"msg":"no private channels found, no need to make request","url":"http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js","line":1,"column":592073,"level":"debug","message":"Browser console debug"}
[0927/185803.249520:INFO:CONSOLE(2)] "no private channels found, no need to make request", source: http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js (2)
{"url":"http://grafana:3000/public/build/SoloPanelPage.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/api/dashboards/uid/HXvnixNnk","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/api/dashboards/uid/HXvnixNnk","method":"GET","level":"debug","message":"Browser request finished"}
[0927/185803.293617:INFO:CONSOLE(2)] "subscribing on 1/grafana/dashboard/uid/HXvnixNnk", source: http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js (2)
{"url":"http://grafana:3000/api/alerts/states-for-dashboard?dashboardId=1","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/build/grafanaPlugin.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request"}
{"msg":"subscribing on 1/grafana/dashboard/uid/HXvnixNnk","url":"http://grafana:3000/public/build/3233.94d23724fc18ae1de4ed.js","line":1,"column":592073,"level":"debug","message":"Browser console debug"}
{"url":"http://grafana:3000/public/build/159.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/build/prometheusPlugin.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/api/alerts/states-for-dashboard?dashboardId=1","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/public/build/grafanaPlugin.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/public/build/159.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/api/annotations?from=1632768783279&to=1632769083279&limit=100&matchAny=false&dashboardId=1","method":"GET","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/public/build/prometheusPlugin.94d23724fc18ae1de4ed.js","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/api/datasources/proxy/1/api/v1/query_exemplars","method":"POST","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/api/datasources/proxy/1/api/v1/query_range","method":"POST","level":"debug","message":"Browser request"}
{"url":"http://grafana:3000/api/annotations?from=1632768783279&to=1632769083279&limit=100&matchAny=false&dashboardId=1","method":"GET","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/api/datasources/proxy/1/api/v1/query_exemplars","method":"POST","level":"debug","message":"Browser request finished"}
{"url":"http://grafana:3000/api/datasources/proxy/1/api/v1/query_range","method":"POST","level":"debug","message":"Browser request finished"}
{"timeout":"15s","level":"debug","message":"Waiting for dashboard/panel to load"}
{"filePath":"/tmp/ca58d4cc.png","level":"debug","message":"Taking screenshot"}
{"file":"/tmp/ca58d4cc.png","level":"debug","message":"Deleting temporary file"}
{"message":"172.19.0.3 - - [27/Sep/2021:18:58:04 +0000] \"GET /render?deviceScaleFactor=1.000000&domain=grafana&encoding=&height=500&renderKey=oyFMoq0WSc7infFO5peRRtXnMhmF2S4Q&timeout=15&timezone=&url=http%3A%2F%2Fgrafana%3A3000%2Fd-solo%2FHXvnixNnk%2Fnew-dashboard-copy%3ForgId%3D1%26panelId%3D2%26render%3D1&width=1000 HTTP/1.1\" 200 24413 \"-\" \"Grafana/8.3.0-35166pre\"\n","level":"debug"}
{"url":"http://grafana:3000/d-solo/HXvnixNnk/new-dashboard-copy?orgId=1&panelId=2&render=1","level":"debug","message":"Connection closed"}

there are here some errors, but i can see screenshots in grafana container path: /var/lib/grafana/png/

As a result in slack notifications there are no images

Please help, may be i miss something

I’m sorry we’ve made you jump through so many hoops. I also appreciate your thoroughness with the issue. Grafana Alerting doesn’t currently include an image/visualization as the upgraded alerting system is no longer driven by association to dashboards and panels.

We will update our documentation to make this clear.

We also, have an open feature request here to bring back part of this functionality: Add "include image" option into ngalert · Discussion #38030 · grafana/grafana · GitHub - please vote and add your voice!

1 Like