feat: Pin JS SDK versions to v8

.prettierrc

@@ -1,6 +1,14 @@
 {
-    "printWidth": 80,
-    "proseWrap": "always",
-    "singleQuote": true,
-    "trailingComma": "all"
-  }
+  "printWidth": 80,
+  "proseWrap": "always",
+  "singleQuote": true,
+  "trailingComma": "all",
+  "overrides": [
+    {
+      "files": "CHANGELOG.md",
+      "options": {
+        "proseWrap": "preserve"
+      }
+    }
+  ]
+}

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- feat: Pin JS SDK versions to v8 (#712)
+
 ## 3.34.4
 
 - chore(deps): Update various dependencies (#701, #700, #224)
@@ -16,7 +20,7 @@
 ## 3.34.1
 
 - fix(sveltekit): Ensure Sentry example page renders correct Html ([#688](https://github.com/getsentry/sentry-wizard/pull/688))
-- ref: Handle edge cases in formatting step more gracefully  ([#687](https://github.com/getsentry/sentry-wizard/pull/686))
+- ref: Handle edge cases in formatting step more gracefully ([#687](https://github.com/getsentry/sentry-wizard/pull/686))
 
 ## 3.34.0
 

src/nextjs/nextjs-wizard.ts

@@ -94,6 +94,7 @@ export async function runNextjsWizardWithTelemetry(
   const { packageManager: packageManagerFromInstallStep } =
     await installPackage({
       packageName: '@sentry/nextjs@^8',
+      packageNameDisplayLabel: '@sentry/nextjs',
       alreadyInstalled: !!packageJson?.dependencies?.['@sentry/nextjs'],
     });
 

src/remix/remix-wizard.ts

@@ -70,7 +70,8 @@ async function runRemixWizardWithTelemetry(
     await getOrAskForProjectData(options, 'javascript-remix');
 
   await installPackage({
-    packageName: '@sentry/remix',
+    packageName: '@sentry/remix@^8',
+    packageNameDisplayLabel: '@sentry/remix',
     alreadyInstalled: hasPackageInstalled('@sentry/remix', packageJson),
   });
 

src/sourcemaps/tools/rollup.ts

@@ -51,7 +51,7 @@ export const configureRollupPlugin: SourceMapUploadToolConfigurationFunction =
 
     clack.log.step(`Add the following code to your rollup config:`);
 
-    // Intentially logging directly to console here so that the code can be copied/pasted directly
+    // Intentionally logging directly to console here so that the code can be copied/pasted directly
     // eslint-disable-next-line no-console
     console.log(getCodeSnippet(options));
 

src/sveltekit/sveltekit-wizard.ts

@@ -95,7 +95,8 @@ export async function runSvelteKitWizardWithTelemetry(
   Sentry.setTag('sdk-already-installed', sdkAlreadyInstalled);
 
   await installPackage({
-    packageName: '@sentry/sveltekit',
+    packageName: '@sentry/sveltekit@^8',
+    packageNameDisplayLabel: '@sentry/sveltekit',
     alreadyInstalled: sdkAlreadyInstalled,
   });
 

src/utils/clack-utils.ts

@@ -354,17 +354,21 @@ export async function installPackage({
   packageName,
   alreadyInstalled,
   askBeforeUpdating = true,
+  packageNameDisplayLabel,
 }: {
+  /** The string that is passed to the package manager CLI as identifier to install (e.g. `@sentry/nextjs`, or `@sentry/nextjs@^8`) */
   packageName: string;
   alreadyInstalled: boolean;
   askBeforeUpdating?: boolean;
+  /** Overrides what is shown in the installation logs in place of the `packageName` option. Useful if the `packageName` is ugly (e.g. `@sentry/nextjs@^8`) */
+  packageNameDisplayLabel?: string;
 }): Promise<{ packageManager?: PackageManager }> {
   return traceStep('install-package', async () => {
     if (alreadyInstalled && askBeforeUpdating) {
       const shouldUpdatePackage = await abortIfCancelled(
         clack.confirm({
           message: `The ${chalk.bold.cyan(
-            packageName,
+            packageNameDisplayLabel ?? packageName,
           )} package is already installed. Do you want to update it to the latest version?`,
         }),
       );
@@ -380,7 +384,7 @@ export async function installPackage({
 
     sdkInstallSpinner.start(
       `${alreadyInstalled ? 'Updating' : 'Installing'} ${chalk.bold.cyan(
-        packageName,
+        packageNameDisplayLabel ?? packageName,
       )} with ${chalk.bold(packageManager.label)}.`,
     );
 
@@ -425,7 +429,7 @@ export async function installPackage({
 
     sdkInstallSpinner.stop(
       `${alreadyInstalled ? 'Updated' : 'Installed'} ${chalk.bold.cyan(
-        packageName,
+        packageNameDisplayLabel ?? packageName,
       )} with ${chalk.bold(packageManager.label)}.`,
     );