fix(wizard): Update wizard API data type and issue stream url creation

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- fix(wizard): Update wizard API data type and issue stream url creation (#500)
+
 ## 3.16.4
 
 - feat(nextjs): Add instructions for custom \_error page (#496)

src/react-native/react-native-wizard.ts

@@ -37,14 +37,14 @@ import {
 import { runReactNativeUninstall } from './uninstall';
 import { APP_BUILD_GRADLE, XCODE_PROJECT, getFirstMatchedPath } from './glob';
 import { ReactNativeWizardOptions } from './options';
-import { SentryProjectData } from '../utils/types';
 import {
   addSentryInitWithSdkImport,
   doesJsCodeIncludeSdkSentryImport,
   getSentryInitColoredCodeSnippet,
 } from './javascript';
 import { traceStep, withTelemetry } from '../telemetry';
 import * as Sentry from '@sentry/node';
+import { getIssueStreamUrl } from '../utils/url';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const xcode = require('xcode');
@@ -107,6 +107,7 @@ export async function runReactNativeWizardWithTelemetry(
     await getOrAskForProjectData(options, 'react-native');
   const orgSlug = selectedProject.organization.slug;
   const projectSlug = selectedProject.slug;
+  const projectId = selectedProject.id;
   const cliConfig: RNCliSetupConfigContent = {
     authToken,
     org: orgSlug,
@@ -134,7 +135,9 @@ export async function runReactNativeWizardWithTelemetry(
   }
 
   const confirmedFirstException = await confirmFirstSentryException(
-    selectedProject,
+    sentryUrl,
+    orgSlug,
+    projectId,
   );
   Sentry.setTag('user-confirmed-first-error', confirmedFirstException);
 
@@ -207,16 +210,20 @@ async function addSentryInit({ dsn }: { dsn: string }) {
   );
 }
 
-async function confirmFirstSentryException(project: SentryProjectData) {
-  const projectsIssuesUrl = `${project.organization.links.organizationUrl}/issues/?project=${project.id}`;
+async function confirmFirstSentryException(
+  url: string,
+  orgSlug: string,
+  projectId: string,
+) {
+  const issuesStreamUrl = getIssueStreamUrl({ url, orgSlug, projectId });
 
   clack.log
     .step(`To make sure everything is set up correctly, put the following code snippet into your application.
 The snippet will create a button that, when tapped, sends a test event to Sentry.
 
 After that check your project issues:
 
-${chalk.cyan(projectsIssuesUrl)}`);
+${chalk.cyan(issuesStreamUrl)}`);
 
   // We want the code snippet to be easily copy-pasteable, without any clack artifacts
   // eslint-disable-next-line no-console

src/remix/remix-wizard.ts

@@ -74,7 +74,7 @@ async function runRemixWizardWithTelemetry(
     try {
       await updateBuildScript({
         org: selectedProject.organization.slug,
-        project: selectedProject.name,
+        project: selectedProject.slug,
         url: sentryUrl === DEFAULT_URL ? undefined : sentryUrl,
         isHydrogen: isHydrogenApp(packageJson),
       });

src/sourcemaps/sourcemaps-wizard.ts

@@ -24,13 +24,13 @@ import { WizardOptions } from '../utils/types';
 import { configureCRASourcemapGenerationFlow } from './tools/create-react-app';
 import { ensureMinimumSdkVersionIsInstalled } from './utils/sdk-version';
 import { traceStep, withTelemetry } from '../telemetry';
-import { URL } from 'url';
 import { checkIfMoreSuitableWizardExistsAndAskForRedirect } from './utils/other-wizards';
 import { configureAngularSourcemapGenerationFlow } from './tools/angular';
 import { detectUsedTool, SupportedTools } from './utils/detect-tool';
 import { configureNextJsSourceMapsUpload } from './tools/nextjs';
 import { configureRemixSourceMapsUpload } from './tools/remix';
 import { detectPackageManger } from '../utils/package-manager';
+import { getIssueStreamUrl } from '../utils/url';
 
 export async function runSourcemapsWizard(
   options: WizardOptions,
@@ -334,12 +334,7 @@ function printOutro(url: string, orgSlug: string, projectId: string) {
   const packageManager = detectPackageManger();
   const buildCommand = packageManager?.buildCommand ?? 'npm run build';
 
-  const urlObject = new URL(url);
-  urlObject.host = `${orgSlug}.${urlObject.host}`;
-  urlObject.pathname = '/issues/';
-  urlObject.searchParams.set('project', projectId);
-
-  const issueStreamUrl = urlObject.toString();
+  const issueStreamUrl = getIssueStreamUrl({ url, orgSlug, projectId });
 
   const arrow = isUnicodeSupported() ? '→' : '->';
 

src/utils/clack-utils.ts

@@ -1001,7 +1001,6 @@ async function askForProjectSelection(
   );
 
   Sentry.setTag('project', selection.slug);
-  Sentry.setTag('project-platform', selection.platform);
   Sentry.setUser({ id: selection.organization.slug });
 
   return selection;

src/utils/types.ts

@@ -1,15 +1,18 @@
 export interface SentryProjectData {
   id: string;
   slug: string;
-  name: string;
-  platform: string;
+  status: string;
   organization: {
+    id: string;
+    name: string;
     slug: string;
-    links: {
-      organizationUrl: string;
+    region: string;
+    status: {
+      id: string;
+      name: string;
     };
   };
-  keys: [{ dsn: { public: string } }];
+  keys: [{ dsn: { public: string }; isActive: boolean }];
 }
 
 export type WizardOptions = {

src/utils/url.ts

@@ -0,0 +1,23 @@
+import { URL } from 'url';
+
+/**
+ * Returns the url to the Sentry project stream.
+ *
+ * Example: https://org-slug.sentry.io/issues/?project=1234567
+ */
+export function getIssueStreamUrl({
+  url,
+  orgSlug,
+  projectId,
+}: {
+  url: string;
+  orgSlug: string;
+  projectId: string;
+}): string {
+  const urlObject = new URL(url);
+  urlObject.host = `${orgSlug}.${urlObject.host}`;
+  urlObject.pathname = '/issues/';
+  urlObject.searchParams.set('project', projectId);
+
+  return urlObject.toString();
+}