Add vike-react-sentry

examples/sentry/.env.example

@@ -0,0 +1,7 @@
+# Required: Your Sentry DSN (public, safe to expose to the browser)
+PUBLIC_ENV__SENTRY_DSN=your-dsn-url
+
+# Required for source map upload: Sentry Auth Token
+# Create at https://sentry.io/settings/account/api/auth-tokens/
+# Required scopes: project:read, project:releases, project:write
+SENTRY_AUTH_TOKEN=sntryu_xxxxx

examples/sentry/.gitignore

@@ -0,0 +1,8 @@
+dist/
+node_modules/
+.DS_Store
+*.log
+.env
+.env.local
+.env.production
+

examples/sentry/.test-dev.test.ts

@@ -0,0 +1,2 @@
+import { testRun } from './.testRun'
+testRun('pnpm run dev')

examples/sentry/.test-prod.test.ts

@@ -0,0 +1,2 @@
+import { testRun } from './.testRun'
+testRun('pnpm run prod')

examples/sentry/.testRun.ts

@@ -0,0 +1,94 @@
+export { testRun }
+
+import { test, expect, run, fetchHtml, page, getServerUrl, autoRetry } from '@brillout/test-e2e'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const TEST_DSN = 'https://8de66fe8dda3a86d986df8ee3aa09f72@o4510438936412161.ingest.de.sentry.io/4510438941655120'
+
+function setupEnv() {
+  const envPath = path.join(__dirname, '.env')
+  const examplePath = path.join(__dirname, '.env.example')
+  let content = fs.readFileSync(examplePath, 'utf-8')
+  content = content.replace('your-dsn-url', TEST_DSN)
+  fs.writeFileSync(envPath, content)
+}
+
+function testRun(cmd: 'pnpm run dev' | 'pnpm run prod') {
+  setupEnv()
+  run(cmd, {
+    // We intentionally throw errors to test Sentry error reporting
+    tolerateError: ({ logText }) =>
+      logText.includes('This is a test error sent to Sentry!') ||
+      logText.includes('This is an async error sent to Sentry!') ||
+      logText.includes('[sentry-vite-plugin]'),
+  })
+
+  test('page content is rendered to HTML', async () => {
+    const html = await fetchHtml('/')
+    expect(html).toContain('<h1>Vike + React + Sentry Example</h1>')
+  })
+
+  test('page is rendered to the DOM and interactive', async () => {
+    await page.goto(getServerUrl() + '/')
+    expect(await page.textContent('h1')).toBe('Vike + React + Sentry Example')
+    await testCounter()
+  })
+
+  test('sync error is sent to Sentry', async () => {
+    await page.goto(getServerUrl() + '/')
+    await testSentryRequest('Throw Sync Error', 'This is a test error sent to Sentry!')
+  })
+
+  test('async error is sent to Sentry', async () => {
+    await page.goto(getServerUrl() + '/')
+    await testSentryRequest('Throw Async Error', 'This is an async error sent to Sentry!')
+  })
+}
+
+async function testCounter() {
+  // autoRetry() in case page isn't hydrated yet
+  await autoRetry(
+    async () => {
+      const heading = page.locator('h2', { hasText: 'Counter' })
+      expect(await heading.textContent()).toBe('Counter: 0')
+    },
+    { timeout: 5 * 1000 },
+  )
+  await autoRetry(
+    async () => {
+      const btn = page.locator('button', { hasText: 'Increment' })
+      await btn.click()
+      const heading = page.locator('h2', { hasText: 'Counter' })
+      expect(await heading.textContent()).toBe('Counter: 1')
+    },
+    { timeout: 5 * 1000 },
+  )
+}
+
+async function testSentryRequest(buttonText: string, expectedMessage: string) {
+  const sentryBodies: string[] = []
+
+  // Listen for Sentry envelope requests
+  const listener = (req: { url: () => string; method: () => string; postData: () => string | null }) => {
+    if (req.url().includes('sentry.io') && req.method() === 'POST') {
+      sentryBodies.push(req.postData() || '')
+    }
+  }
+  page.on('request', listener)
+
+  const btn = page.locator('button', { hasText: buttonText })
+  await btn.click()
+
+  await autoRetry(
+    async () => {
+      const match = sentryBodies.find((body) => body.includes(expectedMessage))
+      expect(match).toBeTruthy()
+    },
+    { timeout: 10 * 1000 },
+  )
+
+  page.removeListener('request', listener)
+}

examples/sentry/README.md

@@ -0,0 +1,64 @@
+# Vike + React + Sentry Example
+
+This example demonstrates how to integrate Sentry error tracking with a Vike + React application using [`vike-react-sentry`](https://github.com/vikejs/vike-react/tree/main/packages/vike-react-sentry).
+
+## Features
+
+- Client-side error tracking
+- Server-side error tracking
+- Performance monitoring and tracing
+- Source map uploads for production debugging
+
+## Setup
+
+1. Install dependencies:
+
+```bash
+pnpm install
+```
+
+2. Copy `.env.example` to `.env` and fill in your Sentry DSN:
+
+```bash
+cp .env.example .env
+```
+
+3. Run development server:
+
+```bash
+pnpm dev
+```
+
+4. Build for production (source maps are uploaded when `SENTRY_AUTH_TOKEN` is set):
+
+```bash
+pnpm build
+pnpm prod
+```
+
+## Configuration
+
+The Sentry DSN and auth token are configured via environment variables in `.env`:
+
+```bash
+PUBLIC_ENV__SENTRY_DSN=https://xxxxx@xxxxx.ingest.sentry.io/xxxxx
+SENTRY_AUTH_TOKEN=sntryu_xxxxx
+```
+
+You can optionally customize Sentry SDK options in `pages/+config.ts`:
+
+```ts
+export default {
+  sentry: {
+    tracesSampleRate: 1.0,
+    debug: true,
+  }
+}
+```
+
+See the [`vike-react-sentry` README](https://github.com/vikejs/vike-react/tree/main/packages/vike-react-sentry) for all available options.
+
+## Learn More
+
+- [Vike Documentation](https://vike.dev)
+- [Sentry Documentation](https://docs.sentry.io)

examples/sentry/package.json

@@ -0,0 +1,26 @@
+{
+  "scripts": {
+    "dev": "vike dev",
+    "build": "vike build",
+    "prod": "vike build && node ./dist/server/index.mjs"
+  },
+  "dependencies": {
+    "@photonjs/hono": "^0.1.7",
+    "@sentry/react": "^10.22.0",
+    "@sentry/node": "^10.22.0",
+    "@sentry/vite-plugin": "^4.6.0",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "hono": "^4.7.14",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.2",
+    "vike": "^0.4.253",
+    "vike-photon": "^0.1.20",
+    "vike-react": "0.6.10",
+    "vike-react-sentry": "0.1.0",
+    "vite": "^7.1.7"
+  },
+  "type": "module"
+}

examples/sentry/pages/+config.ts

@@ -0,0 +1,15 @@
+export { config }
+
+import type { Config } from 'vike/types'
+import vikeReact from 'vike-react/config'
+import vikePhoton from 'vike-photon/config'
+import vikeReactSentry from 'vike-react-sentry/config'
+
+const config = {
+  title: 'Vike + React + Sentry Example',
+  extends: [vikeReact, vikePhoton, vikeReactSentry],
+  // Photon configuration
+  photon: {
+    server: '../server/index.ts',
+  },
+} satisfies Config

examples/sentry/pages/index/+Page.tsx

@@ -0,0 +1,76 @@
+export { Page }
+
+import { useState } from 'react'
+
+function Page() {
+  const [count, setCount] = useState(0)
+
+  const throwError = () => {
+    throw new Error('This is a test error sent to Sentry!')
+  }
+
+  const throwAsyncError = async () => {
+    await new Promise((resolve) => setTimeout(resolve, 100))
+    throw new Error('This is an async error sent to Sentry!')
+  }
+
+  return (
+    <div style={{ padding: '20px', fontFamily: 'system-ui' }}>
+      <h1>Vike + React + Sentry Example</h1>
+
+      <p>This example demonstrates Sentry error tracking integration with Vike.</p>
+
+      <div style={{ marginTop: '20px' }}>
+        <h2>Counter: {count}</h2>
+        <button onClick={() => setCount(count + 1)}>Increment</button>
+      </div>
+
+      <div style={{ marginTop: '20px' }}>
+        <h2>Test Error Tracking</h2>
+        <p>Click these buttons to send test errors to Sentry:</p>
+
+        <div style={{ display: 'flex', gap: '10px', marginTop: '10px' }}>
+          <button
+            onClick={throwError}
+            style={{
+              padding: '10px',
+              backgroundColor: '#ff4444',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Throw Sync Error
+          </button>
+
+          <button
+            onClick={throwAsyncError}
+            style={{
+              padding: '10px',
+              backgroundColor: '#ff8844',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Throw Async Error
+          </button>
+        </div>
+      </div>
+
+      <div style={{ marginTop: '40px', padding: '15px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
+        <h3>Configuration</h3>
+        <p>
+          Edit <code>pages/+config.ts</code> to configure your Sentry DSN and options.
+        </p>
+        <ul>
+          <li>Client-side errors are automatically captured</li>
+          <li>Server-side errors are automatically captured</li>
+          <li>Distributed tracing connects server and client errors</li>
+        </ul>
+      </div>
+    </div>
+  )
+}

examples/sentry/server/index.ts

@@ -0,0 +1,13 @@
+import { Hono } from 'hono'
+import { apply, serve } from '@photonjs/hono'
+
+function startServer() {
+  const app = new Hono()
+
+  // Apply Vike and Vike extensions middleware
+  apply(app)
+
+  return serve(app)
+}
+
+export default startServer()

examples/sentry/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "module": "ES2020",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vite/client"],
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "esModuleInterop": true
+  },
+  "include": [
+    "**/*",
+    // Include .test* files
+    // https://github.com/microsoft/TypeScript/issues/49555
+    "**/.*"
+  ]
+}

examples/sentry/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import vike from 'vike/plugin'
+
+export default defineConfig({
+  plugins: [react(), vike()],
+})

packages/vike-react-query/package.json

@@ -23,7 +23,7 @@
     "@tanstack/react-query": ">=5.0.0",
     "react": ">=18.0.0",
     "react-streaming": ">=0.4.6",
-    "vike": ">=0.4.242",
+    "vike": ">=0.4.252",
     "vike-react": ">=0.6.8"
   },
   "devDependencies": {

packages/vike-react-sentry/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

packages/vike-react-sentry/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.1.0
+
+Initial release.