插件 〉Grafana 图像渲染器

开发者

Grafana Labs

注册以接收产品新闻和更新

最新网络研讨会

Intro to Application and Frontend Observability with Grafana Cloud
Grafana Cloud 应用程序和前端可观测性简介
Getting started with managing your metrics, logs, and traces using Grafana
开始使用 Grafana 管理您的指标、日志和追踪
Intro to Kubernetes monitoring in Grafana Cloud
Grafana Cloud Kubernetes 监控简介
渲染器
grafana

Grafana 图像渲染器

  • 概述
  • 安装
  • 更新日志
  • 相关内容

一个 Grafana 后端插件，使用无头浏览器 (Chromium) 将面板和仪表盘渲染为 PNG 图像。

要求

支持的操作系统

  • Linux (x64)
  • Windows (x64)
  • Mac OS X (x64)

依赖项

此插件打包为一个单独的可执行文件，其中包含 Node.js 运行时和 Chromium 浏览器。这意味着您无需在系统中安装 Node.js 和 Chromium 即可使插件正常工作。

但是，Chromium 浏览器依赖于某些库。如果您的系统中没有安装所有这些库，尝试渲染图像时可能会看到一些错误。有关更多信息，包括故障排除帮助，请参阅Grafana 图像渲染文档。

内存要求

渲染图像需要大量内存，主要是因为 Grafana 在后台创建浏览器实例来执行实际渲染。我们建议在渲染图像的系统上至少有 16GB 可用内存。

并行渲染多个图像需要更大的内存占用。您可以使用远程渲染服务在远程系统上渲染图像，这样就不会影响本地系统资源。

插件安装

您可以使用 Grafana CLI（推荐方式）或 Grafana Docker 镜像安装插件。

Grafana CLI（推荐）

grafana-cli plugins install grafana-image-renderer

Grafana Docker 镜像

此插件与当前的 Grafana Docker 镜像不兼容，并且需要额外的系统级依赖项。我们建议设置另一个用于渲染的 Docker 容器并使用远程渲染。有关说明，请参阅在 Docker 中运行。

如果您仍然想使用 Grafana Docker 镜像安装插件，请参阅Grafana Docker 文档中关于构建自定义 Grafana 镜像的说明。

远程渲染服务安装

注意：需要互联网连接。

您可以将此插件作为远程 HTTP 渲染服务运行。在这种设置下，Grafana 通过向远程渲染服务发出 HTTP 请求来渲染图像，远程渲染服务继而渲染图像并在 HTTP 响应中将其返回给 Grafana。

您可以使用 Docker 或作为独立的 Node.js 应用程序运行远程 HTTP 渲染服务。

在 Docker 中运行

Grafana Docker 镜像发布在 Docker Hub 上。

以下示例展示了如何使用 Docker Compose 在两个独立的 Docker 容器中运行 Grafana 和远程 HTTP 渲染服务。

  1. 创建包含以下内容的 docker-compose.yml 文件

    version: '2'

    services:
grafana:
image: grafana/grafana:latest
ports:
- ‘3000:3000’
environment:
GF_RENDERING_SERVER_URL: http://renderer:8081/render
GF_RENDERING_CALLBACK_URL: http://grafana:3000/
GF_LOG_FILTERS: rendering:debug
renderer:
image: grafana/grafana-image-renderer:latest
ports:
- 8081

  2. 接下来，运行 docker compose。

    docker-compose up

作为独立的 Node.js 应用程序运行

以下示例介绍了如何将远程 HTTP 渲染服务构建并运行为独立的 Node.js 应用程序，并适当配置 Grafana。

  1. 克隆Grafana 图像渲染器插件 Git 仓库。

  2. 安装依赖项并构建

    yarn install --pure-lockfile
yarn run build

  3. 运行服务器

    • 使用默认配置

      node build/app.js server

    • 使用自定义配置

      node build/app.js server --config=dev.json

    • 使用环境变量

      HTTP_PORT=8085 LOG_LEVEL=debug node build/app.js server

  4. 更新 Grafana 配置

    [rendering]
server_url = https://:8081/render
callback_url = https://:3000/

  5. 重启 Grafana。

安全性

对渲染端点的访问仅限于提供身份验证令牌的请求。此令牌应在 Grafana 配置文件和渲染器配置文件中进行配置。当您在远程渲染模式下运行插件时，此令牌非常重要，可避免未经授权的文件泄露（请参阅 CVE-2022-31176）。

请参阅Grafana 图像渲染文档配置此秘密令牌。默认值 - 在您开始使用时已在 Grafana 和图像渲染器上配置，但我们强烈建议您将其更新为更安全的值。

配置

有关可用配置设置，请参阅Grafana 图像渲染文档。

故障排除

有关故障排除帮助，请参阅Grafana 图像渲染故障排除文档。

测试

为了运行图像渲染器自动化测试套件，您需要从根文件夹运行以下命令

yarn test

这将在 Docker 中启动一个 Grafana 实例，然后运行测试套件。

注意

如果参考图像文件（位于 /tests/testdata 中）发生了一些预期更改，请运行 yarn test-update 并推送更新后的参考文件。

如果测试失败并且您想查看获得的图像与参考图像之间的差异，请运行 yarn test-diff。这将在 /tests/testdata 文件夹中生成包含差异的图像（名为 diff_<test case>.png）。

修复 Drone 问题

如果测试在本地环境成功但在 Drone 中失败。您可以按照这些步骤在类似于 Drone pipeline 的环境中运行测试。这会将您本地的 grafana-image-renderer 仓库文件挂载到 Docker 镜像中，因此 Docker 镜像中发生的任何更改都将在您的本地环境可用。这使您可以在 Docker 中运行 yarn test-diff 和 yarn test-update 并在本地查看结果。

  1. 在 Docker 中运行 Drone 环境
cd ./devenv/docker/drone
docker-compose up
  1. 在 drone-docker-puppeteer 容器内打开终端并运行以下命令
cd /drone/src
PUPPETEER_CACHE_DIR=/drone/src/cache yarn install --frozen-lockfile --no-progress
PUPPETEER_CACHE_DIR=/drone/src/cache CI=true yarn test-ci

注意：测试在 Docker 容器中可能需要更长时间。如果遇到超时问题，可以使用 --testTimeout option 选项运行测试命令

PUPPETEER_CACHE_DIR=/drone/src/cache CI=true yarn test-ci --testTimeout=10000
Grafana 图像渲染器已无缝集成到 Grafana Cloud 中，无需手动安装。

有关更多信息，请访问关于插件安装的文档。

3.12.5 (2025-04-22)

3.12.4 (2025-03-27)

3.12.3 (2025-03-12)

  • 3.12.2 因 Image Render: 支持追踪 #586 而无法工作。回退 "Image Render: 支持追踪 (#586)" #609, lucychen-grafana

3.12.2 (2025-03-06) (已弃用)

3.12.1 (2025-02-10)

3.12.0 (2025-01-14)

3.11.6 (2024-10-17)

3.11.5 (2024-09-12)

3.11.4 (2024-08-30)

3.11.3 (2024-08-13)

  • 整页图像：修复开启 scenes 时空白页面的截图问题 #554, juanicabanas

3.11.2 (2024-08-08)

3.11.1 (2024-07-15)

3.11.0 (2024-06-13)

3.10.5 (2024-05-23)

3.10.4 (2024-05-06)

3.10.3 (2024-04-16)

3.10.2 (2024-04-08)

3.10.1 (2024-03-07)

3.10.0 (2024-02-20)

3.9.1 (2024-01-29)

3.9.0 (2023-12-04)

3.8.4 (2023-10-17)

3.8.3 (2023-09-29)

3.8.2 (2023-09-21)

  • 浏览器：回退到旧的无头模式以修复与 Kubernetes 的使用问题 #459, AgnesToulet

3.8.1 (2023-09-18)

3.8.0 (2023-08-22)

3.7.2 (2023-07-27)

3.7.1 (2023-05-15)

3.7.0 (2023-04-17)

3.6.4 (2023-02-10)

3.6.3 (2023-01-11)

3.6.2 (2022-10-22)

  • 将与 JSHandle@object 相关的错误记录为调试日志 #376, spinillos
  • 日常任务：更新 Puppeteer 已弃用函数 #375, spinillos
  • 修复：使用 _client() 更新 _client 以避免在创建 CSV 时失败 #372, spinillos
  • 日常任务：更新所有依赖项 #369, DanCech

3.6.1 (2022-08-30)

3.6.0 (2022-08-16)

3.5.0 (2022-07-18)

3.4.2 (2022-03-23)

  • 安全性：升级依赖项 #337, AgnesToulet
  • 修复：默认将 captureBeyondViewport 设置为 false 以修复旧面板渲染问题 #335, AgnesToulet

3.4.1 (2022-02-23)

  • 修复：将 sharp 替换为 jimp 以解决安装原生依赖项的问题 #325, ArturWierzbicki

3.4.0 (2022-02-17)

3.3.0 (2021-11-18)

3.2.1 (2021-10-07)

3.2.0 (2021-09-17)

3.1.0 (2021-09-01)

重要变更

默认的 Chromium 标志已更新为包含 --disable-gpu，因为它修复了使用默认渲染模式时的内存泄露问题。如果您不想使用此标志，则需要更新您的服务配置，可以通过服务配置文件、环境变量或Grafana 配置文件（如果您使用插件模式）进行更新。

3.0.1 (2021-06-10)

  • 浏览器：修复指定时区查询参数时面板时区问题 #224, Bujupah
  • Docker: 修复 Docker 镜像的版本端点 #248, mbentley

3.0.0 (2021-06-07)

3.0.0-beta2 (2021-05-26)

  • 移除对插件 V1 协议的支持 #233, AgnesToulet
  • 浏览器：修复当 tmp 文件夹与目标文件路径不在同一设备时移动 CSV 文件的问题 #232, AgnesToulet
  • 日常任务：升级 grabpl 版本 #231, AgnesToulet

3.0.0-beta1 (2021-05-19)

2.1.1 (2021-05-18)

2.1.0 (2021-05-11)

  • 日常任务/安全性：升级依赖项并将 Node 更新到 LTS (14.16.1) #218, AgnesToulet

2.0.1 (2021-01-26)

  • 浏览器：使用 timeout 参数进行初始导航到正在渲染的仪表盘 #171,

2.0.0 (2020-05-16)

  • 插件：迁移到 @grpc/grpc-js 以解决禁用 IPv6 时的问题 #135, aknuds1
  • 添加对新 Grafana 后端插件系统的支持 #128, marefr
  • 浏览器：添加设置视口设备比例因子的支持 #128, marefr
  • 浏览器：添加附加 Accept-Language 头部以支持按照 Grafana 用户区域设置渲染的功能 #128, marefr
  • 浏览器：如果 URL 具有 socket 协议，则渲染失败 #127, aknuds1
  • 日常任务：升级 typescript 依赖项 #129, marefr

2.0.0-beta1 (2020-04-22)

  • 添加对新 Grafana 后端插件系统的支持 #128, marefr
  • 浏览器：添加设置视口设备比例因子的支持 #128, marefr
  • 浏览器：添加附加 Accept-Language 头部以支持按照 Grafana 用户区域设置渲染的功能 #128, marefr
  • 浏览器：如果 URL 具有 socket 协议，则渲染失败 #127, aknuds1
  • 日常任务：升级 typescript 依赖项 #129, marefr

1.0.12 (2020-03-31)

  • 远程渲染：向客户端提供文件后删除临时文件 #120, marefr
  • 远程渲染：更多配置选项 #123, marefr

1.0.12-beta1 (2020-03-30)

1.0.11 (2020-03-20)

  • 渲染：添加使用环境变量启用详细日志记录的支持 #105, marefr
  • 渲染：修复渲染时面板标题不应获得焦点的问题 #114, AgnesToulet
  • 安全性：将 minimist 依赖项升级到 v1.2.5 #118, marefr

1.0.10 (2020-02-18)

  • 插件：修复无法在 Windows 上启动 Grafana 的问题（版本 1.0.8 和 1.0.9） #103, marefr

1.0.9 (2020-01-30)

  • 远程渲染：改进错误处理、日志记录和指标 #92, marefr
    • 服务：不吞噬异常并修复参数日志记录
    • 指标：当客户端关闭连接时使用状态码 499
    • Docker: 设置 NODE_ENV=production
    • 更改请求日志记录，状态码 < 400 时使用 debug 级别，状态码 >= 400 时使用 error 级别
  • 插件：添加图标 #95, marefr

1.0.8 (2020-01-20)

  • 构建：将 Node.js 要求升级到 LTS (v12) #57, marefr
  • Docker: 添加 unifont 字体以支持渲染其他语言，如中文/日文 #75, okhowang
  • 订阅页面事件以捕获来自浏览器的错误 #88, marefr
  • 插件：默认自动分配 grpc 端口 #87, marefr
  • 插件：支持通过环境变量配置默认时区 #86, marefr
  • 远程渲染：支持通过配置文件和环境变量配置默认时区 #86, marefr
  • 远程渲染：支持通过配置文件和环境变量配置 HTTP 主机和端口 #40, marefr
  • 远程渲染：支持从文件读取配置 #73, marefr
  • 远程渲染：收集并暴露 Prometheus 指标 #71, marefr

重大变更

  • 插件现在自动分配未使用的 gPRC 端口。之前使用的是端口 50059。您可以使用 GF_RENDERER_PLUGIN_GRPC_PORT 环境变量来更改此设置。

1.0.8-beta1 (2019-12-17)

  • 远程渲染：收集并暴露 Prometheus 指标 #71, marefr
  • 构建：将 Node.js 要求升级到 LTS (v12) #57, marefr

1.0.7 (2019-12-03)

  • 在使用环境变量 GF_RENDERER_PLUGIN_IGNORE_HTTPS_ERRORS 和/或 IGNORE_HTTPS_ERRORS 覆盖以跳过 https 错误时，向 Chromium 提供正确命名的配置参数 #62, marefr

1.0.6 (2019-11-25)

  • 在渲染之前等待所有网络连接空闲 #24, d1ff
  • 支持使用环境变量忽略 https 错误 #59, marefr
  • Docker: 更新依赖项以移除漏洞 #53, marefr
  • 修复日志语句中的拼写错误 #39, ankon
  • 更新文档

1.0.5 (2019-09-11)

  • 在发布构件中包含 md5 校验和

1.0.4 (2019-09-11)

  • 更新 readme 和 docs

1.0.3 (2019-09-10)

  • 自动化 docker 发布

1.0.2 (2019-09-10)

  • 不要在归档（zip）文件中包含 dist 目录

1.0.1 (2019-09-09)

  • 将 docker 基础镜像从 node:10 切换到 node:alpine-10 #36, marefr
  • 更新了面板渲染等待函数以考虑 Grafana 版本 6 #26, bmichaelis
  • 更新依赖项

1.0.0 (2019-08-16)

首次发布，包含可供下载的预构建二进制文件。目前，这些二进制文件本身应被视为 alpha 版本，需要进一步测试。

链接图标
文档
自定义插件页面的导航位置
链接图标
文档
使用 AngularJS 的插件
链接图标
文档
监控图像渲染器
链接图标
文档
图像渲染故障排除
博客文章图标
博客文章
视频：如何开始使用 MongoDB 和 Grafana
博客文章图标
博客文章
介绍全新改进的 Grafana BigQuery 插件
博客文章图标
博客文章
使用 Grafana、Databricks 和 Sqlyze 插件监控废水中的 COVID-19 病毒水平
博客文章图标
博客文章
视频：Grafana Enterprise 的 New Relic 数据源插件的 3 大功能
博客文章图标
博客文章
Grafana Cloud 的合成监控插件中的 traceroute 如何帮助网络故障排除
博客文章图标
博客文章
视频：如何在 Grafana 中构建 Prometheus 查询
博客文章图标
博客文章
视频：如何在 Grafana 中设置 Prometheus 数据源
博客文章图标
博客文章
不要错过关于 Grafana Tempo、Grafana Enterprise Traces 和新 Sentry 插件的网络研讨会
博客文章图标
博客文章
Grafana 2021：年度回顾
博客文章图标
博客文章
使用新的 Amazon Redshift 数据源插件在 Grafana 中监控您的所有 Redshift 集群
博客文章图标
博客文章
介绍 Grafana 的 Sentry 数据源插件