feat: add react-router support (HugoRCD#212)

Co-authored-by: Hugo Richard <hugo.richard@vercel.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

.changeset/react-router-integration.md

@@ -0,0 +1,5 @@
+---
+"evlog": minor
+---
+
+Add React Router middleware integration (`evlog/react-router`) with automatic wide-event logging, drain, enrich, and tail sampling support

.github/pull_request_template.md

@@ -34,6 +34,7 @@ Here are the available types and scopes:
 - elysia (Elysia plugin)
 - fastify (Fastify plugin)
 - nestjs (NestJS middleware)
+- react-router (React Router integration)
 - sveltekit (SvelteKit integration)
 - workers (Cloudflare Workers adapter)
 - fs (File System adapter)

.github/workflows/semantic-pull-request.yml

@@ -39,6 +39,7 @@ jobs:
             elysia
             fastify
             nestjs
+            react-router
             sveltekit
             workers
             fs

apps/docs/app/components/features/FeatureFrameworks.vue

@@ -23,15 +23,16 @@ const frameworkRows = [
     { name: 'SvelteKit', icon: 'i-simple-icons-svelte', tab: 2 },
     { name: 'Nitro', icon: 'i-custom-nitro', tab: 3 },
     { name: 'TanStack Start', icon: 'i-custom-tanstack', tab: 4 },
-    { name: 'NestJS', icon: 'i-simple-icons-nestjs', tab: 5 },
+    { name: 'React Router', icon: 'i-simple-icons-reactrouter', tab: 5 },
+    { name: 'NestJS', icon: 'i-simple-icons-nestjs', tab: 6 },
   ],
   [
-    { name: 'Express', icon: 'i-simple-icons-express', tab: 6 },
-    { name: 'Hono', icon: 'i-simple-icons-hono', tab: 7 },
-    { name: 'Fastify', icon: 'i-simple-icons-fastify', tab: 8 },
-    { name: 'Elysia', icon: 'i-custom-elysia', tab: 9 },
-    { name: 'Cloudflare', icon: 'i-simple-icons-cloudflare', tab: 10 },
-    { name: 'Bun', icon: 'i-simple-icons-bun', tab: 11 },
+    { name: 'Express', icon: 'i-simple-icons-express', tab: 7 },
+    { name: 'Hono', icon: 'i-simple-icons-hono', tab: 8 },
+    { name: 'Fastify', icon: 'i-simple-icons-fastify', tab: 9 },
+    { name: 'Elysia', icon: 'i-custom-elysia', tab: 10 },
+    { name: 'Cloudflare', icon: 'i-simple-icons-cloudflare', tab: 11 },
+    { name: 'Bun', icon: 'i-simple-icons-bun', tab: 12 },
     { name: 'Vite', icon: 'i-custom-vite', link: '/core-concepts/vite-plugin' },
   ],
 ]
@@ -129,24 +130,27 @@ const frameworkRows = [
         <slot name="tanstack-start" />
       </div>
       <div v-show="activeTab === 5" class="landing-code">
-        <slot name="nestjs" />
+        <slot name="react-router" />
       </div>
       <div v-show="activeTab === 6" class="landing-code">
-        <slot name="express" />
+        <slot name="nestjs" />
       </div>
       <div v-show="activeTab === 7" class="landing-code">
-        <slot name="hono" />
+        <slot name="express" />
       </div>
       <div v-show="activeTab === 8" class="landing-code">
-        <slot name="fastify" />
+        <slot name="hono" />
       </div>
       <div v-show="activeTab === 9" class="landing-code">
-        <slot name="elysia" />
+        <slot name="fastify" />
       </div>
       <div v-show="activeTab === 10" class="landing-code">
-        <slot name="cloudflare" />
+        <slot name="elysia" />
       </div>
       <div v-show="activeTab === 11" class="landing-code">
+        <slot name="cloudflare" />
+      </div>
+      <div v-show="activeTab === 12" class="landing-code">
         <slot name="bun" />
       </div>
     </Motion>

apps/docs/content/0.landing.md

@@ -280,6 +280,34 @@ Wide events and structured errors for TypeScript. One log per request, full cont
   })
   ```
 
+  #react-router
+  ```ts [app/routes/api.checkout.tsx]
+  import { loggerContext } from 'evlog/react-router'
+  import { createError } from 'evlog'
+
+  export async function action({ request, context }: Route.ActionArgs) {
+    const log = context.get(loggerContext)
+    const { cartId } = await request.json()
+
+    const cart = await db.findCart(cartId)
+    log.set({ cart: { items: cart.items.length, total: cart.total } })
+
+    const charge = await stripe.charge(cart.total)
+    log.set({ stripe: { chargeId: charge.id } })
+
+    if (!charge.success) {
+      throw createError({
+        status: 402,
+        message: 'Payment failed',
+        why: charge.decline_reason,
+        fix: 'Try a different payment method',
+      })
+    }
+
+    return Response.json({ orderId: charge.id })
+  }
+  ```
+
   #nestjs
   ```ts [app.module.ts]
   import { Module } from '@nestjs/common'

apps/docs/content/1.getting-started/2.installation.md

@@ -93,6 +93,15 @@ After installing the package, follow the setup guide for your framework:
   :::
   :::card
   ---
+  icon: i-simple-icons-reactrouter
+  title: React Router
+  to: /frameworks/react-router
+  color: neutral
+  ---
+  Middleware with `context.get(loggerContext)`.
+  :::
+  :::card
+  ---
   icon: i-simple-icons-nestjs
   title: NestJS
   to: /frameworks/nestjs

apps/docs/content/2.frameworks/00.overview.md

@@ -17,6 +17,7 @@ evlog provides native integrations for every major TypeScript framework. The sam
 | [SvelteKit](/frameworks/sveltekit) | `evlog/sveltekit` | Hooks | `event.locals.log` / `useLogger()` | Stable |
 | [Nitro](/frameworks/nitro) | `evlog/nitro` | Module | `useLogger(event)` | Stable |
 | [TanStack Start](/frameworks/tanstack-start) | `evlog/nitro/v3` | Module | `useRequest().context.log` | Stable |
+| [React Router](/frameworks/react-router) | `evlog/react-router` | Middleware | `context.get(loggerContext)` / `useLogger()` | Stable |
 | [NestJS](/frameworks/nestjs) | `evlog/nestjs` | Module | `useLogger()` | Stable |
 | [Express](/frameworks/express) | `evlog/express` | Middleware | `req.log` / `useLogger()` | Stable |
 | [Hono](/frameworks/hono) | `evlog/hono` | Middleware | `c.get('log')` | Stable |
@@ -77,6 +78,15 @@ evlog provides native integrations for every major TypeScript framework. The sam
   :::
   :::card
   ---
+  icon: i-simple-icons-reactrouter
+  title: React Router
+  to: /frameworks/react-router
+  color: neutral
+  ---
+  Middleware with `context.get(loggerContext)` and `useLogger()` for loaders and services.
+  :::
+  :::card
+  ---
   icon: i-simple-icons-nestjs
   title: NestJS
   to: /frameworks/nestjs