reroute-js 0.20.6 → 0.21.0

package/README.md

@@ -185,6 +185,7 @@ Reroute is a dead-simple file-based routing framework for building full-stack Re
 - 📚 **Content API Routes** - Dynamic content endpoints
 - 🛠️ **Dev Mode Routes** - Development tooling and live reload
 - 📦 **Artifact Routes** - Serve generated content chunks and registry
+- 📊 **Optional OpenTelemetry** - Built-in tracing for SSR, 404s, cache hits (install `@elysiajs/opentelemetry` to enable)
 
 ### 🎯 Build System
 - 🔧 **Transpilation** - TypeScript/JSX to optimized JavaScript
@@ -1132,7 +1133,7 @@ export default defineConfig({
 });
 ```
 
-Run `reroute gen` to generate `.reroute/search-index.json`.
+Run `reroute gen` to generate `.reroute/search.json`.
 
 ### Client-Side Search with Pagination
 
@@ -1476,6 +1477,84 @@ If no `[og].tsx` exists for a route, uses built-in template with:
 - Avatar and siteName from config
 - Clean black card design
 
+## 📊 OpenTelemetry (Optional)
+
+Reroute has built-in support for OpenTelemetry tracing to help debug SSR, 404s, and cache behavior.
+
+### Installation
+
+```bash
+bun add @elysiajs/opentelemetry
+```
+
+That's it! Reroute automatically detects and uses it.
+
+### What Gets Traced
+
+Once installed, Reroute sends traces with detailed attributes:
+
+- **SSR Rendering** (`reroute.ssr.render_stream`, `reroute.ssr.render_sync`)
+  - `reroute.ssr.streaming`: `true`/`false`
+  - `reroute.pathname`: `/blog/my-post`
+  - `reroute.collection`: `blog`
+  - `reroute.cache.hit`: `true`/`false`
+
+- **404 Not Found** (When routes don't exist)
+  - `reroute.not_found`: `true`
+  - `reroute.pathname`: `/missing-page`
+  - `reroute.method`: `GET`
+
+- **SSR Data Loading** (`reroute.data.compute`)
+  - `reroute.data.path`: `/products/123`
+  - `reroute.data.cache_hit`: `true`/`false`
+
+- **Errors** (SSR failures, data loading errors)
+  - `reroute.error`: `true`
+  - `reroute.error.type`: `SSRRenderError`, `SSRDataError`, etc.
+  - `reroute.error.collection`: `blog`
+
+### Usage with Your App Telemetry
+
+```typescript
+import { Elysia } from 'elysia';
+import { reroute } from 'reroute-js/elysia';
+import { opentelemetry } from '@elysiajs/opentelemetry';
+import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-node';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
+
+new Elysia()
+  .use(opentelemetry({
+    serviceName: 'My App',
+    spanProcessors: [
+      new BatchSpanProcessor(
+        new OTLPTraceExporter({
+          url: 'http://localhost:4318/v1/traces',
+        })
+      )
+    ]
+  }))
+  .use(reroute({ app: createElement(App) }))
+  .listen(3000);
+```
+
+Reroute traces will appear nested under your request spans. Filter by `reroute.*` attributes in SigNoz/Jaeger.
+
+**Best Practice:** Use named functions (not arrow functions) for better span names:
+
+```typescript
+// ❌ Bad: Shows as "N/A" or "anonymous" in traces
+.get('/api/users', async ({ params }) => {
+  return await getUsers();
+});
+
+// ✅ Good: Shows as "fetchUsers" in traces
+.get('/api/users', async function fetchUsers({ params }) {
+  return await getUsers();
+});
+```
+
+See [examples/landing/src/plugins/telemetry.ts](./examples/landing/src/plugins/telemetry.ts) for a complete telemetry setup.
+
 ## 📖 Learn More
 
 - [Examples](./examples) - Example projects to get started

package/_/store/src/client/components/ProductCard.tsx

@@ -21,7 +21,7 @@ export default function ProductCard({ product }: ProductCardProps) {
 						height={180}
 						quality={75}
 						sizes='(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 180px'
-						className='max-w-full max-h-full object-contain'
+						className='max-w-full max-h-full object-contain relative z-10 bg-white'
 						style={{ viewTransitionName: `product-image-${product.id}` }}
 					/>
 				</div>

package/_/store/src/client/routes/categories/index.tsx

@@ -80,6 +80,7 @@ function CategoriesIndexPage() {
 			<>
 				<Header />
 				<main className='container-custom py-8'>
+					<h1 className='section-heading'>Shop by Category</h1>
 					<div className='text-center py-16 text-gray-600 text-lg'>
 						<div className='animate-pulse'>Loading categories...</div>
 					</div>

package/_/store/src/client/routes/products/[id].tsx

@@ -18,6 +18,13 @@ const ssr = {
 				};
 			}
 			const product = await getProduct(id);
+			if (!product) {
+				return {
+					product: null,
+					relatedProducts: [],
+					error: 'Product not found',
+				};
+			}
 			const allInCategory = await getProductsByCategory(product.category);
 			const relatedProducts = allInCategory
 				.filter((p) => p.id !== id)
@@ -89,6 +96,7 @@ function ProductDetailPage() {
 			<>
 				<Header />
 				<main className='container-custom py-8'>
+					<h1 className='text-4xl font-bold text-gray-900 mb-8'>Loading...</h1>
 					<div className='text-center py-16 text-gray-600 text-lg'>
 						<div className='animate-pulse'>Loading product details...</div>
 					</div>
@@ -149,7 +157,7 @@ function ProductDetailPage() {
 							quality={85}
 							sizes='(max-width: 1024px) 90vw, 350px'
 							priority
-							className='max-w-full max-h-[500px] object-contain'
+							className='max-w-full max-h-[500px] object-contain relative z-10'
 							style={{ viewTransitionName: `product-image-${product.id}` }}
 						/>
 					</div>

package/cli/bin.d.ts

@@ -1,5 +1,5 @@
 /**
- * reroute-js v0.20.6
+ * reroute-js v0.21.0
  *
  * @license MIT
  * @copyright 2025 stewones <hi@stewan.io>