fix: sentry updates (#92)

Fixes the sentry add-on

---------

Co-authored-by: FatahChan <ahmadfathallah89@gmail.com>

Author: jherr

packages/cta-engine/src/create-app.ts

@@ -792,6 +792,6 @@ Use the following commands to start your app:
 % cd ${options.projectName}
 % ${startCommand}
 
-Please read the README.md for more information on testing, styling, adding routes, react-query, etc.${errorStatement}`)
+Please check the README.md for more information on testing, styling, adding routes, react-query, etc.${errorStatement}`)
   }
 }

packages/cta-engine/templates/react/add-on/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 () => {

packages/cta-engine/templates/react/add-on/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=

packages/cta-engine/templates/react/add-on/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()),
+	],
+});

packages/cta-engine/templates/react/add-on/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!

packages/cta-engine/templates/react/add-on/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"
   }
 }

packages/cta-engine/templates/react/add-on/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
+<% } %>

packages/cta-engine/templates/react/add-on/start/assets/src/client.tsx

@@ -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} />)

packages/cta-engine/templates/react/add-on/start/assets/src/client.tsx.ejs

@@ -1,8 +1,4 @@
-import { createRouter as createTanstackRouter } from '@tanstack/react-router'<% if (addOnEnabled.sentry) { %>
-import * as Sentry from '@sentry/react'
-import * as SentryServer from '@sentry/node'
-import { createIsomorphicFn } from '@tanstack/react-start'
-<% } %><% if (addOnEnabled['tanstack-query']) { %>
+import { createRouter as createTanstackRouter } from '@tanstack/react-router'<% if (addOnEnabled['tanstack-query']) { %>
 import { routerWithQueryClient } from '@tanstack/react-router-with-query'
 import * as TanstackQuery from './integrations/tanstack-query/root-provider'
 <% } %>
@@ -44,31 +40,6 @@ export const createRouter = () => {
   return router
 }
 
-<% if (addOnEnabled.sentry) { %>
-  const router = createRouter()
-  createIsomorphicFn().server(() => {
-    SentryServer.init({
-      dsn: import.meta.env.VITE_SENTRY_DSN,
-      tracesSampleRate: 1.0,
-      profilesSampleRate: 1.0,
-    })
-  }).client(() => {
-    Sentry.init({
-      dsn: import.meta.env.VITE_SENTRY_DSN,
-      integrations: [
-        Sentry.replayIntegration({
-          maskAllText: false,
-          blockAllMedia: false,
-        }),
-        Sentry.tanstackRouterBrowserTracingIntegration(router),
-      ],
-      tracesSampleRate: 1.0,
-      replaysSessionSampleRate: 1.0,
-      replaysOnErrorSampleRate: 1.0,
-    })
-  })()
-<% } %>
-
 // Register the router instance for type safety
 declare module '@tanstack/react-router' {
   interface Register {