feat(ddm-onboarding): Serverless javascript instructions (#64540)

- closes https://github.com/getsentry/sentry/issues/64398

static/app/data/platformCategories.tsx

@@ -418,10 +418,12 @@ const customMetricBackendPlatforms: readonly PlatformKey[] = [
   'python-wsgi',
   'rust',
   'node',
+  'node-awslambda',
+  'node-azurefunctions',
+  'node-connect',
   'node-express',
+  'node-gcpfunctions',
   'node-koa',
-  'node-connect',
-  'node-azurefunctions',
 ];
 
 const customMetricFrontendPlatforms: readonly PlatformKey[] = [

static/app/gettingStartedDocs/node/awslambda.tsx

@@ -5,6 +5,7 @@ import type {
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSServerMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
 import type {ProductSelectionMap} from 'sentry/utils/gettingStartedDocs/node';
@@ -59,6 +60,14 @@ exports.handler = Sentry.AWSLambda.wrapHandler(async (event, context) => {
   throw new Error("This should show up in Sentry!")
 });`;
 
+const getMetricsConfigureSnippet = (params: DocsParams) => `
+Sentry.AWSLambda.init({
+  dsn: "${params.dsn}",
+  _experiments: {
+    metricsAggregator: true,
+  },
+});`;
+
 const onboarding: OnboardingConfig = {
   install: params => [
     {
@@ -106,8 +115,52 @@ const onboarding: OnboardingConfig = {
   ],
 };
 
+const customMetricsOnboarding: OnboardingConfig = {
+  install: params => [
+    {
+      type: StepType.INSTALL,
+      description: tct(
+        'You need a minimum version [codeVersion:7.91.0] of [codePackage:@sentry/serverless]:',
+        {
+          codeVersion: <code />,
+          codePackage: <code />,
+        }
+      ),
+      configurations: getInstallConfig(params, {
+        basePackage: '@sentry/serverless',
+      }),
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      description: tct(
+        'To enable capturing metrics, you first need to add the [codeIntegration:metricsAggregator] experiment to your [codeNamespace:Sentry.init] call in your main process.',
+        {
+          codeIntegration: <code />,
+          codeNamespace: <code />,
+        }
+      ),
+      configurations: [
+        {
+          code: [
+            {
+              label: 'JavaScript',
+              value: 'javascript',
+              language: 'javascript',
+              code: getMetricsConfigureSnippet(params),
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  verify: getJSServerMetricsOnboarding().verify,
+};
+
 const docs: Docs = {
   onboarding,
+  customMetricsOnboarding,
 };
 
 export default docs;

static/app/gettingStartedDocs/node/gcpfunctions.tsx

@@ -5,6 +5,7 @@ import type {
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSServerMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
 import type {ProductSelectionMap} from 'sentry/utils/gettingStartedDocs/node';
@@ -83,6 +84,14 @@ exports.helloHttp = Sentry.GCPFunction.wrapHttpFunction((req, res) => {
   throw new Error("oh, hello there!");
 });`;
 
+const getMetricsConfigureSnippet = (params: DocsParams) => `
+Sentry.GCPFunction.init({
+  dsn: "${params.dsn}",
+  _experiments: {
+    metricsAggregator: true,
+  },
+});`;
+
 const onboarding: OnboardingConfig = {
   install: params => [
     {
@@ -133,8 +142,50 @@ const onboarding: OnboardingConfig = {
   ],
 };
 
+const customMetricsOnboarding: OnboardingConfig = {
+  install: params => [
+    {
+      type: StepType.INSTALL,
+      description: tct(
+        'You need a minimum version [codeVersion:7.91.0] of [codePackage:@sentry/serverless]:',
+        {
+          codeVersion: <code />,
+          codePackage: <code />,
+        }
+      ),
+      configurations: [{language: 'json', code: getInstallSnippet(params)}],
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      description: tct(
+        'To enable capturing metrics, you first need to add the [codeIntegration:metricsAggregator] experiment to your [codeNamespace:Sentry.init] call in your main process.',
+        {
+          codeIntegration: <code />,
+          codeNamespace: <code />,
+        }
+      ),
+      configurations: [
+        {
+          code: [
+            {
+              label: 'JavaScript',
+              value: 'javascript',
+              language: 'javascript',
+              code: getMetricsConfigureSnippet(params),
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  verify: getJSServerMetricsOnboarding().verify,
+};
+
 const docs: Docs = {
   onboarding,
+  customMetricsOnboarding,
 };
 
 export default docs;

static/app/views/ddm/ddmOnboarding/sidebar.tsx

@@ -42,13 +42,12 @@ function MetricsOnboardingSidebar(props: CommonSidebarProps) {
   const projectSelectOptions = useMemo(() => {
     const supportedProjectItems: SelectValue<string>[] = supportedProjects
       .sort((aProject, bProject) => {
-        // TODO(aknaus): Enable once we have thw hasCustomMetrics flag
         // if we're comparing two projects w/ or w/o custom metrics alphabetical sort
-        // if (aProject.hasCustomMetrics === bProject.hasCustomMetrics) {
-        return aProject.slug.localeCompare(bProject.slug);
-        // }
+        if (aProject.hasCustomMetrics === bProject.hasCustomMetrics) {
+          return aProject.slug.localeCompare(bProject.slug);
+        }
         // otherwise sort by whether or not they have custom metrics
-        // return aProject.hasCustomMetrics ? 1 : -1;
+        return aProject.hasCustomMetrics ? 1 : -1;
       })
       .map(project => {
         return {