feat: allow disabling otel exporter

.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/Dockerfile

@@ -26,9 +26,11 @@ FROM base AS builder
 # Expose custom env variables to the browser (needs NEXT_PUBLIC_ prefix)
 # doc: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser
 ARG OTEL_EXPORTER_OTLP_ENDPOINT
+ARG OTEL_EXPORTER_ENABLED
 ARG OTEL_SERVICE_NAME
 ARG IS_LOCAL_MODE
 ENV NEXT_PUBLIC_OTEL_EXPORTER_OTLP_ENDPOINT $OTEL_EXPORTER_OTLP_ENDPOINT
+ENV NEXT_PUBLIC_OTEL_EXPORTER_ENABLED $OTEL_EXPORTER_ENABLED
 ENV NEXT_PUBLIC_OTEL_SERVICE_NAME $OTEL_SERVICE_NAME
 ENV NEXT_PUBLIC_IS_LOCAL_MODE $IS_LOCAL_MODE
 ENV NX_DAEMON false

packages/app/pages/_app.tsx

@@ -21,6 +21,7 @@ import { ThemeWrapper } from '@/ThemeWrapper';
 import { useConfirmModal } from '@/useConfirm';
 import { QueryParamProvider as HDXQueryParamProvider } from '@/useQueryParam';
 import { useBackground, useUserPreferences } from '@/useUserPreferences';
+import { NextApiConfigResponseData } from '@/types';
 
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
@@ -68,26 +69,20 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
     }
     fetch('/api/config')
       .then(res => res.json())
-      .then(_jsonData => {
-        if (_jsonData?.apiKey) {
-          let hostname;
-          try {
-            const url = new URL(_jsonData.apiServerUrl);
-            hostname = url.hostname;
-          } catch (err) {
-            // ignore
-          }
+      .then((_jsonData?: NextApiConfigResponseData) => {
+        if (!_jsonData?.exporterEnabled){
+          console.info('OTEL exporter disabled');
+        } else if (_jsonData?.apiKey) {
           HyperDX.init({
             apiKey: _jsonData.apiKey,
             consoleCapture: true,
             maskAllInputs: true,
             maskAllText: true,
             service: _jsonData.serviceName,
-            // tracePropagationTargets: [new RegExp(hostname ?? 'localhost', 'i')],
             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,13 +1,14 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-import { HDX_API_KEY, HDX_COLLECTOR_URL, HDX_SERVICE_NAME } from '@/config';
+import { HDX_API_KEY, HDX_EXPORTER_ENABLED, HDX_COLLECTOR_URL, HDX_SERVICE_NAME } from '@/config';
 import type { NextApiConfigResponseData } from '@/types';
 
 export default function handler(
   req: NextApiRequest,
   res: NextApiResponse<NextApiConfigResponseData>,
 ) {
   res.status(200).json({
+    exporterEnabled: HDX_EXPORTER_ENABLED,
     apiKey: HDX_API_KEY,
     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.NEXT_PUBLIC_OTEL_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

@@ -264,6 +264,7 @@ export type Webhook = {
 };
 
 export type NextApiConfigResponseData = {
+  exporterEnabled: boolean;
   apiKey: string;
   collectorUrl: string;
   serviceName: string;