feat(frontend): Add better frontend tracing (#11244)

* add better tracing through the frontend

* extend allowed headers

* add endpoint to end the trace

* end traces correctly in backend

* end trace

* early cop-out if not tracing is enabled

* Update API version link for v447

src/frontend/lib/enums/ApiEndpoints.tsx

@@ -244,5 +244,8 @@ export enum ApiEndpoints {
   email_test = 'admin/email/test/',
   config_list = 'admin/config/',
   parameter_list = 'parameter/',
-  parameter_template_list = 'parameter/template/'
+  parameter_template_list = 'parameter/template/',
+
+  // Internal system things
+  system_internal_trace_end = 'system-internal/observability/end'
 }

src/frontend/src/App.tsx

@@ -1,6 +1,8 @@
 import { QueryClient } from '@tanstack/react-query';
 import axios from 'axios';
 
+import { ApiEndpoints, apiUrl } from '@lib/index';
+import { frontendID, serviceName } from './defaults/defaults';
 import { useLocalState } from './states/LocalState';
 
 // Global API instance
@@ -33,3 +35,22 @@ export const queryClient = new QueryClient({
     }
   }
 });
+export function setTraceId() {
+  const runID = crypto.randomUUID().replace(/-/g, '');
+  const traceid = `00-${runID}-${frontendID}-01`;
+  api.defaults.headers['traceparent'] = traceid;
+
+  return runID;
+}
+export function removeTraceId(traceid: string) {
+  delete api.defaults.headers['traceparent'];
+
+  api
+    .post(apiUrl(ApiEndpoints.system_internal_trace_end), {
+      traceid: traceid,
+      service: serviceName
+    })
+    .catch((error) => {
+      console.error('Error removing trace ID:', error);
+    });
+}

src/frontend/src/defaults/defaults.tsx

@@ -36,3 +36,6 @@ export const SizeMarks: SiteMarkProps[] = [
   { value: 75, label: 'lg' },
   { value: 100, label: 'xl' }
 ];
+
+export const frontendID = '706f6f7062757474';
+export const serviceName = 'FRONTEND';

src/frontend/src/pages/Auth/Login.tsx

@@ -6,7 +6,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
 import { useShallow } from 'zustand/react/shallow';
-import { setApiDefaults } from '../../App';
+import { removeTraceId, setApiDefaults, setTraceId } from '../../App';
 import { AuthFormOptions } from '../../components/forms/AuthFormOptions';
 import { AuthenticationForm } from '../../components/forms/AuthenticationForm';
 import { InstanceOptions } from '../../components/forms/InstanceOptions';
@@ -63,7 +63,9 @@ export default function Login() {
     if (newHost === null) return;
     setHost(hostList[newHost]?.host, newHost);
     setApiDefaults();
+    const traceid = setTraceId();
     fetchServerApiState();
+    removeTraceId(traceid);
   }
 
   // Set default host to localhost if no host is selected

src/frontend/src/states/states.tsx

@@ -1,5 +1,5 @@
 import type { PluginProps } from '@lib/types/Plugins';
-import { setApiDefaults } from '../App';
+import { removeTraceId, setApiDefaults, setTraceId } from '../App';
 import { useGlobalStatusState } from './GlobalStatusState';
 import { useIconState } from './IconState';
 import { useServerApiState } from './ServerApiState';
@@ -53,6 +53,7 @@ export async function fetchGlobalStates() {
   }
 
   setApiDefaults();
+  const traceId = setTraceId();
   await Promise.all([
     useServerApiState.getState().fetchServerApiState(),
     useUserSettingsState.getState().fetchSettings(),
@@ -60,4 +61,5 @@ export async function fetchGlobalStates() {
     useGlobalStatusState.getState().fetchStatus(),
     useIconState.getState().fetchIcons()
   ]);
+  removeTraceId(traceId);
 }