feat: integrate Sentry with adaptive sampling and error tracking

Author: nitedani

examples/sentry/pages/+config.ts

@@ -8,11 +8,6 @@ import vikeReactSentry from 'vike-react-sentry/config'
 const config = {
   title: 'Vike + React + Sentry Example',
   extends: [vikeReact, vikePhoton, vikeReactSentry],
-  sentry: {
-    tracesSampleRate: 1.0,
-    replaysSessionSampleRate: 0.1,
-    replaysOnErrorSampleRate: 1.0,
-  },
   // Photon configuration
   photon: {
     server: '../server/index.ts',

package.json

@@ -31,5 +31,10 @@
     "playwright-chromium": "^1.57.0",
     "prettier": "^3.2.5"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "pnpm": {
+    "overrides": {
+      "vike": "0.4.252-commit-7f781cf"
+    }
+  }
 }

packages/vike-react-sentry/package.json

@@ -12,7 +12,6 @@
     "./__internal/integration/onCreateGlobalContext.client": "./dist/integration/onCreateGlobalContext.client.js",
     "./__internal/integration/onHookCall.server": "./dist/integration/onHookCall.server.js",
     "./__internal/integration/onHookCall.client": "./dist/integration/onHookCall.client.js",
-    "./__internal/integration/client": "./dist/integration/client.js",
     "./__internal/integration/onError": "./dist/integration/onError.js"
   },
   "scripts": {

packages/vike-react-sentry/src/integration/constants.ts

@@ -0,0 +1,2 @@
+export const TRACE_DEFAULT_SAMPLE_RATE = 0.2
+export const TRACE_DEFAULT_SAMPLE_RATE_ERROR = 1.0

packages/vike-react-sentry/src/integration/defaults-client.ts

@@ -0,0 +1,20 @@
+import { SentryReactOptions } from '../types.js'
+import { resolveDsn } from '../utils/resolveDsn.js'
+import * as SentryReact from '@sentry/react'
+import { TRACE_DEFAULT_SAMPLE_RATE, TRACE_DEFAULT_SAMPLE_RATE_ERROR } from './constants.js'
+
+export const DEFAULT_SENTRY_CLIENT_SETTINGS = (clientConfig: SentryReactOptions) =>
+  ({
+    environment: clientConfig.environment || import.meta.env.MODE || 'production',
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+    integrations: [SentryReact.browserTracingIntegration(), SentryReact.replayIntegration()],
+    dsn: resolveDsn(clientConfig.dsn),
+    tracesSampler: (samplingContext) => {
+      const { attributes, inheritOrSampleWith } = samplingContext
+      if (attributes?.hasRecentErrors === true) {
+        return TRACE_DEFAULT_SAMPLE_RATE_ERROR
+      }
+      return inheritOrSampleWith(clientConfig.tracesSampleRate || TRACE_DEFAULT_SAMPLE_RATE)
+    },
+  }) as SentryReactOptions

packages/vike-react-sentry/src/integration/defaults-server.ts

@@ -0,0 +1,16 @@
+import { SentryNodeOptions } from '../types.js'
+import { resolveDsn } from '../utils/resolveDsn.js'
+import { TRACE_DEFAULT_SAMPLE_RATE, TRACE_DEFAULT_SAMPLE_RATE_ERROR } from './constants.js'
+
+export const DEFAULT_SENTRY_SERVER_SETTINGS = (serverConfig: SentryNodeOptions) =>
+  ({
+    environment: serverConfig.environment || import.meta.env.MODE || 'production',
+    dsn: resolveDsn(serverConfig.dsn),
+    tracesSampler: (samplingContext) => {
+      const { attributes, inheritOrSampleWith } = samplingContext
+      if (attributes?.hasRecentErrors === true) {
+        return TRACE_DEFAULT_SAMPLE_RATE_ERROR
+      }
+      return inheritOrSampleWith(serverConfig.tracesSampleRate || TRACE_DEFAULT_SAMPLE_RATE)
+    },
+  }) as SentryNodeOptions

packages/vike-react-sentry/src/integration/onCreateGlobalContext.client.ts

@@ -2,25 +2,22 @@ export { onCreateGlobalContext }
 
 import * as SentryReact from '@sentry/react'
 import type { GlobalContextClient } from 'vike/types'
-import { resolveDsn } from '../utils/resolveDsn.js'
 import { assignDeep } from '../utils/assignDeep.js'
 import { SentryOptions } from '../types.js'
+import { DEFAULT_SENTRY_CLIENT_SETTINGS } from './defaults-client.js'
 
 async function onCreateGlobalContext(globalContext: GlobalContextClient): Promise<void> {
-  if (!globalContext.config.sentry?.length) return
-  const clientConfig = globalContext.config.sentry.reverse().reduce((acc, curr) => {
+  const clientConfig = (globalContext.config.sentry || []).reverse().reduce((acc, curr) => {
     if (typeof curr === 'function') {
       curr = curr(globalContext)
     }
     return assignDeep(acc, curr)
   }, {}) as SentryOptions
 
-  if (!clientConfig) return
   if (!SentryReact.getClient()) {
     SentryReact.init({
-      integrations: [SentryReact.browserTracingIntegration(), SentryReact.replayIntegration()],
+      ...DEFAULT_SENTRY_CLIENT_SETTINGS(clientConfig),
       ...clientConfig,
-      dsn: resolveDsn(clientConfig.dsn),
     })
   }
 }

packages/vike-react-sentry/src/integration/onCreateGlobalContext.server.ts

@@ -2,24 +2,22 @@ export { onCreateGlobalContext }
 
 import * as SentryNode from '@sentry/node'
 import type { GlobalContextServer } from 'vike/types'
-import { resolveDsn } from '../utils/resolveDsn.js'
-import { assignDeep } from '../utils/assignDeep.js'
 import { SentryOptions } from '../types.js'
+import { assignDeep } from '../utils/assignDeep.js'
+import { DEFAULT_SENTRY_SERVER_SETTINGS } from './defaults-server.js'
 
 async function onCreateGlobalContext(globalContext: GlobalContextServer): Promise<void> {
-  if (!globalContext.config.sentry?.length) return
-  const serverConfig = globalContext.config.sentry.reverse().reduce((acc, curr) => {
+  const serverConfig = (globalContext.config.sentry || []).reverse().reduce((acc, curr) => {
     if (typeof curr === 'function') {
       curr = curr(globalContext)
     }
     return assignDeep(acc, curr)
   }, {}) as SentryOptions
 
-  if (!serverConfig) return
   if (!SentryNode.getClient()) {
     SentryNode.init({
+      ...DEFAULT_SENTRY_SERVER_SETTINGS(serverConfig),
       ...serverConfig,
-      dsn: resolveDsn(serverConfig.dsn),
     })
   }
 }

packages/vike-react-sentry/src/integration/onHookCall.client.ts

@@ -1,6 +1,6 @@
 import { Config } from 'vike/types'
 import * as Sentry from '@sentry/react'
-import { markErrorAsSeen } from '../utils/error.js'
+import { markErrorAsSeen, recordError, hasRecentErrors } from '../utils/error.js'
 
 /**
  * Vike onHookCall configuration for Sentry integration (client-side).
@@ -14,7 +14,6 @@ export const onHookCall: Config['onHookCall'] = async (hook, pageContext) => {
   // Extract useful context for Sentry
   const url = pageContext?.urlOriginal ?? 'unknown'
   const pageId = pageContext?.pageId ?? 'unknown'
-  const routeParams = pageContext?.routeParams ?? {}
 
   // withScope ensures any error captured during hook execution has Vike context
   return Sentry.withScope((scope) => {
@@ -25,7 +24,6 @@ export const onHookCall: Config['onHookCall'] = async (hook, pageContext) => {
       filePath: hook.filePath,
       pageId,
       url,
-      routeParams,
     })
 
     return Sentry.startSpan(
@@ -37,20 +35,15 @@ export const onHookCall: Config['onHookCall'] = async (hook, pageContext) => {
           'vike.hook.file': hook.filePath,
           'vike.page.id': pageId,
           'vike.url': url,
-          ...Object.entries(routeParams).reduce(
-            (acc, [key, value]) => ({
-              ...acc,
-              [`vike.route.${key}`]: value,
-            }),
-            {},
-          ),
+          hasRecentErrors: hasRecentErrors(),
         },
       },
       async (span) => {
         try {
           await hook.call()
         } catch (error) {
           markErrorAsSeen(error)
+          recordError()
           span.setStatus({
             code: 2,
           })

packages/vike-react-sentry/src/integration/onHookCall.server.ts

@@ -1,6 +1,6 @@
 import { Config } from 'vike/types'
 import * as Sentry from '@sentry/node'
-import { markErrorAsSeen } from '../utils/error.js'
+import { hasRecentErrors, markErrorAsSeen } from '../utils/error.js'
 
 /**
  * Vike onHookCall configuration for Sentry integration.
@@ -14,7 +14,6 @@ export const onHookCall: Config['onHookCall'] = async (hook, pageContext) => {
   // Extract useful context for Sentry
   const url = pageContext?.urlOriginal ?? 'unknown'
   const pageId = pageContext?.pageId ?? 'unknown'
-  const routeParams = pageContext?.routeParams ?? {}
 
   // withScope ensures any error captured during hook execution has Vike context
   return Sentry.withScope((scope) => {
@@ -25,7 +24,6 @@ export const onHookCall: Config['onHookCall'] = async (hook, pageContext) => {
       filePath: hook.filePath,
       pageId,
       url,
-      routeParams,
     })
 
     return Sentry.startSpan(
@@ -37,13 +35,7 @@ export const onHookCall: Config['onHookCall'] = async (hook, pageContext) => {
           'vike.hook.file': hook.filePath,
           'vike.page.id': pageId,
           'vike.url': url,
-          ...Object.entries(routeParams).reduce(
-            (acc, [key, value]) => ({
-              ...acc,
-              [`vike.route.${key}`]: value,
-            }),
-            {},
-          ),
+          hasRecentErrors: hasRecentErrors(),
         },
       },
       async (span) => {