refactor(web-settings): move more settings to runtime & disabled by default

.github/workflows/build-enterprise.yaml

@@ -61,13 +61,6 @@ jobs:
           echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
           echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
           echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
-          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
-          echo 'VITE_TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> frontend/.env
-          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> frontend/.env
-          echo 'VITE_POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
-          echo 'VITE_PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> frontend/.env
-          echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> frontend/.env
-          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> frontend/.env
           echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> frontend/.env
           echo 'VITE_ENVIRONMENT="production"' >> frontend/.env
           echo 'VITE_VERSION="${{ steps.build-info.outputs.version }}"' >> frontend/.env

.github/workflows/build-staging.yaml

@@ -67,12 +67,6 @@ jobs:
           echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
           echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
           echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
-          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
-          echo 'VITE_TUNNEL_URL="${{ secrets.NP_TUNNEL_URL }}"' >> frontend/.env
-          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.NP_TUNNEL_DOMAIN }}"' >> frontend/.env
-          echo 'VITE_PYLON_APP_ID="${{ secrets.NP_PYLON_APP_ID }}"' >> frontend/.env
-          echo 'VITE_APPCUES_APP_ID="${{ secrets.NP_APPCUES_APP_ID }}"' >> frontend/.env
-          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.NP_PYLON_IDENTITY_SECRET }}"' >> frontend/.env
           echo 'VITE_DOCS_BASE_URL="https://staging.signoz.io"' >> frontend/.env
           echo 'VITE_ENVIRONMENT="staging"' >> frontend/.env
           echo 'VITE_VERSION="${{ steps.build-info.outputs.version }}"' >> frontend/.env

.github/workflows/gor-signoz.yaml

@@ -27,13 +27,6 @@ jobs:
           echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> .env
           echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> .env
           echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> .env
-          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> .env
-          echo 'VITE_TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> .env
-          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> .env
-          echo 'VITE_POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> .env
-          echo 'VITE_PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> .env
-          echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
-          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
           echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> .env
           echo 'VITE_ENVIRONMENT="production"' >> .env
           echo 'VITE_VERSION="${{ github.ref_name }}"' >> .env

frontend/example.env

@@ -1,8 +1,38 @@
 NODE_ENV="development"
 BUNDLE_ANALYSER="true"
-VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"
-VITE_PYLON_APP_ID="pylon-app-id"
-VITE_APPCUES_APP_ID="appcess-app-id"
-VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"
-
 CI="1"
+
+# API
+VITE_BASE_PATH=""
+VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"
+VITE_WEBSOCKET_API_ENDPOINT=""
+
+# Pylon
+VITE_PYLON_ENABLED="false"
+VITE_PYLON_APP_ID=""
+VITE_PYLON_IDENTITY_SECRET=""
+
+# Appcues
+VITE_APPCUES_ENABLED="false"
+VITE_APPCUES_APP_ID=""
+
+# PostHog
+VITE_POSTHOG_ENABLED="false"
+VITE_POSTHOG_API_HOST=""
+VITE_POSTHOG_KEY=""
+VITE_POSTHOG_UI_HOST=""
+
+# Sentry
+VITE_SENTRY_ENABLED="false"
+VITE_SENTRY_AUTH_TOKEN=""
+VITE_SENTRY_ORG=""
+VITE_SENTRY_PROJECT_ID=""
+VITE_SENTRY_TUNNEL=""
+VITE_SENTRY_DSN=""
+
+# Docs
+VITE_DOCS_BASE_URL="https://signoz.io"
+
+# Build info
+VITE_ENVIRONMENT="development"
+VITE_VERSION=""

frontend/index.html

@@ -111,11 +111,10 @@
 		<div id="root"></div>
 
 		<script>
-			var PYLON_APP_ID = '<%- PYLON_APP_ID %>';
 			var pylonSettings =
 				((window.signozBootData || {}).settings || {}).pylon || {};
-			var pylonEnabled = pylonSettings.enabled !== false;
-			if (PYLON_APP_ID && pylonEnabled) {
+			var pylonEnabled = pylonSettings.enabled === true;
+			if (pylonSettings.appId && pylonEnabled) {
 				(function () {
 					var e = window;
 					var t = document;
@@ -133,7 +132,7 @@
 						e.setAttribute('async', 'true');
 						e.setAttribute(
 							'src',
-							'https://widget.usepylon.com/widget/' + PYLON_APP_ID,
+							'https://widget.usepylon.com/widget/' + pylonSettings.appId,
 						);
 						var n = t.getElementsByTagName('script')[0];
 						n.parentNode.insertBefore(e, n);
@@ -150,15 +149,14 @@
 			window.AppcuesSettings = { enableURLDetection: true };
 		</script>
 		<script>
-			var APPCUES_APP_ID = '<%- APPCUES_APP_ID %>';
 			var appcuesSettings =
 				((window.signozBootData || {}).settings || {}).appcues || {};
-			var appcuesEnabled = appcuesSettings.enabled !== false;
-			if (APPCUES_APP_ID && appcuesEnabled) {
+			var appcuesEnabled = appcuesSettings.enabled === true;
+			if (appcuesSettings.appId && appcuesEnabled) {
 				(function (d, t) {
 					var a = d.createElement(t);
 					a.async = 1;
-					a.src = '//fast.appcues.com/' + APPCUES_APP_ID + '.js';
+					a.src = '//fast.appcues.com/' + appcuesSettings.appId + '.js';
 					var s = d.getElementsByTagName(t)[0];
 					s.parentNode.insertBefore(a, s);
 				})(document, 'script');

frontend/knip.json

@@ -3,7 +3,6 @@
   "project": ["src/**/*.ts", "src/**/*.tsx"],
   "ignore": ["src/api/generated/**/*.ts", "src/typings/*.ts"],
   "ignoreDependencies": [
-    "http-proxy-middleware",
     "@typescript/native-preview"
   ]
 }

frontend/package.json

@@ -79,7 +79,6 @@
     "event-source-polyfill": "1.0.31",
     "eventemitter3": "5.0.1",
     "history": "4.10.1",
-    "http-proxy-middleware": "4.1.1",
     "http-status-codes": "2.3.0",
     "i18next": "^21.6.12",
     "i18next-browser-languagedetector": "^6.1.3",

frontend/pnpm-lock.yaml

@@ -164,9 +164,6 @@ importers:
       history:
         specifier: 4.10.1
         version: 4.10.1
-      http-proxy-middleware:
-        specifier: 4.1.1
-        version: 4.1.1
       http-status-codes:
         specifier: 2.3.0
         version: 2.3.0
@@ -5461,10 +5458,6 @@ packages:
     resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
     engines: {node: '>= 6'}
 
-  http-proxy-middleware@4.1.1:
-    resolution: {integrity: sha512-KX5ZofGXLFXqFAkQoOWZ+rTtaLTut7m0gyL+QzJrdejtIZ+F4bPPDoe7reISg2+v0CAz5OfVwEJEhty7X+e57g==}
-    engines: {node: ^22.15.0 || ^24.0.0 || >=26.0.0}
-
   http-status-codes@2.3.0:
     resolution: {integrity: sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA==}
 
@@ -5472,9 +5465,6 @@ packages:
     resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
     engines: {node: '>= 6'}
 
-  httpxy@0.5.3:
-    resolution: {integrity: sha512-SMS9V6Sn7VWaS11lYhoAr0ceoaiolTWf4jYdJn0NJhCdKMu9R2H9Fh0LBDWBHQF6HRLI1PmaePYsjanSpE5PEw==}
-
   human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
@@ -14515,16 +14505,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  http-proxy-middleware@4.1.1:
-    dependencies:
-      debug: 4.3.4(supports-color@5.5.0)
-      httpxy: 0.5.3
-      is-glob: 4.0.3
-      is-plain-obj: 4.1.0
-      micromatch: 4.0.8
-    transitivePeerDependencies:
-      - supports-color
-
   http-status-codes@2.3.0: {}
 
   https-proxy-agent@5.0.1:
@@ -14534,8 +14514,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  httpxy@0.5.3: {}
-
   human-signals@2.1.0: {}
 
   human-signals@8.0.1: {}

frontend/src/AppRoutes/index.tsx

@@ -292,10 +292,10 @@ function App(): JSX.Element {
 				isChatSupportEnabled &&
 				!showAddCreditCardModal &&
 				(isCloudUser || isEnterpriseSelfHostedUser) &&
-				(window.signozBootData?.settings?.pylon.enabled ?? true)
+				window.signozBootData?.settings?.pylon?.enabled
 			) {
 				const email = user.email || '';
-				const secret = process.env.PYLON_IDENTITY_SECRET || '';
+				const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
 				let emailHash = '';
 
 				if (email && secret) {
@@ -304,7 +304,7 @@ function App(): JSX.Element {
 
 				window.pylon = {
 					chat_settings: {
-						app_id: process.env.PYLON_APP_ID,
+						app_id: window.signozBootData?.settings?.pylon?.appId,
 						email: user.email,
 						name: user.displayName || user.email,
 						email_hash: emailHash,
@@ -335,22 +335,23 @@ function App(): JSX.Element {
 	useEffect(() => {
 		if (isCloudUser || isEnterpriseSelfHostedUser) {
 			if (
-				(window.signozBootData?.settings?.posthog.enabled ?? true) &&
-				process.env.POSTHOG_KEY
+				window.signozBootData?.settings?.posthog?.enabled &&
+				window.signozBootData?.settings?.posthog?.key
 			) {
-				posthog.init(process.env.POSTHOG_KEY, {
-					api_host: 'https://us.i.posthog.com',
+				posthog.init(window.signozBootData.settings.posthog.key, {
+					api_host: window.signozBootData.settings.posthog.apiHost,
+					ui_host: window.signozBootData.settings.posthog.uiHost,
 					person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
 				});
 			}
 
 			if (
 				!isSentryInitialized &&
-				(window.signozBootData?.settings?.sentry.enabled ?? true)
+				window.signozBootData?.settings?.sentry?.enabled
 			) {
 				Sentry.init({
-					dsn: process.env.SENTRY_DSN,
-					tunnel: process.env.TUNNEL_URL,
+					dsn: window.signozBootData.settings.sentry.dsn,
+					tunnel: window.signozBootData.settings.sentry.tunnel,
 					environment: process.env.ENVIRONMENT,
 					release: process.env.VERSION,
 					integrations: [

frontend/src/setupProxy.js

@@ -1,14 +0,0 @@
-/* eslint-disable  */
-// @ts-ignore
-// @ts-nocheck
-import { legacyCreateProxyMiddleware } from 'http-proxy-middleware';
-
-export default function (app) {
-	app.use(
-		'/tunnel',
-		legacyCreateProxyMiddleware({
-			target: `${process.env.TUNNEL_DOMAIN}/tunnel`,
-			changeOrigin: true,
-		}),
-	);
-}

frontend/src/vite-env.d.ts

@@ -11,18 +11,24 @@ declare module '*.md?raw' {
 }
 
 interface ImportMetaEnv {
+	readonly VITE_BASE_PATH: string;
 	readonly VITE_FRONTEND_API_ENDPOINT: string;
 	readonly VITE_WEBSOCKET_API_ENDPOINT: string;
+	readonly VITE_PYLON_ENABLED: string;
 	readonly VITE_PYLON_APP_ID: string;
 	readonly VITE_PYLON_IDENTITY_SECRET: string;
+	readonly VITE_APPCUES_ENABLED: string;
 	readonly VITE_APPCUES_APP_ID: string;
+	readonly VITE_POSTHOG_ENABLED: string;
+	readonly VITE_POSTHOG_API_HOST: string;
 	readonly VITE_POSTHOG_KEY: string;
+	readonly VITE_POSTHOG_UI_HOST: string;
 	readonly VITE_SENTRY_AUTH_TOKEN: string;
 	readonly VITE_SENTRY_ORG: string;
 	readonly VITE_SENTRY_PROJECT_ID: string;
+	readonly VITE_SENTRY_ENABLED: string;
+	readonly VITE_SENTRY_TUNNEL: string;
 	readonly VITE_SENTRY_DSN: string;
-	readonly VITE_TUNNEL_URL: string;
-	readonly VITE_TUNNEL_DOMAIN: string;
 	readonly VITE_DOCS_BASE_URL: string;
 	readonly VITE_ENVIRONMENT: string;
 	readonly VITE_VERSION: string;

frontend/vite.config.ts

@@ -6,9 +6,15 @@ import type { Plugin, TransformResult, UserConfig } from 'vite';
 import { defineConfig, loadEnv } from 'vite';
 import vitePluginChecker from 'vite-plugin-checker';
 import viteCompression from 'vite-plugin-compression';
-import { createHtmlPlugin } from 'vite-plugin-html';
 import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import type {
+	Appcues,
+	Posthog,
+	Pylon,
+	Sentry,
+	WebSettings,
+} from 'types/generated/webSettings';
 
 // In dev the Go backend is not involved, so replace the [[.BaseHref]] placeholder
 // with the configured base path so relative assets resolve correctly from the Vite dev server.
@@ -23,17 +29,33 @@ function devBasePathPlugin(basePath: string): Plugin {
 	};
 }
 
-function devBootDataPlugin(env: Record<string, string>): Plugin {
+function devBootDataPlugin(env: ImportMetaEnv): Plugin {
 	return {
 		name: 'dev-boot-data',
 		apply: 'serve',
 		transformIndexHtml(html): string {
 			const settings = {
-				posthog: { enabled: env.VITE_POSTHOG_ENABLED !== 'false' },
-				appcues: { enabled: env.VITE_APPCUES_ENABLED !== 'false' },
-				sentry: { enabled: env.VITE_SENTRY_ENABLED !== 'false' },
-				pylon: { enabled: env.VITE_PYLON_ENABLED !== 'false' },
-			};
+				posthog: {
+					enabled: env.VITE_POSTHOG_ENABLED === 'true',
+					apiHost: env.VITE_POSTHOG_API_HOST || '',
+					key: env.VITE_POSTHOG_KEY || '',
+					uiHost: env.VITE_POSTHOG_UI_HOST || '',
+				} satisfies Required<Posthog>,
+				appcues: {
+					enabled: env.VITE_APPCUES_ENABLED === 'true',
+					appId: env.VITE_APPCUES_APP_ID || '',
+				} satisfies Required<Appcues>,
+				sentry: {
+					enabled: env.VITE_SENTRY_ENABLED === 'true',
+					dsn: env.VITE_SENTRY_DSN || '',
+					tunnel: env.VITE_SENTRY_TUNNEL || '',
+				} satisfies Required<Sentry>,
+				pylon: {
+					enabled: env.VITE_PYLON_ENABLED === 'true',
+					appId: env.VITE_PYLON_APP_ID || '',
+					identitySecret: env.VITE_PYLON_IDENTITY_SECRET || '',
+				} satisfies Required<Pylon>,
+			} satisfies Required<WebSettings>;
 			return html.replaceAll('[[.Settings]]', JSON.stringify(settings));
 		},
 	};
@@ -55,7 +77,7 @@ function rawMarkdownPlugin(): Plugin {
 }
 
 export default defineConfig(({ mode }): UserConfig => {
-	const env = loadEnv(mode, process.cwd(), '');
+	const env = loadEnv(mode, process.cwd(), '') as ImportMetaEnv;
 	// Base path for serving the app (e.g., '/signoz/'). Defaults to '/'.
 	const basePath = env.VITE_BASE_PATH || '/';
 
@@ -65,14 +87,6 @@ export default defineConfig(({ mode }): UserConfig => {
 		devBasePathPlugin(basePath),
 		devBootDataPlugin(env),
 		react(),
-		createHtmlPlugin({
-			inject: {
-				data: {
-					PYLON_APP_ID: env.VITE_PYLON_APP_ID || '',
-					APPCUES_APP_ID: env.VITE_APPCUES_APP_ID || '',
-				},
-			},
-		}),
 		vitePluginChecker({
 			typescript: true,
 			// this doubles the build tim
@@ -157,17 +171,6 @@ export default defineConfig(({ mode }): UserConfig => {
 			'process.env.WEBSOCKET_API_ENDPOINT': JSON.stringify(
 				env.VITE_WEBSOCKET_API_ENDPOINT,
 			),
-			'process.env.PYLON_APP_ID': JSON.stringify(env.VITE_PYLON_APP_ID),
-			'process.env.PYLON_IDENTITY_SECRET': JSON.stringify(
-				env.VITE_PYLON_IDENTITY_SECRET,
-			),
-			'process.env.APPCUES_APP_ID': JSON.stringify(env.VITE_APPCUES_APP_ID),
-			'process.env.POSTHOG_KEY': JSON.stringify(env.VITE_POSTHOG_KEY),
-			'process.env.SENTRY_ORG': JSON.stringify(env.VITE_SENTRY_ORG),
-			'process.env.SENTRY_PROJECT_ID': JSON.stringify(env.VITE_SENTRY_PROJECT_ID),
-			'process.env.SENTRY_DSN': JSON.stringify(env.VITE_SENTRY_DSN),
-			'process.env.TUNNEL_URL': JSON.stringify(env.VITE_TUNNEL_URL),
-			'process.env.TUNNEL_DOMAIN': JSON.stringify(env.VITE_TUNNEL_DOMAIN),
 			'process.env.DOCS_BASE_URL': JSON.stringify(env.VITE_DOCS_BASE_URL),
 			'process.env.ENVIRONMENT': JSON.stringify(env.VITE_ENVIRONMENT),
 			'process.env.VERSION': JSON.stringify(env.VITE_VERSION),