Skip to content

Commit e3c2e23

Browse files
nitedaninitedani
committed
1
1 parent 34984ef commit e3c2e23

File tree

19 files changed

+854
-0
lines changed

19 files changed

+854
-0
lines changed

‎examples/sentry/.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
dist/
2+
node_modules/
3+
.DS_Store
4+
*.log
5+
.env
6+
.env.local

‎examples/sentry/README.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Vike + React + Sentry Example
2+
3+
This example demonstrates how to integrate Sentry error tracking with a Vike + React application.
4+
5+
## Features
6+
7+
- ✅ Client-side error tracking
8+
- ✅ Server-side error tracking
9+
- ✅ Automatic error boundaries
10+
- ✅ Distributed tracing (server → client)
11+
- ✅ Source map uploads for production debugging
12+
13+
## Setup
14+
15+
1. Install dependencies:
16+
17+
```bash
18+
pnpm install
19+
```
20+
21+
2. Configure Sentry DSN in `pages/+config.ts`
22+
23+
3. Run development server:
24+
25+
```bash
26+
pnpm dev
27+
```
28+
29+
4. Build for production:
30+
31+
```bash
32+
pnpm build
33+
pnpm prod
34+
```
35+
36+
## Configuration
37+
38+
Edit `pages/+config.ts` to configure Sentry options:
39+
40+
```typescript
41+
sentry: {
42+
dsn: 'YOUR_SENTRY_DSN',
43+
environment: 'production',
44+
client: {
45+
// Client-specific options
46+
},
47+
server: {
48+
// Server-specific options
49+
},
50+
vitePlugin: {
51+
// Sourcemap upload options
52+
org: 'your-org',
53+
project: 'your-project',
54+
authToken: process.env.SENTRY_AUTH_TOKEN
55+
}
56+
}
57+
```
58+
59+
## Learn More
60+
61+
- [Vike Documentation](https://vike.dev)
62+
- [Sentry Documentation](https://docs.sentry.io)

‎examples/sentry/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"scripts": {
3+
"dev": "vike dev",
4+
"build": "vike build",
5+
"prod": "vike build && node ./dist/server/index.mjs"
6+
},
7+
"dependencies": {
8+
"@photonjs/hono": "^0.1.7",
9+
"@sentry/react": "^10.22.0",
10+
"@sentry/node": "^10.22.0",
11+
"@sentry/vite-plugin": "^4.6.0",
12+
"@types/react": "^19.1.13",
13+
"@types/react-dom": "^19.1.9",
14+
"@vitejs/plugin-react": "^5.0.3",
15+
"hono": "^4.7.14",
16+
"react": "^19.2.0",
17+
"react-dom": "^19.2.0",
18+
"typescript": "^5.9.2",
19+
"vike": "^0.4.242",
20+
"vike-photon": "^0.1.20",
21+
"vike-react": "0.6.10",
22+
"vike-react-sentry": "0.1.0",
23+
"vite": "^7.1.7"
24+
},
25+
"type": "module"
26+
}

‎examples/sentry/pages/+config.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
export { config }
2+
3+
import type { Config } from 'vike/types'
4+
import vikeReact from 'vike-react/config'
5+
import vikePhoton from 'vike-photon/config'
6+
import vikeReactSentry from 'vike-react-sentry/config'
7+
8+
const config = {
9+
title: 'Vike + React + Sentry Example',
10+
11+
extends: [vikeReact, vikePhoton, vikeReactSentry],
12+
13+
// Photon configuration
14+
photon: {
15+
server: 'server/index.ts'
16+
},
17+
18+
// Sentry configuration
19+
sentry: {
20+
// ⚠️ Replace with your actual Sentry DSN
21+
// Get it from: https://sentry.io/settings/[your-org]/projects/[your-project]/keys/
22+
dsn: 'https://8de66fe8dda3a86d986df8ee3aa09f72@o4510438936412161.ingest.de.sentry.io/4510438941655120',
23+
24+
// Common options for both client and server
25+
environment: process.env.NODE_ENV || 'development',
26+
tracesSampleRate: 1.0,
27+
28+
// Client-specific configuration (browser)
29+
client: {
30+
// You can add custom beforeSend, integrations, etc.
31+
// These will override the defaults
32+
},
33+
34+
// Server-specific configuration (Node.js)
35+
server: {
36+
// Server-specific options
37+
},
38+
39+
// Vite plugin configuration for sourcemap uploads (optional)
40+
// Uncomment and configure for production builds
41+
// vitePlugin: {
42+
// org: 'your-sentry-org',
43+
// project: 'your-sentry-project',
44+
// authToken: process.env.SENTRY_AUTH_TOKEN,
45+
// }
46+
}
47+
} satisfies Config

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
export { Page }
2+
3+
import { useState } from 'react'
4+
5+
function Page() {
6+
const [count, setCount] = useState(0)
7+
8+
const throwError = () => {
9+
throw new Error('This is a test error sent to Sentry!')
10+
}
11+
12+
const throwAsyncError = async () => {
13+
await new Promise(resolve => setTimeout(resolve, 100))
14+
throw new Error('This is an async error sent to Sentry!')
15+
}
16+
17+
return (
18+
<div style={{ padding: '20px', fontFamily: 'system-ui' }}>
19+
<h1>Vike + React + Sentry Example</h1>
20+
21+
<p>
22+
This example demonstrates Sentry error tracking integration with Vike.
23+
</p>
24+
25+
<div style={{ marginTop: '20px' }}>
26+
<h2>Counter: {count}</h2>
27+
<button onClick={() => setCount(count + 1)}>
28+
Increment
29+
</button>
30+
</div>
31+
32+
<div style={{ marginTop: '20px' }}>
33+
<h2>Test Error Tracking</h2>
34+
<p>Click these buttons to send test errors to Sentry:</p>
35+
36+
<div style={{ display: 'flex', gap: '10px', marginTop: '10px' }}>
37+
<button
38+
onClick={throwError}
39+
style={{ padding: '10px', backgroundColor: '#ff4444', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
40+
>
41+
Throw Sync Error
42+
</button>
43+
44+
<button
45+
onClick={throwAsyncError}
46+
style={{ padding: '10px', backgroundColor: '#ff8844', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
47+
>
48+
Throw Async Error
49+
</button>
50+
</div>
51+
</div>
52+
53+
<div style={{ marginTop: '40px', padding: '15px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
54+
<h3>Configuration</h3>
55+
<p>Edit <code>pages/+config.ts</code> to configure your Sentry DSN and options.</p>
56+
<ul>
57+
<li>Client-side errors are automatically captured</li>
58+
<li>Server-side errors are automatically captured</li>
59+
<li>Distributed tracing connects server and client errors</li>
60+
</ul>
61+
</div>
62+
</div>
63+
)
64+
}

‎examples/sentry/server/index.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Hono } from 'hono'
2+
import { apply, serve } from '@photonjs/hono'
3+
4+
function startServer() {
5+
const app = new Hono()
6+
7+
// Apply Vike and Vike extensions middleware
8+
apply(app)
9+
10+
return serve(app)
11+
}
12+
13+
export default startServer()

‎examples/sentry/tsconfig.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"strict": true,
4+
"module": "ES2020",
5+
"moduleResolution": "bundler",
6+
"target": "ES2020",
7+
"lib": ["DOM", "DOM.Iterable", "ESNext"],
8+
"types": ["vite/client"],
9+
"jsx": "react",
10+
"skipLibCheck": true,
11+
"esModuleInterop": true
12+
},
13+
"include": [
14+
"**/*",
15+
// Include .test* files
16+
// https://github.com/microsoft/TypeScript/issues/49555
17+
"**/.*"
18+
]
19+
}

‎examples/sentry/vite.config.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { defineConfig } from 'vite'
2+
import react from '@vitejs/plugin-react'
3+
import vike from 'vike/plugin'
4+
5+
6+
export default defineConfig({
7+
plugins: [
8+
react(),
9+
vike(),
10+
]
11+
})

‎packages/vike-react-sentry/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules/
2+
/dist/

‎packages/vike-react-sentry/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Changelog
2+
3+
## 0.1.0
4+
5+
Initial release.
6+

0 commit comments

Comments
 (0)