feat: sentry integration (#641)

* feat: sentry integration

* fix: netlify build command

* set --import node_options

* revert

* test error

* Revert "test error"

This reverts commit f25daa3.

* feat: import instrument.server.mjs in server entry point

Author: TkDodo

netlify.toml

@@ -2,7 +2,7 @@
   NODE_OPTIONS = "--max-old-space-size=4096"
 
 [build]
-  command = "vite build"
+  command = "vite build && cp src/instrument.server.mjs dist/server"
   publish = "dist/client"
 
 [functions]

package.json

@@ -9,7 +9,7 @@
     "dev": "pnpm run with-env vite dev",
     "with-env": "dotenv -e ../../.env",
     "dev:frontend": "pnpm run with-env vite dev",
-    "build": "vite build",
+    "build": "vite build && cp src/instrument.server.mjs dist/server",
     "start": "vite start",
     "lint": "eslint --ext .ts,.tsx ./src",
     "format": "prettier --experimental-cli --ignore-unknown '**/*' --write",
@@ -37,8 +37,8 @@
     "@radix-ui/react-toast": "^1.2.2",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
-    "@sentry/react": "^8.35.0",
-    "@sentry/vite-plugin": "^2.22.6",
+    "@sentry/tanstackstart-react": "^10.32.1",
+    "@sentry/vite-plugin": "^4.6.1",
     "@tailwindcss/typography": "^0.5.13",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/pacer": "^0.16.4",

pnpm-lock.yaml

@@ -6,7 +6,10 @@ import {
   useMatch,
   useRouter,
 } from '@tanstack/react-router'
+import * as Sentry from '@sentry/tanstackstart-react'
+
 import { Button } from './Button'
+import { useEffect } from 'react'
 
 // type DefaultCatchBoundaryType = {
 //   status: number
@@ -17,6 +20,9 @@ import { Button } from './Button'
 
 export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   const router = useRouter()
+  useEffect(() => {
+    Sentry.captureException(error)
+  }, [error])
   const isRoot = useMatch({
     strict: false,
     select: (state) => state.id === rootRouteId,

src/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/tanstackstart-react'
+
+Sentry.init({
+  dsn: 'https://ac4bfc43ff4a892f8dc7053c4a50d92f@o4507236158537728.ingest.us.sentry.io/4507236163649536',
+  integrations: [],
+  sendDefaultPii: true,
+  // Performance Monitoring
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ['localhost', /^https:\/\/tanstack\.com\//],
+})

src/instrument.server.mjs

@@ -5,6 +5,7 @@ import { DefaultCatchBoundary } from './components/DefaultCatchBoundary'
 import { NotFound } from './components/NotFound'
 import { QueryClient } from '@tanstack/react-query'
 import { GamOnPageChange } from './components/Gam'
+import * as Sentry from '@sentry/tanstackstart-react'
 
 export function getRouter() {
   const queryClient: QueryClient = new QueryClient({
@@ -42,6 +43,24 @@ export function getRouter() {
     GamOnPageChange()
   })
 
+  if (!router.isServer) {
+    Sentry.init({
+      dsn: 'https://ac4bfc43ff4a892f8dc7053c4a50d92f@o4507236158537728.ingest.us.sentry.io/4507236163649536',
+      integrations: [
+        Sentry.browserTracingIntegration(),
+        Sentry.replayIntegration(),
+      ],
+      sendDefaultPii: true,
+      // Performance Monitoring
+      tracesSampleRate: 1.0, //  Capture 100% of the transactions
+      // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+      tracePropagationTargets: ['localhost', /^https:\/\/tanstack\.com\//],
+      // Session Replay
+      replaysSessionSampleRate: 0.1, // 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, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+    })
+  }
+
   return router
 }
 

src/router.tsx

@@ -0,0 +1,9 @@
+import './instrument.server.mjs'
+
+import handler, { createServerEntry } from '@tanstack/react-start/server-entry'
+
+export default createServerEntry({
+  fetch(request) {
+    return handler.fetch(request)
+  },
+})