feat(onboarding): Add metrics onboarding for JS SDKs

[chargome]

resolves https://linear.app/getsentry/issue/LOGS-378/uisdk-metrics-empty-state-project-onboarding

[linear]

LOGS-378 [UI/SDK] Metrics empty state (project onboarding)

[chargome]

This still relies on getsentry/sentry-javascript#18088 being published

[cursor]

Bug: Feature flag gap for METRICS product selection

The getDisabledProducts function doesn't include a feature flag check for ProductSolution.METRICS, even though METRICS is now added to the product selection UI and platform availability lists. This is inconsistent with how other products (SESSION_REPLAY, PERFORMANCE_MONITORING, PROFILING, LOGS) are handled, where each has a corresponding feature flag check. Without this check, users could potentially select METRICS even if their organization doesn't have the feature enabled, leading to broken functionality or misleading UI state.

static/app/components/onboarding/productSelection.tsx#L31-L80

sentry/static/app/components/onboarding/productSelection.tsx

Lines 31 to 80 in 3b702e8

	const disabledProducts: DisabledProducts = {};
	const hasSessionReplay = organization.features.includes('session-replay');
	const hasPerformance = organization.features.includes('performance-view');
	const hasProfiling = organization.features.includes('profiling-view');
	const hasLogs = organization.features.includes('ourlogs-enabled');
	const isSelfHostedErrorsOnly = ConfigStore.get('isSelfHostedErrorsOnly');
	let reason = t('This feature is not enabled on your Sentry installation.');
	const createClickHandler = (feature: string, featureName: string) => () => {
	openModal(deps => (
	<FeatureDisabledModal {...deps} features={[feature]} featureName={featureName} />
	));
	};
	if (isSelfHostedErrorsOnly) {
	reason = t('This feature is disabled for errors only self-hosted');
	return Object.values(ProductSolution)
	.filter(product => product !== ProductSolution.ERROR_MONITORING)
	.reduce<DisabledProducts>((acc, prod) => {
	acc[prod] = {reason};
	return acc;
	}, {});
	}
	if (!hasSessionReplay) {
	disabledProducts[ProductSolution.SESSION_REPLAY] = {
	reason,
	onClick: createClickHandler('organizations:session-replay', 'Session Replay'),
	};
	}
	if (!hasPerformance) {
	disabledProducts[ProductSolution.PERFORMANCE_MONITORING] = {
	reason,
	onClick: createClickHandler('organizations:performance-view', 'Tracing'),
	};
	}
	if (!hasProfiling) {
	disabledProducts[ProductSolution.PROFILING] = {
	reason,
	onClick: createClickHandler('organizations:profiling-view', 'Profiling'),
	};
	}
	if (!hasLogs) {
	disabledProducts[ProductSolution.LOGS] = {
	reason,
	onClick: createClickHandler('organizations:ourlogs-enabled', 'Logs'),
	};
	}
	return disabledProducts;
	}

 

---

[cursor]

Bug: Metrics access bypasses feature flag check

The getDisabledProducts function does not check for a metrics feature flag before allowing users to select the Metrics product. The function checks for feature flags for SESSION_REPLAY (session-replay), PERFORMANCE_MONITORING (performance-view), PROFILING (profiling-view), and LOGS (ourlogs-enabled), but is missing a similar check for METRICS. This means users can select Metrics during onboarding even if their organization doesn't have the metrics feature enabled, which is inconsistent with how other products are handled and could lead to unexpected behavior.

static/app/components/onboarding/productSelection.tsx#L30-L77

sentry/static/app/components/onboarding/productSelection.tsx

Lines 30 to 77 in 7eef636

	function getDisabledProducts(organization: Organization): DisabledProducts {
	const disabledProducts: DisabledProducts = {};
	const hasSessionReplay = organization.features.includes('session-replay');
	const hasPerformance = organization.features.includes('performance-view');
	const hasProfiling = organization.features.includes('profiling-view');
	const hasLogs = organization.features.includes('ourlogs-enabled');
	const isSelfHostedErrorsOnly = ConfigStore.get('isSelfHostedErrorsOnly');
	let reason = t('This feature is not enabled on your Sentry installation.');
	const createClickHandler = (feature: string, featureName: string) => () => {
	openModal(deps => (
	<FeatureDisabledModal {...deps} features={[feature]} featureName={featureName} />
	));
	};
	if (isSelfHostedErrorsOnly) {
	reason = t('This feature is disabled for errors only self-hosted');
	return Object.values(ProductSolution)
	.filter(product => product !== ProductSolution.ERROR_MONITORING)
	.reduce<DisabledProducts>((acc, prod) => {
	acc[prod] = {reason};
	return acc;
	}, {});
	}
	if (!hasSessionReplay) {
	disabledProducts[ProductSolution.SESSION_REPLAY] = {
	reason,
	onClick: createClickHandler('organizations:session-replay', 'Session Replay'),
	};
	}
	if (!hasPerformance) {
	disabledProducts[ProductSolution.PERFORMANCE_MONITORING] = {
	reason,
	onClick: createClickHandler('organizations:performance-view', 'Tracing'),
	};
	}
	if (!hasProfiling) {
	disabledProducts[ProductSolution.PROFILING] = {
	reason,
	onClick: createClickHandler('organizations:profiling-view', 'Profiling'),
	};
	}
	if (!hasLogs) {
	disabledProducts[ProductSolution.LOGS] = {
	reason,
	onClick: createClickHandler('organizations:ourlogs-enabled', 'Logs'),
	};

 

---