Add Deno Platform (#65149)

There is no deno platform, there should be

- requires https://github.com/getsentry/sentry/pull/65218

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: Arthur Knaus <arthur.knaus@sentry.io>

static/app/data/platformCategories.tsx

@@ -56,6 +56,7 @@ export const mobile: PlatformKey[] = [
 // When changing this file, make sure to keep src/sentry/utils/platform_categories.py in sync.
 export const backend: PlatformKey[] = [
   'bun',
+  'deno',
   'dotnet',
   'dotnet-aspnetcore',
   'dotnet-aspnet',
@@ -159,6 +160,7 @@ export const sourceMaps: PlatformKey[] = [
 
 export const performance: PlatformKey[] = [
   'bun',
+  'deno',
   'javascript',
   'javascript-ember',
   'javascript-react',
@@ -272,6 +274,7 @@ export const releaseHealth: PlatformKey[] = [
   'dart-flutter',
   // backend
   'bun',
+  'deno',
   'native',
   'node',
   'node-express',
@@ -305,6 +308,7 @@ export const releaseHealth: PlatformKey[] = [
 // These are the backend platforms that can set up replay -- e.g. they can be set up via a linked JS framework or via JS loader.
 export const replayBackendPlatforms: readonly PlatformKey[] = [
   'bun',
+  'deno',
   'dotnet-aspnetcore',
   'dotnet-aspnet',
   'elixir',
@@ -454,6 +458,7 @@ export const feedbackOnboardingPlatforms: readonly PlatformKey[] = [
 const customMetricBackendPlatforms: readonly PlatformKey[] = [
   'bun',
   'dart',
+  'deno',
   'dotnet',
   'dotnet-aspnetcore',
   'dotnet-awslambda',

static/app/data/platformPickerCategories.tsx

@@ -47,6 +47,7 @@ const browser: Set<PlatformKey> = new Set([
 
 const server: Set<PlatformKey> = new Set([
   'bun',
+  'deno',
   'dotnet',
   'dotnet-aspnet',
   'dotnet-aspnetcore',

static/app/data/platforms.tsx

@@ -60,6 +60,13 @@ export const platforms: PlatformIntegration[] = [
     language: 'dart',
     link: 'https://docs.sentry.io/platforms/dart/',
   },
+  {
+    id: 'deno',
+    name: 'Deno',
+    type: 'language',
+    language: 'deno',
+    link: 'https://docs.sentry.io/platforms/javascript/guides/deno/',
+  },
   {
     id: 'dotnet',
     name: '.NET',

static/app/gettingStartedDocs/deno/deno.spec.tsx

@@ -0,0 +1,37 @@
+import {renderWithOnboardingLayout} from 'sentry-test/onboarding/renderWithOnboardingLayout';
+import {screen} from 'sentry-test/reactTestingLibrary';
+import {textWithMarkupMatcher} from 'sentry-test/utils';
+
+import docs from './deno';
+
+describe('deno onboarding docs', function () {
+  it('renders doc correctly', function () {
+    renderWithOnboardingLayout(docs);
+
+    // Renders main headings
+    expect(screen.getByRole('heading', {name: 'Install'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Configure SDK'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Verify'})).toBeInTheDocument();
+
+    // Renders config options
+    expect(
+      screen.getByText(textWithMarkupMatcher(/tracesSampleRate: 1\.0,/))
+    ).toBeInTheDocument();
+  });
+
+  it('renders without performance monitoring', function () {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [],
+    });
+
+    // Does not render config option
+    expect(
+      screen.queryByText(textWithMarkupMatcher(/tracesSampleRate: 1\.0,/))
+    ).not.toBeInTheDocument();
+
+    // Renders next steps
+    expect(
+      screen.getByRole('link', {name: 'Performance Monitoring'})
+    ).toBeInTheDocument();
+  });
+});

static/app/gettingStartedDocs/deno/deno.tsx

@@ -0,0 +1,206 @@
+import ExternalLink from 'sentry/components/links/externalLink';
+import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import type {
+  Docs,
+  DocsParams,
+  OnboardingConfig,
+} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
+import {t, tct} from 'sentry/locale';
+
+type Params = DocsParams;
+
+const getInstallConfig = () => [
+  {
+    code: [
+      {
+        label: 'Deno registry',
+        value: 'deno',
+        language: 'javascript',
+        code: `import * as Sentry from "https://deno.land/x/sentry/index.mjs";"`,
+      },
+      {
+        label: 'npm registry',
+        value: 'npm',
+        language: 'javascript',
+        code: `import * as Sentry from "npm:@sentry/deno";`,
+      },
+    ],
+  },
+];
+
+const getConfigureSnippet = (params: Params) =>
+  `
+Sentry.init({
+  dsn: "${params.dsn}",${
+    params.isPerformanceSelected
+      ? `
+  // enable performance
+  tracesSampleRate: 1.0,`
+      : ''
+  }
+});
+`;
+
+const getVerifySnippet = () => `;
+setTimeout(() => {
+  throw new Error();
+});
+`;
+
+const getMetricsConfigureSnippet = (params: DocsParams) => `;
+Sentry.init({
+  dsn: '${params.dsn}',
+  _experiments: {
+    metricsAggregator: true,
+  },
+});
+`;
+
+const getMetricsVerifySnippet = () => `;
+// Add 4 to a counter named 'hits'
+Sentry.metrics.increment('hits', 4);
+`;
+
+const onboarding: OnboardingConfig = {
+  install: () => [
+    {
+      type: StepType.INSTALL,
+      description: t(
+        "Sentry captures data by using an SDK within your application's runtime."
+      ),
+      configurations: getInstallConfig(),
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      description: t(
+        "Initialize Sentry as early as possible in your application's lifecycle."
+      ),
+      configurations: [
+        {
+          language: 'javascript',
+          code: getConfigureSnippet(params),
+        },
+      ],
+    },
+  ],
+  verify: () => [
+    {
+      type: StepType.VERIFY,
+      description: t(
+        "This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected."
+      ),
+      configurations: [
+        {
+          language: 'javascript',
+          code: getVerifySnippet(),
+        },
+      ],
+    },
+  ],
+  nextSteps: params =>
+    params.isPerformanceSelected
+      ? []
+      : [
+          {
+            id: 'performance-monitoring',
+            name: t('Performance Monitoring'),
+            description: t(
+              'Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries.'
+            ),
+            link: 'https://docs.sentry.io/platforms/javascript/guides/bun/performance/',
+          },
+        ],
+};
+
+const customMetricsOnboarding: OnboardingConfig = {
+  install: () => [
+    {
+      type: StepType.INSTALL,
+      description: tct(
+        'You need a minimum version [codeVersion:7.91.0] of [codePackage:@sentry/deno].',
+        {
+          codeVersion: <code />,
+          codePackage: <code />,
+        }
+      ),
+      configurations: getInstallConfig(),
+    },
+  ],
+  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: () => [
+    {
+      type: StepType.VERIFY,
+      description: tct(
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics] namespace. This API is available in both renderer and main processes. Try out this example:",
+        {
+          codeCounters: <code />,
+          codeSets: <code />,
+          codeDistribution: <code />,
+          codeGauge: <code />,
+          codeNamespace: <code />,
+        }
+      ),
+      configurations: [
+        {
+          code: [
+            {
+              label: 'JavaScript',
+              value: 'javascript',
+              language: 'javascript',
+              code: getMetricsVerifySnippet(),
+            },
+          ],
+        },
+        {
+          description: t(
+            'With a bit of delay you can see the data appear in the Sentry UI.'
+          ),
+        },
+        {
+          description: tct(
+            'Learn more about metrics and how to configure them, by reading the [docsLink:docs].',
+            {
+              docsLink: (
+                <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/deno/metrics/" />
+              ),
+            }
+          ),
+        },
+      ],
+    },
+  ],
+};
+
+const docs: Docs = {
+  onboarding,
+  replayOnboardingJsLoader,
+  customMetricsOnboarding,
+};
+
+export default docs;

static/app/types/project.tsx

@@ -160,6 +160,7 @@ export type PlatformKey =
   | 'csharp-aspnetcore'
   | 'dart'
   | 'dart-flutter'
+  | 'deno'
   | 'django'
   | 'dotnet'
   | 'dotnet-aspnet'