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

Question

Background:

I am working on a project where we have a server setup in Java and for front-end we are using ReactJs. Our server ships all logs to Loki endpoint via their push API and all metrics to a prometheus push-gateway. Grafana then pulls those logs and metrics from Loki and push-gateway for display.

Requirement:

I want to persist and place the ReactJs application logs and metrics so they are visible on grafana . This will help us see both frontend and backend application logs & metrics in the same place. Is there a free , opensource Javascript library or framework that can help me with that. The less code I need to write the better.

I was opting for sentry before but it's not completely free anymore. And we cannot use console logging as it disappears on browser refresh and not really helpful in production

Answer 1

So I didn't find a good library at that time but I was eventually able to ship logs to loki push endpoint.

I tried to push logs directly from frontend to loki push endpoint. This gave me a cors error. So I came up with the following steps to get around cors with Loki.

My workaround:

1. Setup nginx proxy server.
2. Nginx resolves cors.
3. Add reverse proxy to nginx. I send request to nginx host and then it forwards that request to loki from within same network so no cors.

I took alot of reading and hit and trys but I got the setup working. We are now using this setup to push frontend logs to grafana