fix: connect http logs with traces

metrico · Sep 23, 2024 · 79837d0 · 79837d0
1 parent bb3cadc
commit 79837d0
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 22 deletions.
diff --git a/...ain/plugins/WebVitals/performanceAxios.ts → ...n/plugins/WebVitals/requestPerformance.ts b/...ain/plugins/WebVitals/performanceAxios.ts → ...n/plugins/WebVitals/requestPerformance.ts
@@ -4,15 +4,18 @@ import { LOKI_WRITE, METRICS_WRITE, TEMPO_WRITE } from "./helper/webVitals";
 import { v4 as uuidv4 } from "uuid";
 
 interface PerformanceEntry {
+  id?:string;
   name: string;
   startTime: number;
   duration: number;
+  timestamp: number;
   type?:string;
   level?:string;
   method: string;
   url: string;
   status: number;
-  traceId: string;
+  value?: any;
+  traceId?: string;
 }
 
 const performanceQueue: Set<PerformanceEntry> = new Set();
@@ -26,12 +29,10 @@ export async function flushPerformanceQueue() {
   const metricsData = entries
     .map(
       (entry) =>
-        `http_request,method=${entry.method},type=${entry.type},status=${entry.status} duration=${Math.round(entry.duration)} ${Date.now() * 1000000}`,
+        `http_request,method=${entry.method},type=${entry.type},status=${entry.status},level=${entry.level ?? "info"} duration=${Math.round(entry.duration)} ${entry.timestamp * 1000000}`,
     )
     .join("\n");
 
-    console.log(metricsData)
-
   // Format logs
   const logsData = JSON.stringify({
     streams: entries.map((entry) => ({
@@ -41,15 +42,16 @@ export async function flushPerformanceQueue() {
         metricName:"http_request",
         metricLabel:"type",
         type: entry.type,
+        duration: entry.duration,
         method: entry.method,
         url: entry.url,
         status: entry.status.toString(),
         traceId: entry.traceId,
       },
       values: [
         [
-          String(Date.now() * 1000000),
-          `HTTP ${entry.method} ${entry.url} completed in ${entry.duration}ms with status ${entry.status}`,
+          String(String(entry.timestamp * 1000000)),
+          `job="httpRequest" type=${entry.type} HTTP ${entry.method} ${entry.url} traceId=${entry.traceId} completed in ${entry.duration}ms with status ${entry.status} and duration ${entry.duration}`,
         ],
       ],
     })),
@@ -59,22 +61,21 @@ export async function flushPerformanceQueue() {
   const tracesData = entries.map((entry) => ({
     id: uuidv4().replace(/-/g, ""),
     traceId: entry.traceId,
-    name: `HTTP ${entry.type}`,
-
-    timestamp:Math.floor(Date.now() * 1000), // microseconds
+    name: `HTTP-${entry.type}`,
+    timestamp:Math.floor(entry.timestamp * 1000), // microseconds
     duration: Math.floor(entry.duration * 1000) , // microseconds
+
     tags: {
       "http.method": entry.method,
       "http.url": entry.url,
       "http.status_code": entry.status.toString(),
+      "http.log_level": entry.level ?? "info",
     },
     localEndpoint: {
       serviceName: "httpClient",
     },
   }));
 
-  console.log(tracesData)
-
   try {
     await Promise.all([
       fetch(METRICS_WRITE, {
@@ -103,27 +104,36 @@ export async function flushPerformanceQueue() {
 
 
 
-export function performanceAxios(
+export function requestPerformance(
   config: any,
 ): Promise<AxiosResponse> {
   const startTime = performance.now();
-  const traceId = uuidv4().replace(/-/g, "");
-console.log(config)
+  const timestamp = Date.now()
+ 
   return axios(config)
     .then((response) => {
+      // filter in here if the interceptor is active
       const endTime = performance.now();
       const duration = endTime - startTime;
+
+      const traceId = uuidv4().replace(/-/g, "");
+
+      // add timestamp in here
+
+      console.log(startTime)
 
       const entry: PerformanceEntry = {
+        traceId,
         name: `${config.method} ${config.url}`,
         type:config.type,
+        timestamp,
         level:"info",
         startTime,
         duration,
         method: config.method?.toUpperCase() || "GET",
         url: config.url || "",
         status: response.status,
-        traceId,
+
       };
 
       performanceQueue.add(entry);
@@ -133,11 +143,14 @@ console.log(config)
     .catch((error) => {
       const endTime = performance.now();
       const duration = endTime - startTime;
+      const timestamp = Date.now()
+      const traceId = uuidv4().replace(/-/g, "");
 
       const entry: PerformanceEntry = {
         name: `${config.method} ${config.url} (failed)`,
         startTime,
         duration,
+        timestamp,
         type: config.type,
         level:'error',
         method: config.method?.toUpperCase() || "GET",

diff --git a/packages/main/sections/Queries/QueryItem.tsx b/packages/main/sections/Queries/QueryItem.tsx
@@ -46,8 +46,6 @@ function TabPanel(props: TabPanelProps) {
 
 const QueryItem = (props: any) => {
     const { name, data } = props;
-
-    console.log(data)
     const { id } = data;
     const [launchQuery, setLaunchQuery] = useState("");
     const dispatch: any = useDispatch();

diff --git a/packages/main/src/components/DataViews/components/ValueTags/ValueTagsCont.tsx b/packages/main/src/components/DataViews/components/ValueTags/ValueTagsCont.tsx
@@ -41,7 +41,6 @@ export function ValueTagsCont(props: any) {
         }
     }, [tags]);
 
-    console.log(logMetrics, tags.hasMetrics);
     if (showLabels) {
         return (
             <div className="value-tags-container">

diff --git a/packages/main/store/actions/getData.ts b/packages/main/store/actions/getData.ts
@@ -16,9 +16,9 @@ import { setLeftDataView } from "./setLeftDataView";
 import { setRightDataView } from "./setRightDataView";
 
 import {
-    performanceAxios,
+    requestPerformance,
     flushPerformanceQueue,
-} from "@ui/plugins/WebVitals/performanceAxios";
+} from "@ui/plugins/WebVitals/requestPerformance";
 //import { flushQueue } from './webVitals';
 
 /**
@@ -209,7 +209,7 @@ export default function getData(
         try {
             if (options?.method === "POST") {
                 //await axios
-                await performanceAxios({
+                await requestPerformance({
                     method: "POST",
                     url: endpoint,
                     data: queryInput,
@@ -248,7 +248,7 @@ export default function getData(
                 //     auth: { username: user, password: pass },
                 //     ...options,
                 // })
-                await performanceAxios({
+                await requestPerformance({
                     method: "GET",
                     url: endpoint,
                     type,