@n8n/frontend-module-otel 0.2.0 → 0.3.0

package/package.json

@@ -1,24 +1,33 @@
 {
   "name": "@n8n/frontend-module-otel",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts"
   },
   "dependencies": {
+    "@n8n/api-types": "1.39.0",
+    "@n8n/composables": "1.29.0",
+    "@n8n/design-system": "2.38.0",
+    "@n8n/frontend-module-sdk": "0.9.0",
+    "@n8n/i18n": "2.39.0",
+    "@n8n/rest-api-client": "2.39.0",
+    "@n8n/stores": "2.39.0",
     "pinia": "^2.2.4",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
-    "@n8n/composables": "1.28.0",
-    "@n8n/frontend-module-sdk": "0.8.0",
-    "@n8n/design-system": "2.37.0",
-    "@n8n/i18n": "2.38.0",
-    "@n8n/rest-api-client": "2.38.0",
-    "@n8n/stores": "2.38.0"
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.488",
+    "@n8n/eslint-config": "0.0.1",
+    "@n8n/frontend-test-utils": "0.1.0",
+    "@n8n/frontend-vite-config": "0.1.0",
+    "@n8n/permissions": "0.76.0",
+    "@n8n/playwright-janitor": "0.1.0",
+    "@n8n/stylelint-config": "0.0.1",
+    "@n8n/typescript-config": "1.11.0",
+    "@n8n/vitest-config": "1.21.0",
     "@pinia/testing": "^0.1.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
@@ -31,15 +40,7 @@
     "vite": "^8.0.2",
     "vite-svg-loader": "5.1.0",
     "vitest": "^4.1.9",
-    "vue-tsc": "^2.2.8",
-    "@n8n/frontend-vite-config": "0.1.0",
-    "@n8n/eslint-config": "0.0.1",
-    "@n8n/permissions": "0.75.0",
-    "@n8n/playwright-janitor": "0.1.0",
-    "@n8n/frontend-test-utils": "0.1.0",
-    "@n8n/typescript-config": "1.11.0",
-    "@n8n/vitest-config": "1.21.0",
-    "@n8n/stylelint-config": "0.0.1"
+    "vue-tsc": "^2.2.8"
   },
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://n8n.io",

package/src/SettingsOpenTelemetryView.test.ts

@@ -1,7 +1,7 @@
 import { createComponentRenderer, mockedStore } from '@n8n/frontend-test-utils';
 import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
-import { waitFor } from '@testing-library/vue';
+import { screen, waitFor } from '@testing-library/vue';
 
 import type { OtelSettingsResponse } from './otel.api';
 import { useOtelStore } from './otel.store';
@@ -51,6 +51,7 @@ vi.mock('./otel.api', () => ({
 
 const makeSettings = (overrides: Partial<OtelSettingsResponse> = {}): OtelSettingsResponse => ({
 	enabled: false,
+	exporterProtocol: 'http/protobuf',
 	exporterEndpoint: 'http://localhost:4318',
 	exporterTracingPath: '/v1/traces',
 	exporterServiceName: 'n8n',
@@ -85,6 +86,12 @@ const typeIntoUnitInput = async (input: HTMLElement, value: string) => {
 	await userEvent.tab();
 };
 
+const selectProtocol = async (optionLabel: string) => {
+	const select = screen.getByTestId('otel-exporter-protocol');
+	await userEvent.click(select.querySelector('input')!);
+	await userEvent.click(await screen.findByText(optionLabel));
+};
+
 // ── tests ─────────────────────────────────────────────────────────────────────
 
 describe('SettingsOpenTelemetryView', () => {
@@ -113,6 +120,7 @@ describe('SettingsOpenTelemetryView', () => {
 			expect(getByTestId('otel-exporter-endpoint')).toBeInTheDocument();
 		});
 
+		expect(getByTestId('otel-exporter-protocol')).toBeInTheDocument();
 		expect(getByTestId('otel-service-name')).toBeInTheDocument();
 		expect(getByTestId('otel-tracing-path')).toBeInTheDocument();
 		expect(getByTestId('otel-sample-rate')).toBeInTheDocument();
@@ -300,7 +308,11 @@ describe('SettingsOpenTelemetryView', () => {
 		await waitFor(() => {
 			expect(telemetryTrack).toHaveBeenCalledWith(
 				'Updated otel via UI',
-				expect.objectContaining({ enabled: true, tracesSampleRate: 0.5 }),
+				expect.objectContaining({
+					enabled: true,
+					tracesSampleRate: 0.5,
+					protocol: 'http/protobuf',
+				}),
 			);
 			expect(telemetryTrack).not.toHaveBeenCalledWith('Activated otel via UI', expect.anything());
 			expect(telemetryTrack).not.toHaveBeenCalledWith('Disabled otel via UI');
@@ -463,6 +475,143 @@ describe('SettingsOpenTelemetryView', () => {
 		});
 	});
 
+	it('renders header keys with masked values when stored headers are redacted', async () => {
+		getOtelSettingsMock.mockResolvedValue(
+			makeSettings({
+				exporterHeaders: 'authorization=__n8n_BLANK_VALUE_e5362baf-c777-4d57-a609-6eaf1f9e87f6',
+				envManagedFields: [],
+			}),
+		);
+
+		const { getAllByTestId, getByTestId } = render();
+
+		await waitFor(() => {
+			expect(getAllByTestId('otel-header-key')).toHaveLength(1);
+		});
+		expect(getByTestId('otel-header-key')).toHaveValue('authorization');
+		// The blanked value renders empty with a hint instead of the placeholder text
+		expect(getByTestId('otel-header-value')).toHaveValue('');
+		expect(getByTestId('otel-header-value')).toHaveAttribute(
+			'placeholder',
+			'Configured value not shown',
+		);
+		// Field stays editable when not env-managed, so adding a header can replace the set
+		expect(getByTestId('otel-header-add')).toBeEnabled();
+	});
+
+	it('renders header keys with masked, disabled values when headers are env-managed', async () => {
+		getOtelSettingsMock.mockResolvedValue(
+			makeSettings({
+				exporterHeaders: 'authorization=__n8n_BLANK_VALUE_e5362baf-c777-4d57-a609-6eaf1f9e87f6',
+				envManagedFields: ['exporterHeaders'],
+			}),
+		);
+
+		const { getAllByTestId, getByTestId } = render();
+
+		await waitFor(() => {
+			expect(getAllByTestId('otel-header-key')).toHaveLength(1);
+		});
+		expect(getByTestId('otel-header-key')).toHaveValue('authorization');
+		expect(getByTestId('otel-header-key')).toBeDisabled();
+		expect(getByTestId('otel-header-value')).toHaveValue('');
+		expect(getByTestId('otel-header-value')).toBeDisabled();
+	});
+
+	// ── exporter protocol ─────────────────────────────────────────────────────
+
+	it('shows the saved protocol in the select', async () => {
+		getOtelSettingsMock.mockResolvedValue(makeSettings({ exporterProtocol: 'grpc' }));
+
+		const { getByTestId } = render();
+		await waitFor(() => expect(getByTestId('otel-exporter-protocol')).toBeInTheDocument());
+
+		const input = getByTestId('otel-exporter-protocol').querySelector('input');
+		expect(input).toHaveValue('gRPC');
+		expect(input).toHaveAttribute('aria-label', 'Protocol');
+	});
+
+	it('hides the trace path row and shows gRPC endpoint copy when the protocol is gRPC', async () => {
+		getOtelSettingsMock.mockResolvedValue(makeSettings({ exporterProtocol: 'grpc' }));
+
+		const { getByTestId, queryByTestId } = render();
+		await waitFor(() => expect(getByTestId('otel-exporter-endpoint')).toBeInTheDocument());
+
+		expect(queryByTestId('otel-tracing-path')).not.toBeInTheDocument();
+		expect(getByTestId('otel-exporter-endpoint')).toHaveAttribute(
+			'placeholder',
+			'http://collector.example.com:4317',
+		);
+	});
+
+	it('hides the trace path row after switching the protocol to gRPC', async () => {
+		const { getByTestId, queryByTestId, store } = render();
+		await waitFor(() => expect(getByTestId('otel-tracing-path')).toBeInTheDocument());
+
+		await selectProtocol('gRPC');
+
+		await waitFor(() => {
+			expect(store.settings.exporterProtocol).toBe('grpc');
+			expect(queryByTestId('otel-tracing-path')).not.toBeInTheDocument();
+		});
+	});
+
+	it('keeps the trace path across a switch to gRPC and back', async () => {
+		getOtelSettingsMock.mockResolvedValue(makeSettings({ exporterTracingPath: '/custom/traces' }));
+
+		const { getByTestId, queryByTestId, store } = render();
+		await waitFor(() => expect(getByTestId('otel-tracing-path')).toBeInTheDocument());
+
+		await selectProtocol('gRPC');
+		await waitFor(() => expect(queryByTestId('otel-tracing-path')).not.toBeInTheDocument());
+
+		await selectProtocol('HTTP (protobuf)');
+
+		await waitFor(() => expect(getByTestId('otel-tracing-path')).toBeInTheDocument());
+		expect(getByTestId('otel-tracing-path')).toHaveValue('/custom/traces');
+		expect(store.settings.exporterTracingPath).toBe('/custom/traces');
+	});
+
+	it('saves the protocol picked in the select', async () => {
+		const { getByTestId } = render();
+		await waitFor(() => expect(getByTestId('otel-exporter-protocol')).toBeInTheDocument());
+
+		await selectProtocol('gRPC');
+
+		await waitFor(() => expect(getByTestId('settings-save-bar-save')).toBeInTheDocument());
+		await userEvent.click(getByTestId('settings-save-bar-save'));
+
+		await waitFor(() => {
+			expect(updateOtelSettingsMock).toHaveBeenCalledWith(
+				expect.anything(),
+				expect.objectContaining({ exporterProtocol: 'grpc' }),
+			);
+		});
+	});
+
+	it('disables the protocol select when it is managed by an env var', async () => {
+		getOtelSettingsMock.mockResolvedValue(makeSettings({ envManagedFields: ['exporterProtocol'] }));
+
+		const { getByTestId } = render();
+		await waitFor(() => expect(getByTestId('otel-exporter-protocol')).toBeInTheDocument());
+
+		expect(getByTestId('otel-exporter-protocol').querySelector('input')).toBeDisabled();
+	});
+
+	it('invalidates a previous test result when the protocol changes', async () => {
+		const { getByTestId, getByText, queryByText } = render();
+		await waitFor(() => expect(getByTestId('otel-test-trace-button')).toBeInTheDocument());
+
+		await userEvent.click(getByTestId('otel-test-trace-button'));
+		await waitFor(() => expect(getByText(/span sent to collector at/)).toBeInTheDocument());
+
+		await selectProtocol('gRPC');
+
+		await waitFor(() => {
+			expect(queryByText(/span sent to collector at/)).not.toBeInTheDocument();
+		});
+	});
+
 	// ── test trace ────────────────────────────────────────────────────────────
 
 	it('renders the test trace button after fetch', async () => {

package/src/SettingsOpenTelemetryView.vue

@@ -11,6 +11,8 @@ import {
 	N8nIcon,
 	N8nInput,
 	N8nInputLabel,
+	N8nOption,
+	N8nSelect,
 	N8nSettingsLayout,
 	N8nSettingsPageHeader,
 	N8nSettingsRowGroup,
@@ -22,9 +24,13 @@ import { useSettingsStore } from '@n8n/stores/settings.store';
 import { computed, ref, watch, onMounted } from 'vue';
 import { onBeforeRouteLeave, type NavigationGuardNext } from 'vue-router';
 
-import { OTEL_FIELD_ENV_VARS, OTEL_TEST_SPAN_NAME } from './otel.constants';
+import {
+	CREDENTIALS_BLANKING_VALUE,
+	OTEL_FIELD_ENV_VARS,
+	OTEL_TEST_SPAN_NAME,
+} from './otel.constants';
 import { useOtelStore, headersStringToPairs, headersPairsToString } from './otel.store';
-import { createSampleRateFormat } from './otel.utils';
+import { createSampleRateFormat, isOtlpProtocol } from './otel.utils';
 import OtelSettingsRow from './OtelSettingsRow.vue';
 import OtelStatusControl from './OtelStatusControl.vue';
 
@@ -47,7 +53,7 @@ const showUnsavedChangesDialog = ref(false);
 const pendingNext = ref<NavigationGuardNext | null>(null);
 
 function syncHeaderPairsFromStore() {
-	headerPairs.value = headersStringToPairs(otelStore.settings.exporterHeaders);
+	headerPairs.value = headerPairsFromStore();
 }
 
 function syncHeaderPairsToStore() {
@@ -75,6 +81,23 @@ function isEnvManaged(field: keyof typeof OTEL_FIELD_ENV_VARS): boolean {
 	return otelStore.envManagedFields.includes(field);
 }
 
+// Keys come back from the API as-is; values come back blanked, so the value
+// inputs below render them empty until the user types a replacement. The pair
+// keeps the blanked value in state, so an untouched save preserves the stored one.
+function headerPairsFromStore(): Array<{ key: string; value: string }> {
+	return headersStringToPairs(otelStore.settings.exporterHeaders ?? '');
+}
+
+function headerValueDisplay(pair: { key: string; value: string }): string {
+	return pair.value === CREDENTIALS_BLANKING_VALUE ? '' : pair.value;
+}
+
+function headerValuePlaceholder(pair: { key: string; value: string }): string {
+	return pair.value === CREDENTIALS_BLANKING_VALUE
+		? i18n.baseText('settings.opentelemetry.exporterHeaders.hiddenValuePlaceholder')
+		: i18n.baseText('settings.opentelemetry.exporterHeaders.valuePlaceholder');
+}
+
 // State-first copy: the row tells the admin whether tracing is live right now,
 // instead of describing what the disabled state would mean hypothetically.
 const statusDescription = computed(() =>
@@ -83,6 +106,38 @@ const statusDescription = computed(() =>
 		: i18n.baseText('settings.opentelemetry.status.disabledDescription'),
 );
 
+const isGrpc = computed(() => otelStore.settings.exporterProtocol === 'grpc');
+
+const endpointDescription = computed(() =>
+	i18n.baseText(
+		isGrpc.value
+			? 'settings.opentelemetry.exporterEndpoint.grpcDescription'
+			: 'settings.opentelemetry.exporterEndpoint.description',
+	),
+);
+
+const endpointPlaceholder = computed(() =>
+	i18n.baseText(
+		isGrpc.value
+			? 'settings.opentelemetry.exporterEndpoint.grpcPlaceholder'
+			: 'settings.opentelemetry.exporterEndpoint.placeholder',
+	),
+);
+
+const headersDescription = computed(() =>
+	i18n.baseText(
+		isGrpc.value
+			? 'settings.opentelemetry.exporterHeaders.grpcDescription'
+			: 'settings.opentelemetry.exporterHeaders.description',
+	),
+);
+
+function onProtocolChange(value: unknown) {
+	if (isOtlpProtocol(value)) {
+		otelStore.settings.exporterProtocol = value;
+	}
+}
+
 function envTooltip(field: keyof typeof OTEL_FIELD_ENV_VARS): string {
 	const envVariable = i18n.baseText('settings.opentelemetry.envVarTooltip', {
 		interpolate: { envVar: OTEL_FIELD_ENV_VARS[field] },
@@ -101,6 +156,7 @@ async function save(): Promise<boolean> {
 
 		if (!wasEnabled && isNowEnabled) {
 			telemetry.track('Activated otel via UI', {
+				protocol: otelStore.settings.exporterProtocol,
 				includeNodeSpans: otelStore.settings.includeNodeSpans,
 				productionExecutionsOnly: otelStore.settings.productionExecutionsOnly,
 				tracesSampleRate: otelStore.settings.tracesSampleRate,
@@ -111,6 +167,7 @@ async function save(): Promise<boolean> {
 		} else {
 			telemetry.track('Updated otel via UI', {
 				enabled: isNowEnabled,
+				protocol: otelStore.settings.exporterProtocol,
 				includeNodeSpans: otelStore.settings.includeNodeSpans,
 				productionExecutionsOnly: otelStore.settings.productionExecutionsOnly,
 				tracesSampleRate: otelStore.settings.tracesSampleRate,
@@ -198,7 +255,7 @@ watch(
 	(newVal) => {
 		const currentString = headersPairsToString(headerPairs.value);
 		if (newVal !== currentString) {
-			headerPairs.value = headersStringToPairs(newVal ?? '');
+			headerPairs.value = headerPairsFromStore();
 		}
 	},
 );
@@ -323,6 +380,7 @@ async function onSendTestTrace() {
 // Connection changes invalidate the previous test result
 watch(
 	() => [
+		otelStore.settings.exporterProtocol,
 		otelStore.settings.exporterEndpoint,
 		otelStore.settings.exporterTracingPath,
 		otelStore.settings.exporterServiceName,
@@ -373,9 +431,38 @@ watch(
 				:title="i18n.baseText('settings.opentelemetry.collectorConnection.title')"
 			>
 				<N8nSettingsRowGroup>
+					<OtelSettingsRow
+						:title="i18n.baseText('settings.opentelemetry.exporterProtocol.label')"
+						:description="i18n.baseText('settings.opentelemetry.exporterProtocol.description')"
+						:env-tooltip="envTooltip('exporterProtocol')"
+						action-fill
+					>
+						<template #action>
+							<N8nSelect
+								:class="$style.control"
+								:model-value="otelStore.settings.exporterProtocol"
+								:disabled="isEnvManaged('exporterProtocol')"
+								:aria-label="i18n.baseText('settings.opentelemetry.exporterProtocol.label')"
+								data-test-id="otel-exporter-protocol"
+								@update:model-value="onProtocolChange"
+							>
+								<N8nOption
+									value="http/protobuf"
+									:label="
+										i18n.baseText('settings.opentelemetry.exporterProtocol.option.httpProtobuf')
+									"
+								/>
+								<N8nOption
+									value="grpc"
+									:label="i18n.baseText('settings.opentelemetry.exporterProtocol.option.grpc')"
+								/>
+							</N8nSelect>
+						</template>
+					</OtelSettingsRow>
+
 					<OtelSettingsRow
 						:title="i18n.baseText('settings.opentelemetry.exporterEndpoint.label')"
-						:description="i18n.baseText('settings.opentelemetry.exporterEndpoint.description')"
+						:description="endpointDescription"
 						:env-tooltip="envTooltip('exporterEndpoint')"
 						action-fill
 					>
@@ -383,7 +470,7 @@ watch(
 							<N8nInput
 								v-model="otelStore.settings.exporterEndpoint"
 								:class="$style.control"
-								:placeholder="i18n.baseText('settings.opentelemetry.exporterEndpoint.placeholder')"
+								:placeholder="endpointPlaceholder"
 								:disabled="isEnvManaged('exporterEndpoint')"
 								data-test-id="otel-exporter-endpoint"
 							/>
@@ -411,7 +498,7 @@ watch(
 
 					<OtelSettingsRow
 						:title="i18n.baseText('settings.opentelemetry.exporterHeaders.label')"
-						:description="i18n.baseText('settings.opentelemetry.exporterHeaders.description')"
+						:description="headersDescription"
 						:env-tooltip="envTooltip('exporterHeaders')"
 						layout="vertical"
 						action-fill
@@ -447,10 +534,8 @@ watch(
 										size="small"
 									>
 										<N8nInput
-											:model-value="pair.value"
-											:placeholder="
-												i18n.baseText('settings.opentelemetry.exporterHeaders.valuePlaceholder')
-											"
+											:model-value="headerValueDisplay(pair)"
+											:placeholder="headerValuePlaceholder(pair)"
 											:disabled="isEnvManaged('exporterHeaders')"
 											data-test-id="otel-header-value"
 											@update:model-value="(v: string) => onHeaderChange(index, 'value', v)"
@@ -486,6 +571,7 @@ watch(
 					</OtelSettingsRow>
 
 					<OtelSettingsRow
+						v-if="!isGrpc"
 						:title="i18n.baseText('settings.opentelemetry.exporterTracingPath.label')"
 						:description="i18n.baseText('settings.opentelemetry.exporterTracingPath.description')"
 						:env-tooltip="envTooltip('exporterTracingPath')"

package/src/otel.api.test.ts

@@ -14,6 +14,7 @@ const context: IRestApiContext = { baseUrl: 'http://localhost:5678', pushRef: ''
 
 const makeSettings = (overrides: Partial<OtelSettingsResponse> = {}): OtelSettingsResponse => ({
 	enabled: false,
+	exporterProtocol: 'http/protobuf',
 	exporterEndpoint: 'http://localhost:4318',
 	exporterTracingPath: '/v1/traces',
 	exporterServiceName: 'n8n',
@@ -59,6 +60,7 @@ describe('otel.api', () => {
 
 	describe('sendOtelTestTrace', () => {
 		const connection: OtelTestConnection = {
+			exporterProtocol: 'grpc',
 			exporterEndpoint: 'https://collector.io',
 			exporterTracingPath: '/v1/traces',
 			exporterServiceName: 'n8n',

package/src/otel.api.ts

@@ -1,8 +1,11 @@
 import type { IRestApiContext } from '@n8n/rest-api-client';
 import { makeRestApiRequest } from '@n8n/rest-api-client';
 
+import type { OtlpProtocol } from './otel.constants';
+
 export type OtelSettings = {
 	enabled: boolean;
+	exporterProtocol: OtlpProtocol;
 	exporterEndpoint: string;
 	exporterTracingPath: string;
 	exporterServiceName: string;
@@ -31,6 +34,7 @@ export async function updateOtelSettings(
 
 export type OtelTestConnection = Pick<
 	OtelSettings,
+	| 'exporterProtocol'
 	| 'exporterEndpoint'
 	| 'exporterTracingPath'
 	| 'exporterServiceName'

package/src/otel.constants.ts

@@ -1,5 +1,16 @@
+import { OTLP_PROTOCOLS, type OtlpProtocol } from '@n8n/api-types';
+
+export { OTLP_PROTOCOLS, type OtlpProtocol };
+
 export const OTEL_STORE = 'otel';
 
+/**
+ * Mirrors CREDENTIAL_BLANKING_VALUE from n8n-workflow (not a dependency of this
+ * module) — the placeholder the API returns in place of each header value.
+ * Keys come back as-is; only values are blanked.
+ */
+export const CREDENTIALS_BLANKING_VALUE = '__n8n_BLANK_VALUE_e5362baf-c777-4d57-a609-6eaf1f9e87f6';
+
 /**
  * Route name for the OpenTelemetry settings page. Owned by this module rather
  * than by the shared `VIEWS` enum, so the module can be packaged without the
@@ -14,6 +25,7 @@ export const OTEL_TEST_SPAN_NAME = 'n8n.test_trace';
 /** Maps each settings field to its env-var name — shown in per-field tooltips. */
 export const OTEL_FIELD_ENV_VARS = {
 	enabled: 'N8N_OTEL_ENABLED',
+	exporterProtocol: 'N8N_OTEL_EXPORTER_OTLP_PROTOCOL',
 	exporterEndpoint: 'N8N_OTEL_EXPORTER_OTLP_ENDPOINT',
 	exporterTracingPath: 'N8N_OTEL_EXPORTER_OTLP_TRACING_PATH',
 	exporterServiceName: 'N8N_OTEL_EXPORTER_SERVICE_NAME',

package/src/otel.module.test.ts

@@ -1,3 +1,4 @@
+import { i18nInstance, setLanguage } from '@n8n/i18n';
 import type { Scope } from '@n8n/permissions';
 import { useRBACStore } from '@n8n/stores/rbac.store';
 import { createPinia, setActivePinia } from 'pinia';
@@ -51,6 +52,44 @@ describe('OtelModule', () => {
 		});
 	});
 
+	describe('label', () => {
+		const OTEL_LABEL_KEY = 'settings.opentelemetry';
+
+		afterEach(() => {
+			setLanguage('en');
+		});
+
+		it('should read the label from i18n', () => {
+			expect(settingsPage()?.label).toBe('OpenTelemetry');
+		});
+
+		it('should follow a language change after registration', () => {
+			const item = settingsPage();
+			expect(item?.label).toBe('OpenTelemetry');
+
+			// `Object.fromEntries`, because a dotted i18n key is not a lintable
+			// object-literal property name.
+			i18nInstance.global.mergeLocaleMessage(
+				'de',
+				Object.fromEntries([[OTEL_LABEL_KEY, 'OpenTelemetrie']]),
+			);
+			setLanguage('de');
+
+			expect(item?.label).toBe('OpenTelemetrie');
+		});
+
+		it('should read i18n lazily, not when the descriptor is imported', () => {
+			// The descriptor is imported by the shell manifest at boot, before `App.vue`
+			// calls `setLanguage`. A resolved string here would freeze the boot locale,
+			// and would put an i18n read at module scope — which the import-light rule
+			// for `*.module.ts` bans.
+			const descriptor = Object.getOwnPropertyDescriptor(settingsPage(), 'label');
+
+			expect(typeof descriptor?.get).toBe('function');
+			expect(descriptor?.value).toBeUndefined();
+		});
+	});
+
 	describe('route', () => {
 		it('should keep routing to the unchanged SettingsOpenTelemetryView route name', () => {
 			expect(OTEL_SETTINGS_VIEW).toBe('SettingsOpenTelemetryView');

package/src/otel.module.ts

@@ -4,8 +4,6 @@ import { useRBACStore } from '@n8n/stores/rbac.store';
 
 import { OTEL_SETTINGS_VIEW } from './otel.constants';
 
-const i18n = useI18n();
-
 // typescript-eslint reads an SFC import as `any`, because only vue-tsc can type one.
 // `pnpm turbo typecheck` is what checks this component for real.
 // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -39,11 +37,11 @@ export const OtelModule: FrontendModuleDescription = {
 		{
 			id: 'settings-opentelemetry',
 			icon: 'telescope',
-			label: i18n.baseText('settings.opentelemetry'),
+			get label() {
+				return useI18n().baseText('settings.opentelemetry');
+			},
 			position: 'top',
 			route: { to: { name: OTEL_SETTINGS_VIEW } },
-			// Getter, not a value: the item is registered once at init, but the
-			// scope check must re-run whenever the sidebar recomputes.
 			get available() {
 				return useRBACStore().hasScope('otel:manage');
 			},

package/src/otel.store.test.ts

@@ -22,6 +22,7 @@ const testTraceMock = vi.mocked(otelApi.sendOtelTestTrace);
 
 const makeSettings = (overrides: Partial<OtelSettingsResponse> = {}): OtelSettingsResponse => ({
 	enabled: false,
+	exporterProtocol: 'http/protobuf',
 	exporterEndpoint: 'http://localhost:4318',
 	exporterTracingPath: '/v1/traces',
 	exporterServiceName: 'n8n',
@@ -287,6 +288,7 @@ describe('useOtelStore', () => {
 		it('sends only the connection fields from the current settings', async () => {
 			fetchMock.mockResolvedValueOnce(
 				makeSettings({
+					exporterProtocol: 'grpc',
 					exporterEndpoint: 'https://collector.io',
 					exporterTracingPath: '/custom',
 					exporterServiceName: 'n8n-prod',
@@ -301,6 +303,7 @@ describe('useOtelStore', () => {
 			await store.sendTestTrace();
 
 			expect(testTraceMock).toHaveBeenCalledWith(expect.anything(), {
+				exporterProtocol: 'grpc',
 				exporterEndpoint: 'https://collector.io',
 				exporterTracingPath: '/custom',
 				exporterServiceName: 'n8n-prod',

package/src/otel.store.ts

@@ -29,6 +29,7 @@ export function headersPairsToString(pairs: Array<{ key: string; value: string }
 
 const defaultSettings: OtelSettings = {
 	enabled: false,
+	exporterProtocol: 'http/protobuf',
 	exporterEndpoint: 'http://localhost:4318',
 	exporterTracingPath: '/v1/traces',
 	exporterServiceName: 'n8n',
@@ -105,6 +106,7 @@ export const useOtelStore = defineStore(OTEL_STORE, () => {
 		testError.value = '';
 		try {
 			const result = await sendOtelTestTrace(rootStore.restApiContext, {
+				exporterProtocol: settings.value.exporterProtocol,
 				exporterEndpoint: settings.value.exporterEndpoint,
 				exporterTracingPath: settings.value.exporterTracingPath,
 				exporterServiceName: settings.value.exporterServiceName,

package/src/otel.utils.test.ts

@@ -1,4 +1,17 @@
-import { createSampleRateFormat } from './otel.utils';
+import { createSampleRateFormat, isOtlpProtocol } from './otel.utils';
+
+describe('isOtlpProtocol', () => {
+	it.each(['http/protobuf', 'grpc'])('accepts the supported protocol %s', (value) => {
+		expect(isOtlpProtocol(value)).toBe(true);
+	});
+
+	it.each(['http/json', 'HTTP/PROTOBUF', '', undefined, null, 1])(
+		'rejects %s',
+		(value: unknown) => {
+			expect(isOtlpProtocol(value)).toBe(false);
+		},
+	);
+});
 
 describe('createSampleRateFormat', () => {
 	describe.each(['en-US', 'de-DE', 'fr-FR', 'ar-EG', 'fa-IR'])('locale %s', (locale) => {

package/src/otel.utils.ts

@@ -1,3 +1,9 @@
+import { OTLP_PROTOCOLS, type OtlpProtocol } from './otel.constants';
+
+export function isOtlpProtocol(value: unknown): value is OtlpProtocol {
+	return OTLP_PROTOCOLS.some((protocol) => protocol === value);
+}
+
 /**
  * Locale-aware formatting and parsing for the traces sample rate (0..1).
  *