Adding Sentry support

Author: jherr

src/add-ons.ts

@@ -42,6 +42,7 @@ export type AddOn = {
   phase: 'setup' | 'add-on'
   shadcnComponents?: Array<string>
   warning?: string
+  dependsOn?: Array<string>
 }
 
 function isDirectory(path: string): boolean {
@@ -83,3 +84,29 @@ export async function getAllAddOns(): Promise<Array<AddOn>> {
   }
   return addOns
 }
+
+// Turn the list of chosen add-on IDs into a final list of add-ons by resolving dependencies
+export async function finalizeAddOns(
+  chosenAddOnIDs: Array<string>,
+): Promise<Array<AddOn>> {
+  const finalAddOnIDs = new Set(chosenAddOnIDs)
+
+  const addOns = await getAllAddOns()
+
+  for (const addOnID of finalAddOnIDs) {
+    const addOn = addOns.find((a) => a.id === addOnID)
+    if (!addOn) {
+      throw new Error(`Add-on ${addOnID} not found`)
+    }
+
+    for (const dependsOn of addOn.dependsOn || []) {
+      const dep = addOns.find((a) => a.id === dependsOn)
+      if (!dep) {
+        throw new Error(`Dependency ${dependsOn} not found`)
+      }
+      finalAddOnIDs.add(dep.id)
+    }
+  }
+
+  return [...finalAddOnIDs].map((id) => addOns.find((a) => a.id === id)!)
+}

src/options.ts

@@ -13,7 +13,7 @@ import {
   getPackageManager,
 } from './package-manager.js'
 import { CODE_ROUTER, FILE_ROUTER } from './constants.js'
-import { getAllAddOns } from './add-ons.js'
+import { finalizeAddOns, getAllAddOns } from './add-ons.js'
 
 import type { CliOptions, Options } from './types.js'
 
@@ -166,9 +166,7 @@ export async function promptForOptions(
       process.exit(0)
     }
 
-    options.chosenAddOns = addOns.filter((addOn) =>
-      selectedAddOns.includes(addOn.id),
-    )
+    options.chosenAddOns = await finalizeAddOns(selectedAddOns)
     options.tailwind = true
   } else {
     options.chosenAddOns = []

templates/add-ons/sentry/assets/.env.local.append

@@ -0,0 +1,2 @@
+# Your Sentry DSN (from your Sentry account)
+VITE_SENTRY_DSN=

templates/add-ons/sentry/assets/src/routes/demo.sentry.bad-server-func.tsx

@@ -0,0 +1,29 @@
+import * as fs from 'node:fs/promises'
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/start'
+
+export const Route = createFileRoute('/demo/sentry/bad-server-func')({
+  component: RouteComponent,
+})
+
+const badServerFunc = createServerFn({
+  method: 'GET',
+}).handler(async () => {
+  await fs.readFile('./doesnt-exist', 'utf-8')
+  return true
+})
+
+function RouteComponent() {
+  return (
+    <div className="p-4">
+      <button
+        onClick={async () => {
+          await badServerFunc()
+        }}
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      >
+        I Don't Work, And That Should Fire an Error to Sentry
+      </button>
+    </div>
+  )
+}

templates/add-ons/sentry/info.json

@@ -0,0 +1,13 @@
+{
+  "name": "Sentry",
+  "phase": "setup",
+  "description": "Add Sentry for error monitoring and crash reporting (requires Start).",
+  "link": "https://sentry.com/",
+  "routes": [
+    {
+      "url": "/demo/sentry/bad-server-func",
+      "name": "Sentry"
+    }
+  ],
+  "dependsOn": ["start"]
+}

templates/add-ons/sentry/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@sentry/react": "^8.50.0"
+  }
+}

templates/add-ons/start/assets/src/router.tsx

@@ -0,0 +1,34 @@
+import { createRouter as createTanstackRouter } from '@tanstack/react-router'<% if (addOnEnabled.sentry) { %>
+import * as Sentry from '@sentry/react'
+<% } %>
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+import './styles.css'
+
+// Create a new router instance
+export const createRouter = () => {
+  const router = createTanstackRouter({ routeTree })
+  <% if (addOnEnabled.sentry) { %>
+  Sentry.init({
+    dsn: import.meta.env.VITE_SENTRY_DSN,
+    integrations: [Sentry.replayIntegration(), Sentry.tanstackRouterBrowserTracingIntegration(router)],
+
+    // Setting a sample rate is required for sending performance data.
+    // We recommend adjusting this value in production, or using tracesSampler
+    // for finer control.
+    tracesSampleRate: 1.0,
+    replaysSessionSampleRate: 1.0, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+    replaysOnErrorSampleRate: 1.0,
+  });
+  <% } %>
+  return router;
+}
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}

templates/add-ons/start/assets/src/router.tsx.ejs

@@ -8,6 +8,10 @@
     {
       "url": "/demo/start/server-funcs",
       "name": "Start - Server Functions"
+    },
+    {
+      "url": "/demo/start/api-request",
+      "name": "Start - API Request"
     }
   ],
   "shadcnComponents": ["button", "input"]