feat: allow disabling otel exporter (#1436)

Author: Misfits09

.changeset/angry-emus-cry.md

@@ -0,0 +1,6 @@
+---
+"@hyperdx/app": patch
+"@hyperdx/api": patch
+---
+
+feat: added configuration to disable frontend otel exporter

packages/app/pages/_app.tsx

@@ -26,18 +26,19 @@ import {
 import { ibmPlexMono, inter, roboto, robotoMono } from '@/fonts';
 import { AppThemeProvider, useAppTheme } from '@/theme/ThemeProvider';
 import { ThemeWrapper } from '@/ThemeWrapper';
+import { NextApiConfigResponseData } from '@/types';
 import { useConfirmModal } from '@/useConfirm';
 import { QueryParamProvider as HDXQueryParamProvider } from '@/useQueryParam';
 import { useUserPreferences } from '@/useUserPreferences';
 
 import '@mantine/core/styles.css';
-import '@mantine/notifications/styles.css';
 import '@mantine/dates/styles.css';
 import '@mantine/dropzone/styles.css';
-import '@styles/globals.css';
+import '@mantine/notifications/styles.css';
 import '@styles/app.scss';
-import 'uplot/dist/uPlot.min.css';
+import '@styles/globals.css';
 import '@xyflow/react/dist/style.css';
+import 'uplot/dist/uPlot.min.css';
 
 // Polyfill crypto.randomUUID for non-HTTPS environments
 if (typeof crypto !== 'undefined' && !crypto.randomUUID) {
@@ -137,15 +138,8 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
     }
     fetch('/api/config')
       .then(res => res.json())
-      .then(_jsonData => {
+      .then((_jsonData?: NextApiConfigResponseData) => {
         if (_jsonData?.apiKey) {
-          let hostname;
-          try {
-            const url = new URL(_jsonData.apiServerUrl);
-            hostname = url.hostname;
-          } catch (err) {
-            // ignore
-          }
           HyperDX.init({
             apiKey: _jsonData.apiKey,
             consoleCapture: true,
@@ -156,7 +150,7 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
             url: _jsonData.collectorUrl,
           });
         } else {
-          console.warn('No API key found');
+          console.warn('No API key found to enable OTEL exporter');
         }
       })
       .catch(err => {

packages/app/pages/api/config.ts

@@ -1,14 +1,19 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-import { HDX_API_KEY, HDX_COLLECTOR_URL, HDX_SERVICE_NAME } from '@/config';
+import {
+  HDX_API_KEY,
+  HDX_COLLECTOR_URL,
+  HDX_EXPORTER_ENABLED,
+  HDX_SERVICE_NAME,
+} from '@/config';
 import type { NextApiConfigResponseData } from '@/types';
 
 export default function handler(
   req: NextApiRequest,
   res: NextApiResponse<NextApiConfigResponseData>,
 ) {
   res.status(200).json({
-    apiKey: HDX_API_KEY,
+    apiKey: HDX_EXPORTER_ENABLED ? HDX_API_KEY : undefined,
     collectorUrl: HDX_COLLECTOR_URL,
     serviceName: HDX_SERVICE_NAME,
   });

packages/app/src/config.ts

@@ -16,6 +16,8 @@ export const NODE_ENV = process.env.NODE_ENV as string;
 export const HDX_API_KEY = process.env.HYPERDX_API_KEY as string; // for nextjs server
 export const HDX_SERVICE_NAME =
   process.env.NEXT_PUBLIC_OTEL_SERVICE_NAME ?? 'hdx-oss-dev-app';
+export const HDX_EXPORTER_ENABLED =
+  (process.env.HDX_EXPORTER_ENABLED ?? 'true') === 'true';
 export const HDX_COLLECTOR_URL =
   process.env.NEXT_PUBLIC_OTEL_EXPORTER_OTLP_ENDPOINT ??
   'http://localhost:4318';

packages/app/src/types.ts

@@ -238,7 +238,7 @@ export enum KubePhase {
 }
 
 export type NextApiConfigResponseData = {
-  apiKey: string;
+  apiKey?: string;
   collectorUrl: string;
   serviceName: string;
 };