Merge branch 'main' into base-path-config-setup-1

frontend/.eslintrc.cjs

@@ -66,6 +66,8 @@ module.exports = {
 	rules: {
 		// Asset migration — base-path safety
 		'rulesdir/no-unsupported-asset-pattern': 'error',
+		// Base-path safety — window.open and origin-concat patterns; upgrade to error coming PR
+		'rulesdir/no-raw-absolute-path': 'warn',
 
 		// Code quality rules
 		'prefer-const': 'error', // Enforces const for variables never reassigned

frontend/eslint-rules/no-raw-absolute-path.js

@@ -0,0 +1,153 @@
+'use strict';
+
+/**
+ * ESLint rule: no-raw-absolute-path
+ *
+ * Catches patterns that break at runtime when the app is served from a
+ * sub-path (e.g. /signoz/):
+ *
+ *   1. window.open(path, '_blank')
+ *      → use openInNewTab(path) which calls withBasePath internally
+ *
+ *   2. window.location.origin + path  /  `${window.location.origin}${path}`
+ *      → use getAbsoluteUrl(path)
+ *
+ *   3. frontendBaseUrl: window.location.origin  (bare origin usage)
+ *      → use getBaseUrl() to include the base path
+ *
+ *   4. window.location.href = path
+ *      → use withBasePath(path) or navigate() for internal navigation
+ *
+ * External URLs (first arg starts with "http") are explicitly allowed.
+ */
+
+function isOriginAccess(node) {
+	return (
+		node.type === 'MemberExpression' &&
+		!node.computed &&
+		node.property.name === 'origin' &&
+		node.object.type === 'MemberExpression' &&
+		!node.object.computed &&
+		node.object.property.name === 'location' &&
+		node.object.object.type === 'Identifier' &&
+		node.object.object.name === 'window'
+	);
+}
+
+function isHrefAccess(node) {
+	return (
+		node.type === 'MemberExpression' &&
+		!node.computed &&
+		node.property.name === 'href' &&
+		node.object.type === 'MemberExpression' &&
+		!node.object.computed &&
+		node.object.property.name === 'location' &&
+		node.object.object.type === 'Identifier' &&
+		node.object.object.name === 'window'
+	);
+}
+
+function isExternalUrl(node) {
+	if (node.type === 'Literal' && typeof node.value === 'string') {
+		return node.value.startsWith('http://') || node.value.startsWith('https://');
+	}
+	if (node.type === 'TemplateLiteral' && node.quasis.length > 0) {
+		const raw = node.quasis[0].value.raw;
+		return raw.startsWith('http://') || raw.startsWith('https://');
+	}
+	return false;
+}
+
+// window.open(withBasePath(x)) and window.open(getAbsoluteUrl(x)) are already safe.
+function isSafeHelperCall(node) {
+	return (
+		node.type === 'CallExpression' &&
+		node.callee.type === 'Identifier' &&
+		(node.callee.name === 'withBasePath' || node.callee.name === 'getAbsoluteUrl')
+	);
+}
+
+module.exports = {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Disallow raw window.open and origin-concatenation patterns that miss the runtime base path',
+			category: 'Base Path Safety',
+		},
+		schema: [],
+		messages: {
+			windowOpen:
+				'Use openInNewTab(path) instead of window.open(path, "_blank") — openInNewTab prepends the base path automatically.',
+			originConcat:
+				'Use getAbsoluteUrl(path) instead of window.location.origin + path — getAbsoluteUrl prepends the base path automatically.',
+			originDirect:
+				'Use getBaseUrl() instead of window.location.origin — getBaseUrl includes the base path.',
+			hrefAssign:
+				'Use withBasePath(path) or navigate() instead of window.location.href = path — ensures the base path is included.',
+		},
+	},
+
+	create(context) {
+		return {
+			// window.open(path, ...) — allow only external first-arg URLs
+			CallExpression(node) {
+				const { callee, arguments: args } = node;
+				if (
+					callee.type !== 'MemberExpression' ||
+					callee.object.type !== 'Identifier' ||
+					callee.object.name !== 'window' ||
+					callee.property.name !== 'open'
+				)
+					return;
+				if (args.length < 1) return;
+				if (isExternalUrl(args[0])) return;
+				if (isSafeHelperCall(args[0])) return;
+
+				context.report({ node, messageId: 'windowOpen' });
+			},
+
+			// window.location.origin + path
+			BinaryExpression(node) {
+				if (node.operator !== '+') return;
+				if (isOriginAccess(node.left) || isOriginAccess(node.right)) {
+					context.report({ node, messageId: 'originConcat' });
+				}
+			},
+
+			// `${window.location.origin}${path}`
+			TemplateLiteral(node) {
+				if (node.expressions.some(isOriginAccess)) {
+					context.report({ node, messageId: 'originConcat' });
+				}
+			},
+
+			// window.location.origin used directly (not in concatenation)
+			// Catches: frontendBaseUrl: window.location.origin
+			MemberExpression(node) {
+				if (!isOriginAccess(node)) return;
+
+				const parent = node.parent;
+				// Skip if parent is BinaryExpression with + (handled by BinaryExpression visitor)
+				if (parent.type === 'BinaryExpression' && parent.operator === '+') return;
+				// Skip if inside TemplateLiteral (handled by TemplateLiteral visitor)
+				if (parent.type === 'TemplateLiteral') return;
+
+				context.report({ node, messageId: 'originDirect' });
+			},
+
+			// window.location.href = path
+			AssignmentExpression(node) {
+				if (node.operator !== '=') return;
+				if (!isHrefAccess(node.left)) return;
+
+				// Allow external URLs
+				if (isExternalUrl(node.right)) return;
+				// Allow safe helper calls
+				if (isSafeHelperCall(node.right)) return;
+
+				context.report({ node, messageId: 'hrefAssign' });
+			},
+		};
+	},
+};

frontend/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
+		<base href="[[.BaseHref]]" />
 		<meta
 			http-equiv="Cache-Control"
 			content="no-cache, no-store, must-revalidate, max-age: 0"
@@ -59,7 +60,7 @@
 		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
 		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
 		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
+		<link data-react-helmet="true" rel="shortcut icon" href="favicon.ico" />
 	</head>
 	<body data-theme="default">
 		<script>
@@ -136,7 +137,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="/css/uPlot.min.css" />
+		<link rel="stylesheet" href="css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>

frontend/src/ReactI18/index.tsx

@@ -2,6 +2,7 @@ import { initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
+import { getBasePath } from 'utils/basePath';
 
 import cacheBursting from '../../i18n-translations-hash.json';
 
@@ -24,7 +25,7 @@ i18n
 				const ns = namespace[0];
 				const pathkey = `/${language}/${ns}`;
 				const hash = cacheBursting[pathkey as keyof typeof cacheBursting] || '';
-				return `/locales/${language}/${namespace}.json?h=${hash}`;
+				return `${getBasePath()}locales/${language}/${namespace}.json?h=${hash}`;
 			},
 		},
 		react: {

frontend/src/api/generatedAPIInstance.ts

@@ -1,5 +1,6 @@
 import {
 	interceptorRejected,
+	interceptorsRequestBasePath,
 	interceptorsRequestResponse,
 	interceptorsResponse,
 } from 'api';
@@ -17,6 +18,7 @@ export const GeneratedAPIInstance = <T>(
 	return generatedAPIAxiosInstance({ ...config }).then(({ data }) => data);
 };
 
+generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
 generatedAPIAxiosInstance.interceptors.response.use(
 	interceptorsResponse,

frontend/src/api/index.ts

@@ -11,6 +11,7 @@ import axios, {
 import { ENVIRONMENT } from 'constants/env';
 import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';
 
 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
@@ -67,6 +68,39 @@ export const interceptorsRequestResponse = (
 	return value;
 };
 
+// Strips the leading '/' from path and joins with base — idempotent if already prefixed.
+// e.g. prependBase('/signoz/', '/api/v1/') → '/signoz/api/v1/'
+function prependBase(base: string, path: string): string {
+	return path.startsWith(base) ? path : base + path.slice(1);
+}
+
+// Prepends the runtime base path to outgoing requests so API calls work under
+// a URL prefix (e.g. /signoz/api/v1/…). No-op for root deployments and dev
+// (dev baseURL is a full http:// URL, not an absolute path).
+export const interceptorsRequestBasePath = (
+	value: InternalAxiosRequestConfig,
+): InternalAxiosRequestConfig => {
+	const basePath = getBasePath();
+	if (basePath === '/') {
+		return value;
+	}
+
+	if (value.baseURL?.startsWith('/')) {
+		// Production relative baseURL: '/api/v1/' → '/signoz/api/v1/'
+		value.baseURL = prependBase(basePath, value.baseURL);
+	} else if (value.baseURL?.startsWith('http')) {
+		// Dev absolute baseURL (VITE_FRONTEND_API_ENDPOINT): 'https://host/api/v1/' → 'https://host/signoz/api/v1/'
+		const url = new URL(value.baseURL);
+		url.pathname = prependBase(basePath, url.pathname);
+		value.baseURL = url.toString();
+	} else if (!value.baseURL && value.url?.startsWith('/')) {
+		// Orval-generated client (empty baseURL, path in url): '/api/signoz/v1/rules' → '/signoz/api/signoz/v1/rules'
+		value.url = prependBase(basePath, value.url);
+	}
+
+	return value;
+};
+
 export const interceptorRejected = async (
 	value: AxiosResponse<any>,
 ): Promise<AxiosResponse<any>> => {
@@ -133,6 +167,7 @@ const instance = axios.create({
 });
 
 instance.interceptors.request.use(interceptorsRequestResponse);
+instance.interceptors.request.use(interceptorsRequestBasePath);
 instance.interceptors.response.use(interceptorsResponse, interceptorRejected);
 
 export const AxiosAlertManagerInstance = axios.create({
@@ -147,6 +182,7 @@ ApiV2Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV2Instance.interceptors.request.use(interceptorsRequestBasePath);
 
 // axios V3
 export const ApiV3Instance = axios.create({
@@ -158,6 +194,7 @@ ApiV3Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV3Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V4
@@ -170,6 +207,7 @@ ApiV4Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV4Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V5
@@ -182,6 +220,7 @@ ApiV5Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV5Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios Base
@@ -194,6 +233,7 @@ LogEventAxiosInstance.interceptors.response.use(
 	interceptorRejectedBase,
 );
 LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
+LogEventAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 AxiosAlertManagerInstance.interceptors.response.use(
@@ -201,6 +241,7 @@ AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorRejected,
 );
 AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestResponse);
+AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestBasePath);
 
 export { apiV1 };
 export default instance;

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -12,6 +12,7 @@ import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { withBasePath } from 'utils/basePath';
 
 export interface NavigateToExplorerProps {
 	filters: TagFilterItem[];
@@ -133,7 +134,7 @@ export function useNavigateToExplorer(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;
 
-			window.open(newExplorerPath, sameTab ? '_self' : '_blank');
+			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
 		},
 		[
 			prepareQuery,

frontend/src/hooks/useSafeNavigate.ts

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { cloneDeep, isEqual } from 'lodash-es';
+import { withBasePath } from 'utils/basePath';
 
 interface NavigateOptions {
 	replace?: boolean;
@@ -130,7 +131,7 @@ export const useSafeNavigate = (
 					typeof to === 'string'
 						? to
 						: `${to.pathname || location.pathname}${to.search || ''}`;
-				window.open(targetPath, '_blank');
+				window.open(withBasePath(targetPath), '_blank');
 				return;
 			}
 

frontend/src/lib/history.ts

@@ -1,3 +1,4 @@
 import { createBrowserHistory } from 'history';
+import { getBasePath } from 'utils/basePath';
 
-export default createBrowserHistory();
+export default createBrowserHistory({ basename: getBasePath() });

frontend/src/pages/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx

@@ -4,6 +4,7 @@ import ROUTES from 'constants/routes';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Home, LifeBuoy } from 'lucide-react';
+import { withBasePath } from 'utils/basePath';
 
 import cloudUrl from '@/assets/Images/cloud.svg';
 
@@ -11,8 +12,8 @@ import './ErrorBoundaryFallback.styles.scss';
 
 function ErrorBoundaryFallback(): JSX.Element {
 	const handleReload = (): void => {
-		// Go to home page
-		window.location.href = ROUTES.HOME;
+		// Hard reload resets Sentry.ErrorBoundary state; withBasePath preserves any /signoz/ prefix.
+		window.location.href = withBasePath(ROUTES.HOME);
 	};
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();

frontend/src/utils/__tests__/basePath.test.ts

@@ -0,0 +1,118 @@
+/**
+ * basePath is memoized at module init, so each describe block isolates the
+ * module with a fresh DOM state using jest.isolateModules + require.
+ */
+
+type BasePath = typeof import('../basePath');
+
+function loadModule(href?: string): BasePath {
+	if (href !== undefined) {
+		const base = document.createElement('base');
+		base.setAttribute('href', href);
+		document.head.appendChild(base);
+	}
+
+	let mod!: BasePath;
+	jest.isolateModules(() => {
+		// eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+		mod = require('../basePath');
+	});
+	return mod;
+}
+
+afterEach(() => {
+	document.head.querySelectorAll('base').forEach((el) => el.remove());
+});
+
+describe('at basePath="/"', () => {
+	let m: BasePath;
+	beforeEach(() => {
+		m = loadModule('/');
+	});
+
+	it('getBasePath returns "/"', () => {
+		expect(m.getBasePath()).toBe('/');
+	});
+
+	it('withBasePath is a no-op for any internal path', () => {
+		expect(m.withBasePath('/logs')).toBe('/logs');
+		expect(m.withBasePath('/logs/explorer')).toBe('/logs/explorer');
+	});
+
+	it('withBasePath passes through external URLs', () => {
+		expect(m.withBasePath('https://example.com/foo')).toBe(
+			'https://example.com/foo',
+		);
+	});
+
+	it('getAbsoluteUrl returns origin + path', () => {
+		expect(m.getAbsoluteUrl('/logs')).toBe(`${window.location.origin}/logs`);
+	});
+
+	it('getBaseUrl returns bare origin', () => {
+		expect(m.getBaseUrl()).toBe(window.location.origin);
+	});
+});
+
+describe('at basePath="/signoz/"', () => {
+	let m: BasePath;
+	beforeEach(() => {
+		m = loadModule('/signoz/');
+	});
+
+	it('getBasePath returns "/signoz/"', () => {
+		expect(m.getBasePath()).toBe('/signoz/');
+	});
+
+	it('withBasePath prepends the prefix', () => {
+		expect(m.withBasePath('/logs')).toBe('/signoz/logs');
+		expect(m.withBasePath('/logs/explorer')).toBe('/signoz/logs/explorer');
+	});
+
+	it('withBasePath is idempotent — safe to call twice', () => {
+		expect(m.withBasePath('/signoz/logs')).toBe('/signoz/logs');
+	});
+
+	it('withBasePath is idempotent when path equals the prefix without trailing slash', () => {
+		expect(m.withBasePath('/signoz')).toBe('/signoz');
+	});
+
+	it('withBasePath passes through external URLs', () => {
+		expect(m.withBasePath('https://example.com/foo')).toBe(
+			'https://example.com/foo',
+		);
+	});
+
+	it('getAbsoluteUrl returns origin + prefixed path', () => {
+		expect(m.getAbsoluteUrl('/logs')).toBe(
+			`${window.location.origin}/signoz/logs`,
+		);
+	});
+
+	it('getBaseUrl returns origin + prefix without trailing slash', () => {
+		expect(m.getBaseUrl()).toBe(`${window.location.origin}/signoz`);
+	});
+});
+
+describe('no <base> tag', () => {
+	it('getBasePath falls back to "/"', () => {
+		const m = loadModule();
+		expect(m.getBasePath()).toBe('/');
+	});
+});
+
+describe('href without trailing slash', () => {
+	it('normalises to trailing slash', () => {
+		const m = loadModule('/signoz');
+		expect(m.getBasePath()).toBe('/signoz/');
+		expect(m.withBasePath('/logs')).toBe('/signoz/logs');
+	});
+});
+
+describe('nested prefix "/a/b/prefix/"', () => {
+	it('withBasePath handles arbitrary depth', () => {
+		const m = loadModule('/a/b/prefix/');
+		expect(m.withBasePath('/logs')).toBe('/a/b/prefix/logs');
+		expect(m.withBasePath('/a/b/prefix/logs')).toBe('/a/b/prefix/logs');
+	});
+});

frontend/src/utils/__tests__/navigation.test.ts

@@ -1,15 +1,27 @@
 import { isModifierKeyPressed } from '../app';
-import { openInNewTab } from '../navigation';
+
+type NavigationModule = typeof import('../navigation');
+
+function loadNavigationModule(href?: string): NavigationModule {
+	if (href !== undefined) {
+		const base = document.createElement('base');
+		base.setAttribute('href', href);
+		document.head.appendChild(base);
+	}
+	let mod!: NavigationModule;
+	jest.isolateModules(() => {
+		// eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+		mod = require('../navigation');
+	});
+	return mod;
+}
 
 describe('navigation utilities', () => {
 	const originalWindowOpen = window.open;
 
-	beforeEach(() => {
-		window.open = jest.fn();
-	});
-
 	afterEach(() => {
 		window.open = originalWindowOpen;
+		document.head.querySelectorAll('base').forEach((el) => el.remove());
 	});
 
 	describe('isModifierKeyPressed', () => {
@@ -56,25 +68,59 @@ describe('navigation utilities', () => {
 	});
 
 	describe('openInNewTab', () => {
-		it('calls window.open with the given path and _blank target', () => {
-			openInNewTab('/dashboard');
-			expect(window.open).toHaveBeenCalledWith('/dashboard', '_blank');
+		describe('at basePath="/"', () => {
+			let m: NavigationModule;
+			beforeEach(() => {
+				window.open = jest.fn();
+				m = loadNavigationModule('/');
+			});
+
+			it('passes internal path through unchanged', () => {
+				m.openInNewTab('/dashboard');
+				expect(window.open).toHaveBeenCalledWith('/dashboard', '_blank');
+			});
+
+			it('passes through external URLs unchanged', () => {
+				m.openInNewTab('https://example.com/page');
+				expect(window.open).toHaveBeenCalledWith(
+					'https://example.com/page',
+					'_blank',
+				);
+			});
+
+			it('handles paths with query strings', () => {
+				m.openInNewTab('/alerts?tab=AlertRules&relativeTime=30m');
+				expect(window.open).toHaveBeenCalledWith(
+					'/alerts?tab=AlertRules&relativeTime=30m',
+					'_blank',
+				);
+			});
 		});
 
-		it('handles full URLs', () => {
-			openInNewTab('https://example.com/page');
-			expect(window.open).toHaveBeenCalledWith(
-				'https://example.com/page',
-				'_blank',
-			);
-		});
+		describe('at basePath="/signoz/"', () => {
+			let m: NavigationModule;
+			beforeEach(() => {
+				window.open = jest.fn();
+				m = loadNavigationModule('/signoz/');
+			});
 
-		it('handles paths with query strings', () => {
-			openInNewTab('/alerts?tab=AlertRules&relativeTime=30m');
-			expect(window.open).toHaveBeenCalledWith(
-				'/alerts?tab=AlertRules&relativeTime=30m',
-				'_blank',
-			);
+			it('prepends base path to internal paths', () => {
+				m.openInNewTab('/dashboard');
+				expect(window.open).toHaveBeenCalledWith('/signoz/dashboard', '_blank');
+			});
+
+			it('passes through external URLs unchanged', () => {
+				m.openInNewTab('https://example.com/page');
+				expect(window.open).toHaveBeenCalledWith(
+					'https://example.com/page',
+					'_blank',
+				);
+			});
+
+			it('is idempotent — does not double-prefix an already-prefixed path', () => {
+				m.openInNewTab('/signoz/dashboard');
+				expect(window.open).toHaveBeenCalledWith('/signoz/dashboard', '_blank');
+			});
 		});
 	});
 });

frontend/src/utils/basePath.ts

@@ -0,0 +1,50 @@
+// Read once at module init — avoids a DOM query on every axios request.
+const _basePath: string = ((): string => {
+	const href = document.querySelector('base')?.getAttribute('href') ?? '/';
+	return href.endsWith('/') ? href : `${href}/`;
+})();
+
+/** Returns the runtime base path — always trailing-slashed. e.g. "/" or "/signoz/" */
+export function getBasePath(): string {
+	return _basePath;
+}
+
+/**
+ * Prepends the base path to an internal absolute path.
+ * Idempotent and safe to call on any value.
+ *
+ *   withBasePath('/logs')         → '/signoz/logs'
+ *   withBasePath('/signoz/logs')  → '/signoz/logs'  (already prefixed)
+ *   withBasePath('https://x.com') → 'https://x.com' (external, passthrough)
+ */
+export function withBasePath(path: string): string {
+	if (!path.startsWith('/')) {
+		return path;
+	}
+	if (_basePath === '/') {
+		return path;
+	}
+	if (path.startsWith(_basePath) || path === _basePath.slice(0, -1)) {
+		return path;
+	}
+	return _basePath + path.slice(1);
+}
+
+/**
+ * Full absolute URL — for copy-to-clipboard and window.open calls.
+ * getAbsoluteUrl(ROUTES.LOGS_EXPLORER) → 'https://host/signoz/logs/logs-explorer'
+ */
+export function getAbsoluteUrl(path: string): string {
+	return window.location.origin + withBasePath(path);
+}
+
+/**
+ * Origin + base path without trailing slash — for sending to the backend
+ * as frontendBaseUrl in invite / password-reset email flows.
+ * getBaseUrl() → 'https://host/signoz'
+ */
+export function getBaseUrl(): string {
+	return (
+		window.location.origin + (_basePath === '/' ? '' : _basePath.slice(0, -1))
+	);
+}

frontend/src/utils/navigation.ts

@@ -1,6 +1,5 @@
-/**
- * Opens the given path in a new browser tab.
- */
+import { withBasePath } from 'utils/basePath';
+
 export const openInNewTab = (path: string): void => {
-	window.open(path, '_blank');
+	window.open(withBasePath(path), '_blank');
 };

frontend/vite.config.ts

@@ -10,6 +10,18 @@ import { createHtmlPlugin } from 'vite-plugin-html';
 import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
+// In dev the Go backend is not involved, so replace the [[.BaseHref]] placeholder
+// with "/" so relative assets resolve correctly from the Vite dev server.
+function devBasePathPlugin(): Plugin {
+	return {
+		name: 'dev-base-path',
+		apply: 'serve',
+		transformIndexHtml(html): string {
+			return html.replaceAll('[[.BaseHref]]', '/');
+		},
+	};
+}
+
 function rawMarkdownPlugin(): Plugin {
 	return {
 		name: 'raw-markdown',
@@ -32,6 +44,7 @@ export default defineConfig(
 		const plugins = [
 			tsconfigPaths(),
 			rawMarkdownPlugin(),
+			devBasePathPlugin(),
 			react(),
 			createHtmlPlugin({
 				inject: {
@@ -124,6 +137,7 @@ export default defineConfig(
 				'process.env.TUNNEL_DOMAIN': JSON.stringify(env.VITE_TUNNEL_DOMAIN),
 				'process.env.DOCS_BASE_URL': JSON.stringify(env.VITE_DOCS_BASE_URL),
 			},
+			base: './',
 			build: {
 				sourcemap: true,
 				outDir: 'build',