Add support for custom UI configuration in development mode

[Copilot]

The Jaeger UI config is normally injected by the Go query-service into index.html. When running locally via npm start, there was no way to provide custom configuration.

Changes

• Vite plugin (vite.config.mts): Added jaegerUiConfigPlugin that transforms index.html to inject local config files, mimicking the query-service behavior
• Config formats: Supports both jaeger-ui.config.json and jaeger-ui.config.js (JS takes priority, same as query-service)
• Documentation (README.md): Added "Configuration for Local Development" section
• Example config: jaeger-ui.config.example.json as a starting template
• Git exclusion: Local config files added to .gitignore

Usage

Create packages/jaeger-ui/jaeger-ui.config.json:

{
  "dependencies": { "menuEnabled": true },
  "monitor": { "menuEnabled": false }
}

Or for dynamic config, jaeger-ui.config.js:

return {
  menu: [{ label: "Custom", items: [{ label: "Link", url: "https://example.com" }] }]
};

Then run npm start - the plugin logs which config file is loaded.

Screenshot

Custom menu injected via local config file:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Jaeger UI allows customizing its behavior via config file, but the config file is normally provided to the Go application that runs the server and just serves the static HTTP assets generated by this UI project, and it injects the provided config into main index.html file (javascript section) from where it is retrieved by the react app. How can I provide a custom configuration when I run the UI in test mode via npm start?

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.92%. Comparing base (e4afea7) to head (b4be7dc).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3194   +/-   ##
=======================================
  Coverage   97.92%   97.92%           
=======================================
  Files         260      260           
  Lines        8144     8144           
  Branches     2146     2060   -86     
=======================================
  Hits         7975     7975           
  Misses        169      169           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[graphite-app]

Critical Bug: Incorrect fallback behavior when JS config fails to load

When jaeger-ui.config.js exists but fails to load (e.g., syntax error, read error), the code logs the error but continues execution, potentially falling through to load jaeger-ui.config.json instead. This violates the documented priority rule that "JS takes priority".

Impact: If a developer creates a JS config file with a syntax error and also has a JSON config file, the plugin will silently use the JSON config instead of failing fast. This masks the JS config error and causes unexpected behavior.

Fix:

if (fs.existsSync(jsConfigPath)) {
  try {
    const jsContent = fs.readFileSync(jsConfigPath, 'utf-8');
    const uiConfigFn = `function UIConfig() { ${jsContent} }`;
    html = html.replace('// JAEGER_CONFIG_JS', uiConfigFn);
    console.log('[jaeger-ui-config] Loaded config from jaeger-ui.config.js');
    return html;
  } catch (err) {
    console.error('[jaeger-ui-config] Error loading jaeger-ui.config.js:', err);
    return html; // Return without trying JSON config
  }
}

Suggested change

	if (fs.existsSync(jsConfigPath)) {
	try {
	const jsContent = fs.readFileSync(jsConfigPath, 'utf-8');
	// Replace the JAEGER_CONFIG_JS comment with UIConfig function
	// This mimics the Go server behavior for .js config files
	const uiConfigFn = `function UIConfig() { ${jsContent} }`;
	html = html.replace('// JAEGER_CONFIG_JS', uiConfigFn);
	console.log('[jaeger-ui-config] Loaded config from jaeger-ui.config.js');
	return html;
	} catch (err) {
	console.error('[jaeger-ui-config] Error loading jaeger-ui.config.js:', err);
	}
	}
	if (fs.existsSync(jsConfigPath)) {
	try {
	const jsContent = fs.readFileSync(jsConfigPath, 'utf-8');
	// Replace the JAEGER_CONFIG_JS comment with UIConfig function
	// This mimics the Go server behavior for .js config files
	const uiConfigFn = `function UIConfig() { ${jsContent} }`;
	html = html.replace('// JAEGER_CONFIG_JS', uiConfigFn);
	console.log('[jaeger-ui-config] Loaded config from jaeger-ui.config.js');
	return html;
	} catch (err) {
	console.error('[jaeger-ui-config] Error loading jaeger-ui.config.js:', err);
	return html; // Return without trying JSON config
	}
	}

Spotted by Graphite Agent



Is this helpful? React 👍 or 👎 to let us know.