如何将 Reactjs 日志和指标推送到 Grafana

Posted 2023-02-16

【中文标题】如何将 Reactjs 日志和指标推送到 Grafana

【英文标题】：How to push Reactjs logs and metrics to Grafana

【发布时间】：2020-11-19 03:22:22

【问题描述】：

背景：

我正在做一个项目，我们在 Java 中设置了一个服务器，而前端我们使用的是 ReactJs。我们的服务器通过他们的推送 API 将所有日志发送到 Loki 端点，并将所有指标发送到 prometheus 推送网关。然后，Grafana 从 Loki 和推送网关中提取这些日志和指标进行显示。

要求：

我想持久化并放置 ReactJs 应用程序日志和指标，以便它们在 grafana 上可见。这将帮助我们在同一个地方查看前端和后端应用程序日志和指标。是否有 免费、开源 javascript 库或框架可以帮助我解决这个问题。我需要编写的代码越少越好。

我之前选择了哨兵，但它不再完全免费了。而且我们不能使用控制台日志，因为它会在浏览器刷新时消失，并且在生产中没有真正的帮助

【参考方案1】：

所以当时我没有找到一个好的库，但我最终能够将日志发送到 loki push 端点。

我尝试将日志直接从前端推送到 loki 推送端点。这给了我一个cors错误。所以我想出了以下步骤来绕过 Loki。

我的解决方法：

设置 nginx 代理服务器。 Nginx 解析 cors。 为 nginx 添加反向代理。我向 nginx 主机发送请求，然后它将请求从同一网络内转发给 loki，因此没有 cors。

我阅读并尝试了很多，但我的设置工作正常。我们现在正在使用此设置将前端日志推送到 grafana

【讨论】：

能否提供相同的 nginx 配置？