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=https://[email protected]/xxxxx
+
+# 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/README.md

@@ -0,0 +1,62 @@
+# Vike + React + Sentry Example
+
+This example demonstrates how to integrate Sentry error tracking with a Vike + React application.
+
+## Features
+
+- ✅ Client-side error tracking
+- ✅ Server-side error tracking
+- ✅ Automatic error boundaries
+- ✅ Distributed tracing (server → client)
+- ✅ Source map uploads for production debugging
+
+## Setup
+
+1. Install dependencies:
+
+```bash
+pnpm install
+```
+
+2. Configure Sentry DSN in `pages/+config.ts`
+
+3. Run development server:
+
+```bash
+pnpm dev
+```
+
+4. Build for production:
+
+```bash
+pnpm build
+pnpm prod
+```
+
+## Configuration
+
+Edit `pages/+config.ts` to configure Sentry options:
+
+```typescript
+sentry: {
+  dsn: 'YOUR_SENTRY_DSN',
+  environment: 'production',
+  client: {
+    // Client-specific options
+  },
+  server: {
+    // Server-specific options
+  },
+  vitePlugin: {
+    // Sourcemap upload options
+    org: 'your-org',
+    project: 'your-project',
+    authToken: process.env.SENTRY_AUTH_TOKEN
+  }
+}
+```
+
+## 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.252",
+    "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()],
+})

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-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,6 @@
+# Changelog
+
+## 0.1.0
+
+Initial release.
+