chore: merge main

jherr · jherr · commit c6f5a2049089 · 2025-04-16T10:11:21.000-07:00
diff --git a/packages/cta-cli/src/cli.ts b/packages/cta-cli/src/cli.ts
@@ -23,6 +23,7 @@ import { createUIEnvironment } from './ui-environment.js'
 
 import type {
   Mode,
+  Options,
   PackageManager,
   TemplateOptions,
 } from '@tanstack/cta-engine'
@@ -179,6 +180,7 @@ export function cli({
         return value
       },
     )
+    .option('--interactive', 'interactive mode', false)
     .option('--tailwind', 'add Tailwind CSS', false)
     .option<Array<string> | boolean>(
       '--add-ons [...add-ons]',
@@ -227,11 +229,17 @@ export function cli({
           cliOptions.template = forcedMode as TemplateOptions
         }
 
-        let finalOptions = await normalizeOptions(
-          cliOptions,
-          forcedMode,
-          forcedAddOns,
-        )
+        let finalOptions: Options | undefined
+        if (cliOptions.interactive) {
+          cliOptions.addOns = true
+        } else {
+          finalOptions = await normalizeOptions(
+            cliOptions,
+            forcedMode,
+            forcedAddOns,
+          )
+        }
+
         if (finalOptions) {
           intro(`Creating a new ${appName} app in ${projectName}...`)
         } else {
@@ -241,7 +249,8 @@ export function cli({
             forcedAddOns,
           })
         }
-        await createApp(finalOptions, {
+
+        await createApp(finalOptions!, {
           environment: createUIEnvironment(),
           cwd: options.targetDir || undefined,
           name,
diff --git a/packages/cta-cli/src/options.ts b/packages/cta-cli/src/options.ts
@@ -178,7 +178,7 @@ export async function promptForOptions(
     forcedAddOns?: Array<string>
     forcedMode?: TemplateOptions
   },
-): Promise<Required<Options>> {
+): Promise<Required<Options> | undefined> {
   const options = {} as Required<Options>
 
   const framework = getFrameworkById(cliOptions.framework || 'react-cra')!
@@ -208,6 +208,8 @@ export async function promptForOptions(
       process.exit(0)
     }
     options.projectName = value
+  } else {
+    options.projectName = cliOptions.projectName
   }
 
   // Router type selection
diff --git a/packages/cta-cli/src/types.ts b/packages/cta-cli/src/types.ts
@@ -14,4 +14,5 @@ export interface CliOptions {
   mcpSse?: boolean
   starter?: string
   targetDir?: string
+  interactive?: boolean
 }
diff --git a/templates/react-cra/add-ons/sentry/assets/_dot_cursorrules.append b/templates/react-cra/add-ons/sentry/assets/_dot_cursorrules.append
@@ -6,13 +6,13 @@ Error collection is automatic and configured in `src/router.tsx`.
 
 ## Instrumentation
 
-We want our server functions intstrumented. So if you see a function name like `createServerFn`, you can instrument it with Sentry. You'll need to import `Sentry`:
+We want our server functions instrumented. So if you see a function name like `createServerFn`, you can instrument it with Sentry. You'll need to import `Sentry`:
 
 ```tsx
-import * as Sentry from '@sentry/browser'
+import * as Sentry from '@sentry/tanstackstart-react'
 ```
 
-And then wrap the implementation of the server function with `Sentry.startSpan`, liks so:
+And then wrap the implementation of the server function with `Sentry.startSpan`, like so:
 
 ```tsx
 Sentry.startSpan({ name: 'Requesting all the pokemon' }, async () => {
diff --git a/templates/react-cra/add-ons/sentry/assets/_dot_env.local.append b/templates/react-cra/add-ons/sentry/assets/_dot_env.local.append
@@ -1,2 +1,11 @@
 # Your Sentry DSN (from your Sentry account)
 VITE_SENTRY_DSN=
+
+# Your Sentry organization (from your Sentry account)
+VITE_SENTRY_ORG=
+
+# Your Sentry project (from your Sentry account)
+VITE_SENTRY_PROJECT=
+
+# Your Sentry authentication token (from your Sentry account)
+SENTRY_AUTH_TOKEN=
diff --git a/templates/react-cra/add-ons/sentry/assets/src/app/global-middleware.ts b/templates/react-cra/add-ons/sentry/assets/src/app/global-middleware.ts
@@ -1,25 +1,11 @@
-import { createIsomorphicFn } from '@tanstack/react-start'
-import * as Sentry from "@sentry/react";
-import * as SentryServer from "@sentry/node";
+import * as Sentry from "@sentry/tanstackstart-react";
+import {
+	createMiddleware,
+	registerGlobalMiddleware,
+} from "@tanstack/react-start";
 
-createIsomorphicFn().server(() => {
-    console.log('Sentry init server')
-    SentryServer.init({
-        dsn: import.meta.env.VITE_SENTRY_DSN,
-        tracesSampleRate: 1.0,
-        profilesSampleRate: 1.0,
-    })
-}).client(() => {
-    console.log('Sentry init client')
-    Sentry.init({
-        dsn: import.meta.env.VITE_SENTRY_DSN,
-        tracesSampleRate: 1.0,
-        profilesSampleRate: 1.0,
-        integrations: [
-            Sentry.replayIntegration({
-                maskAllText: false,
-                blockAllMedia: false,
-              })
-        ]
-    })
-})()
+registerGlobalMiddleware({
+	middleware: [
+		createMiddleware().server(Sentry.sentryGlobalServerMiddlewareHandler()),
+	],
+});
diff --git a/templates/react-cra/add-ons/sentry/assets/src/routes/demo.sentry.testing.tsx b/templates/react-cra/add-ons/sentry/assets/src/routes/demo.sentry.testing.tsx
@@ -9,8 +9,7 @@
 import * as fs from 'node:fs/promises'
 import { createFileRoute } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/react-start'
-import * as Sentry from '@sentry/react'
-import * as SentryServer from '@sentry/node'
+import * as Sentry from "@sentry/tanstackstart-react";
 import { useState, useEffect, useRef } from 'react'
 
 export const Route = createFileRoute('/demo/sentry/testing')({
@@ -21,7 +20,7 @@ export const Route = createFileRoute('/demo/sentry/testing')({
 const badServerFunc = createServerFn({
   method: 'GET',
 }).handler(async () => {
-  return await SentryServer.startSpan(
+  return await Sentry.startSpan(
     { 
       name: 'Reading non-existent file',
       op: 'file.read'
@@ -31,7 +30,7 @@ const badServerFunc = createServerFn({
         await fs.readFile('./doesnt-exist', 'utf-8')
         return true
       } catch (error) {
-        SentryServer.captureException(error)
+        Sentry.captureException(error)
         throw error
       }
     }
@@ -42,7 +41,7 @@ const badServerFunc = createServerFn({
 const goodServerFunc = createServerFn({
   method: 'GET',
 }).handler(async () => {
-  return await SentryServer.startSpan(
+  return await Sentry.startSpan(
     { 
       name: 'Successful server operation',
       op: 'demo.success'
@@ -244,6 +243,7 @@ function RouteComponent() {
                 <div className="space-y-6">
                   <div>
                     <button
+                      type="button"
                       onClick={() => {
                         setDemoStep(prev => prev + 1)
                         handleClientError()
@@ -267,22 +267,24 @@ function RouteComponent() {
                         <div className="bg-red-900/20 border border-red-500/50 rounded-lg p-2">
                           <div className="flex items-center text-red-400 text-sm">
                             <svg className="w-4 h-4 mr-2" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
-                              <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                            <title>Red Warning Sign</title>
+                            <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                             </svg>
                             Client-side error captured and traced
                           </div>
                         </div>
                         <div className="bg-purple-900/20 border border-purple-500/50 rounded-lg p-3">
                           <div className="flex items-center justify-between">
                             <div className="relative">
-                              <div 
+                              <button
+                                type="button"
                                 className={`inline-flex items-center bg-purple-900/40 px-3 py-1.5 rounded-lg border border-purple-500/50 cursor-pointer hover:bg-purple-900/60 transition-all ${copiedSpan === spanOps.clientError ? 'scale-95' : ''}`}
                                 onClick={() => handleCopy(spanOps.clientError)}
                                 title="Click to copy operation name"
                               >
                                 <span className="text-purple-300 text-sm font-medium mr-2">span.op</span>
                                 <code className="text-purple-400 text-sm font-mono">{spanOps.clientError}</code>
-                              </div>
+                              </button>
                               {copiedSpan === spanOps.clientError && (
                                 <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-green-500/90 text-white text-xs px-2 py-1 rounded animate-fade-out">
                                   Copied!
@@ -297,6 +299,7 @@ function RouteComponent() {
 
                   <div>
                     <button
+                      type="button"
                       onClick={() => {
                         setDemoStep(prev => prev + 1)
                         handleClientTrace()
@@ -332,14 +335,15 @@ function RouteComponent() {
                           <div className="bg-purple-900/20 border border-purple-500/50 rounded-lg p-3">
                             <div className="flex items-center justify-between">
                               <div className="relative">
-                                <div 
+                                <button
+                                  type="button"
                                   className={`inline-flex items-center bg-purple-900/40 px-3 py-1.5 rounded-lg border border-purple-500/50 cursor-pointer hover:bg-purple-900/60 transition-all ${copiedSpan === spanOps.client ? 'scale-95' : ''}`}
                                   onClick={() => handleCopy(spanOps.client)}
                                   title="Click to copy operation name"
                                 >
                                   <span className="text-purple-300 text-sm font-medium mr-2">span.op</span>
                                   <code className="text-purple-400 text-sm font-mono">{spanOps.client}</code>
-                                </div>
+                                </button>
                                 {copiedSpan === spanOps.client && (
                                   <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-green-500/90 text-white text-xs px-2 py-1 rounded animate-fade-out">
                                     Copied!
@@ -361,6 +365,7 @@ function RouteComponent() {
                 <div className="space-y-6">
                   <div>
                     <button
+                      type="button"
                       onClick={() => {
                         setDemoStep(prev => prev + 1)
                         handleServerError()
@@ -384,6 +389,7 @@ function RouteComponent() {
                         <div className="bg-red-900/20 border border-red-500/50 rounded-lg p-3">
                           <div className="flex items-center text-red-400 text-sm">
                             <svg className="w-4 h-4 mr-2" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
+                              <title>Red Warning Sign</title>
                               <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                             </svg>
                             Server-side error captured and traced
@@ -392,14 +398,15 @@ function RouteComponent() {
                         <div className="bg-purple-900/20 border border-purple-500/50 rounded-lg p-3">
                           <div className="flex items-center justify-between">
                             <div className="relative">
-                              <div 
+                              <button 
+                                type="button"
                                 className={`inline-flex items-center bg-purple-900/40 px-3 py-1.5 rounded-lg border border-purple-500/50 cursor-pointer hover:bg-purple-900/60 transition-all ${copiedSpan === spanOps.serverError ? 'scale-95' : ''}`}
                                 onClick={() => handleCopy(spanOps.serverError)}
                                 title="Click to copy operation name"
                               >
                                 <span className="text-purple-300 text-sm font-medium mr-2">span.op</span>
                                 <code className="text-purple-400 text-sm font-mono">{spanOps.serverError}</code>
-                              </div>
+                              </button>
                               {copiedSpan === spanOps.serverError && (
                                 <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-green-500/90 text-white text-xs px-2 py-1 rounded animate-fade-out">
                                   Copied!
@@ -414,6 +421,7 @@ function RouteComponent() {
 
                   <div>
                     <button
+                      type="button"
                       onClick={() => {
                         setDemoStep(prev => prev + 1)
                         handleServerTrace()
@@ -449,14 +457,15 @@ function RouteComponent() {
                           <div className="bg-purple-900/20 border border-purple-500/50 rounded-lg p-3">
                             <div className="flex items-center justify-between">
                               <div className="relative">
-                                <div 
+                                <button 
+                                  type="button"
                                   className={`inline-flex items-center bg-purple-900/40 px-3 py-1.5 rounded-lg border border-purple-500/50 cursor-pointer hover:bg-purple-900/60 transition-all ${copiedSpan === spanOps.server ? 'scale-95' : ''}`}
                                   onClick={() => handleCopy(spanOps.server)}
                                   title="Click to copy operation name"
                                 >
                                   <span className="text-purple-300 text-sm font-medium mr-2">span.op</span>
                                   <code className="text-purple-400 text-sm font-mono">{spanOps.server}</code>
-                                </div>
+                                </button>
                                 {copiedSpan === spanOps.server && (
                                   <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-green-500/90 text-white text-xs px-2 py-1 rounded animate-fade-out">
                                     Copied!
diff --git a/templates/react-cra/add-ons/sentry/package.json b/templates/react-cra/add-ons/sentry/package.json
@@ -1,7 +1,5 @@
 {
   "dependencies": {
-    "@sentry/node": "^9.1.0",
-    "@sentry/profiling-node": "^9.1.0",
-    "@sentry/react": "^9.1.0"
+    "@sentry/tanstackstart-react": "^9.12.0"
   }
 }
diff --git a/templates/react-cra/add-ons/start/assets/app.config.ts.ejs b/templates/react-cra/add-ons/start/assets/app.config.ts.ejs
@@ -1,9 +1,10 @@
 import { defineConfig } from '@tanstack/react-start/config'
 import viteTsConfigPaths from 'vite-tsconfig-paths'<% if (tailwind) { %>
 import tailwindcss from "@tailwindcss/vite"
+<% } %><% if (addOnEnabled.sentry) { %>
+import { wrapVinxiConfigWithSentry } from "@sentry/tanstackstart-react";
 <% } %>
-
-export default defineConfig({
+const config = defineConfig({
   tsr: {
     appDirectory: 'src',
   },
@@ -17,3 +18,15 @@ export default defineConfig({
     ],
   },
 })
+
+<% if (addOnEnabled.sentry) { %>
+export default wrapVinxiConfigWithSentry(config, {
+  org: process.env.VITE_SENTRY_ORG,
+  project: process.env.VITE_SENTRY_PROJECT,
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  // Only print logs for uploading source maps in CI
+  // Set to `true` to suppress logs
+  silent: !process.env.CI,
+});<% } else { %>
+export default config
+<% } %>
diff --git a/templates/react-cra/add-ons/start/assets/src/client.tsx.ejs b/templates/react-cra/add-ons/start/assets/src/client.tsx.ejs
@@ -0,0 +1,33 @@
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/react-start'
+<% if (addOnEnabled.sentry) { %>
+import * as Sentry from "@sentry/tanstackstart-react";
+<% } %>
+import { createRouter } from './router'
+
+const router = createRouter()
+
+<% if (addOnEnabled.sentry) { %>
+    Sentry.init({
+        dsn: import.meta.env.VITE_SENTRY_DSN,
+        integrations: [
+            Sentry.tanstackRouterBrowserTracingIntegration(router),
+            Sentry.replayIntegration({
+                maskAllText: false,
+                blockAllMedia: false,
+            }),
+        ],
+        // Set tracesSampleRate to 1.0 to capture 100%
+        // of transactions for tracing.
+        // We recommend adjusting this value in production.
+        // Learn more at https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
+        tracesSampleRate: 1.0,
+        // Capture Replay for 10% of all sessions,
+        // plus for 100% of sessions with an error.
+        // Learn more at https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
+        replaysSessionSampleRate: 0.1,
+        replaysOnErrorSampleRate: 1.0,
+    });
+<% } %>
+
+hydrateRoot(document, <StartClient router={router} />)
diff --git a/templates/react-cra/add-ons/start/assets/src/router.tsx.ejs b/templates/react-cra/add-ons/start/assets/src/router.tsx.ejs
diff --git a/templates/react-cra/add-ons/start/assets/src/ssr.tsx.ejs b/templates/react-cra/add-ons/start/assets/src/ssr.tsx.ejs
diff --git a/tests/integration-tests/snapshots/react-cra/cr-ts-start-npm.json b/tests/integration-tests/snapshots/react-cra/cr-ts-start-npm.json
diff --git a/tests/integration-tests/snapshots/react-cra/cr-ts-start-tanstack-query-npm.json b/tests/integration-tests/snapshots/react-cra/cr-ts-start-tanstack-query-npm.json

Original file line number	Diff line number	Diff line change
`@@ -14,4 +14,5 @@ export interface CliOptions {`
`14`	`14`	`mcpSse?: boolean`
`15`	`15`	`starter?: string`
`16`	`16`	`targetDir?: string`
	`17`	`+ interactive?: boolean`
`17`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"dependencies": {`
`3`		`- "@sentry/node": "^9.1.0",`
`4`		`- "@sentry/profiling-node": "^9.1.0",`
`5`		`- "@sentry/react": "^9.1.0"`
	`3`	`+ "@sentry/tanstackstart-react": "^9.12.0"`
`6`	`4`	`}`
`7`	`5`	`}`