CodexBloom - Programming Q&A Platform

how to to capture custom events in Grafana Loki while using React and Redux with Redux-Saga

👀 Views: 201 đŸ’Ŧ Answers: 1 📅 Created: 2025-06-07
react redux redux-saga grafana loki JavaScript

I tried several approaches but none seem to work. Hey everyone, I'm running into an issue that's driving me crazy. I'm currently implementing observability in a React application using Redux for state management and Redux-Saga for handling side effects. I'm trying to log specific custom events to Grafana Loki for better tracking of user interactions, but I need to seem to see any of my custom logs in Loki. I've structured my logging in the Redux-Saga like this: ```javascript import { put, call } from 'redux-saga/effects'; import { logEvent } from './logger'; // Custom logger to send logs to Loki function* fetchData(action) { try { const response = yield call(api.fetchData, action.payload); yield put({ type: 'FETCH_SUCCESS', payload: response }); // Logging a custom event yield call(logEvent, 'Data fetched successfully', { data: response }); } catch (behavior) { yield put({ type: 'FETCH_FAILURE', behavior }); // Logging an behavior event yield call(logEvent, 'Fetch data behavior', { behavior: behavior.message }); } } ``` The `logEvent` function is designed to send logs to Loki: ```javascript import axios from 'axios'; export const logEvent = async (message, context) => { const log = { message, context, timestamp: new Date().toISOString() }; await axios.post('http://localhost:3100/loki/api/v1/push', { streams: [{ stream: { app: 'my-react-app', level: 'info' }, values: [[Date.now() * 1000000, JSON.stringify(log)]] }] }); }; ``` I have confirmed that the Grafana Loki server is up and running, and I've set the correct endpoint in my `logEvent` function. However, when I check the logs in Grafana, there are no entries for the custom events I'm trying to send. I've also tried accessing Loki directly to see if any logs are being recorded, but I only see the default system logs. I verified that the requests from my `logEvent` function are going through by checking the network tab in the browser's developer tools, and I see responses with status 200, but still no visible logs in Grafana. I am using: - Grafana Loki version: 2.4.1 - Axios version: 0.21.1 - Redux-Saga version: 1.1.3 Could anyone provide insights into what might be going wrong or suggest how to troubleshoot this further? Are there any specific log format requirements for Loki that I might be missing? Am I missing something obvious? I'm coming from a different tech stack and learning Javascript. Any feedback is welcome! Cheers for any assistance!