ref(sveltekit): Insert project config into vite config instead of `se…

…ntry.properties` (#378) Aligns the SvelteKit with the NextJS and wizard to insert the project info (org, project, url) into the bundler config directly, instead of the outdated `sentry.properties` file.
getsentry · Jul 26, 2023 · 0b48979 · 0b48979
1 parent f660430
commit 0b48979
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- ref(sveltekit): Insert project config into vite config instead of `sentry.properties` (#378)
+
 ## 3.8.0
 
 - feat: Autodetect more wizards (#370)

diff --git a/src/sveltekit/sdk-setup.ts b/src/sveltekit/sdk-setup.ts
@@ -29,20 +29,30 @@ export type PartialSvelteConfig = {
   };
 };
 
+type ProjectInfo = {
+  dsn: string;
+  org: string;
+  project: string;
+  selfHosted: boolean;
+  url: string;
+};
+
 export async function createOrMergeSvelteKitFiles(
-  dsn: string,
+  projectInfo: ProjectInfo,
   svelteConfig: PartialSvelteConfig,
 ): Promise<void> {
   const { clientHooksPath, serverHooksPath } = getHooksConfigDirs(svelteConfig);
 
   // full file paths with correct file ending (or undefined if not found)
-  const originalClientHooksFile = findHooksFile(clientHooksPath);
-  const originalServerHooksFile = findHooksFile(serverHooksPath);
+  const originalClientHooksFile = findScriptFile(clientHooksPath);
+  const originalServerHooksFile = findScriptFile(serverHooksPath);
 
-  const viteConfig = findHooksFile(path.resolve(process.cwd(), 'vite.config'));
+  const viteConfig = findScriptFile(path.resolve(process.cwd(), 'vite.config'));
 
   const fileEnding = isUsingTypeScript() ? 'ts' : 'js';
 
+  const { dsn } = projectInfo;
+
   if (!originalClientHooksFile) {
     clack.log.info('No client hooks file found, creating a new one.');
     await createNewHooksFile(`${clientHooksPath}.${fileEnding}`, 'client', dsn);
@@ -60,7 +70,7 @@ export async function createOrMergeSvelteKitFiles(
   }
 
   if (viteConfig) {
-    await modifyViteConfig(viteConfig);
+    await modifyViteConfig(viteConfig, projectInfo);
   }
 }
 
@@ -92,9 +102,10 @@ function getHooksConfigDirs(svelteConfig: PartialSvelteConfig): {
 }
 
 /**
- * Checks if a hooks file exists and returns the full path to the file with the correct file type.
+ * Checks if a JS/TS file where we don't know its concrete file type yet exists
+ * and returns the full path to the file with the correct file type.
  */
-function findHooksFile(hooksFile: string): string | undefined {
+function findScriptFile(hooksFile: string): string | undefined {
   const possibleFileTypes = ['.js', '.ts', '.mjs'];
   return possibleFileTypes
     .map((type) => `${hooksFile}${type}`)
@@ -392,7 +403,10 @@ Please make sure, you're running this wizard with Node 16 or newer`);
   }
 }
 
-async function modifyViteConfig(viteConfigPath: string): Promise<void> {
+async function modifyViteConfig(
+  viteConfigPath: string,
+  projectInfo: ProjectInfo,
+): Promise<void> {
   const viteConfigContent = (
     await fs.promises.readFile(viteConfigPath, 'utf-8')
   ).toString();
@@ -401,12 +415,21 @@ async function modifyViteConfig(viteConfigPath: string): Promise<void> {
     return;
   }
 
+  const { org, project, url: sentryUrl, selfHosted } = projectInfo;
+
   const viteModule = parseModule(viteConfigContent);
 
   addVitePlugin(viteModule, {
     imported: 'sentrySvelteKit',
     from: '@sentry/sveltekit',
     constructor: 'sentrySvelteKit',
+    options: {
+      sourceMapsUploadOptions: {
+        org,
+        project,
+        ...(selfHosted && { url: sentryUrl }),
+      },
+    },
     index: 0,
   });
 

diff --git a/src/sveltekit/sentry-cli-setup.ts b/src/sveltekit/sentry-cli-setup.ts
diff --git a/src/sveltekit/sveltekit-wizard.ts b/src/sveltekit/sveltekit-wizard.ts
@@ -4,6 +4,7 @@ import chalk from 'chalk';
 
 import {
   abort,
+  addSentryCliRc,
   askForProjectSelection,
   askForSelfHosted,
   askForWizardLogin,
@@ -18,8 +19,6 @@ import { WizardOptions } from '../utils/types';
 import { createExamplePage } from './sdk-example';
 import { createOrMergeSvelteKitFiles, loadSvelteConfig } from './sdk-setup';
 
-import { setupCLIConfig } from './sentry-cli-setup';
-
 export async function runSvelteKitWizard(
   options: WizardOptions,
 ): Promise<void> {
@@ -48,14 +47,19 @@ export async function runSvelteKitWizard(
     alreadyInstalled: hasPackageInstalled('@sentry/sveltekit', packageJson),
   });
 
-  await setupCLIConfig(apiKeys.token, selectedProject, sentryUrl);
-
-  const dsn = selectedProject.keys[0].dsn.public;
-
   const svelteConfig = await loadSvelteConfig();
 
   try {
-    await createOrMergeSvelteKitFiles(dsn, svelteConfig);
+    await createOrMergeSvelteKitFiles(
+      {
+        dsn: selectedProject.keys[0].dsn.public,
+        org: selectedProject.organization.slug,
+        project: selectedProject.slug,
+        selfHosted,
+        url: sentryUrl,
+      },
+      svelteConfig,
+    );
   } catch (e: unknown) {
     clack.log.error('Error while setting up the SvelteKit SDK:');
     clack.log.info(
@@ -71,6 +75,8 @@ export async function runSvelteKitWizard(
     return;
   }
 
+  await addSentryCliRc(apiKeys.token);
+
   try {
     await createExamplePage(svelteConfig, {
       selfHosted,