+ {/* Header */}
+
+
+
+ {/* Demo selector */}
+
+ );
+}
diff --git a/examples/frontend/src/api/client.ts b/examples/frontend/src/api/client.ts
new file mode 100644
index 0000000..0f81254
--- /dev/null
+++ b/examples/frontend/src/api/client.ts
@@ -0,0 +1,47 @@
+const BASE_URL = 'http://localhost:8085';
+
+export async function sendRequest(
+ method: string,
+ path: string,
+ options?: {
+ headers?: Record
+
+ Spring Web Captor
+ + Interactive Demo + +
+
+
+ {/* Main content */}
+
+
+
+ {phase === 'idle' && (
+
+
+
+ )}
+
+ {phase === 'previewing' && (
+ Select a demo above to see the library in action
+
+
+ );
+}
diff --git a/examples/frontend/src/components/CapturedResult.tsx b/examples/frontend/src/components/CapturedResult.tsx
new file mode 100644
index 0000000..19609f9
--- /dev/null
+++ b/examples/frontend/src/components/CapturedResult.tsx
@@ -0,0 +1,418 @@
+import { useState, useEffect } from 'react';
+import type { HttpResponseEvent } from '../types/events';
+import type { DemoScenario } from './demoData';
+import MethodBadge from './MethodBadge';
+import StatusBadge from './StatusBadge';
+import JsonViewer from './JsonViewer';
+import {
+ Clock, Globe, Monitor, MapPin, FileText, AlertTriangle,
+ Server, ArrowDown, Layers, Search, GitBranch, Upload,
+ RotateCcw, Sparkles, Puzzle, Info,
+} from 'lucide-react';
+
+function parseDuration(d: unknown): string {
+ if (!d) return '-';
+ const s = String(d);
+ const match = /PT(?:(\d+)H)?(?:(\d+)M)?(?:([\d.]+)S)?/.exec(s);
+ if (match) {
+ const h = Number.parseInt(match[1] || '0');
+ const m = Number.parseInt(match[2] || '0');
+ const sec = Number.parseFloat(match[3] || '0');
+ const totalMs = (h * 3600 + m * 60 + sec) * 1000;
+ if (totalMs < 1000) return `${Math.round(totalMs)}ms`;
+ return `${(totalMs / 1000).toFixed(2)}s`;
+ }
+ if (typeof d === 'number') return `${d}ms`;
+ return s;
+}
+
+function DataTable({ data, emptyMsg }: { data: Record
+ {/* Request badge floating */}
+
+
+
+
+ {/* Capture pulse */}
+
+
+
+
+
+ {/* Steps */}
+
+
+
+
+
+
+ {STEPS.map((label, i) => (
+
+
+ {i <= step && (
+
+ {i < step ? '✓' : '›'}
+
+ )}
+ {i <= step ? label : ''}
+
+ ))}
+ {emptyMsg || 'None'}
;
+ }
+ return (
+
+
+
+ {Object.entries(data).map(([key, val]) => (
+
+
+ );
+}
+
+function FadeInSection({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
+ const [visible, setVisible] = useState(false);
+ useEffect(() => {
+ const timer = setTimeout(() => setVisible(true), delay);
+ return () => clearTimeout(timer);
+ }, [delay]);
+ return (
+ | {key} | ++ {Array.isArray(val) ? val.join(', ') : String(val ?? '')} + | +
+ {children}
+
+ );
+}
+
+function SectionHeader({ title, icon, accent }: { title: string; icon: React.ReactNode; accent?: string }) {
+ return (
+ + {icon} {title} +
+ ); +} + +function ExtensionInfoPanel() { + const [open, setOpen] = useState(false); + + return ( +
+
+ {open && (
+
+ );
+}
+
+interface Props {
+ event: HttpResponseEvent;
+ demo: DemoScenario;
+ onTryAnother: () => void;
+}
+
+export default function CapturedResult({ event, onTryAnother }: Props) {
+ const [tab, setTab] = useState<'visual' | 'raw'>('visual');
+ const hasFiles = event.bodyPayload?.files && Object.keys(event.bodyPayload.files).length > 0;
+ const hasError = event.errorDetail && Object.keys(event.errorDetail).length > 0;
+ const hasQueryParams = event.queryParams && Object.keys(event.queryParams).length > 0;
+ const hasPathParams = event.pathParams && Object.keys(event.pathParams).length > 0;
+ const hasRequestBody = event.bodyPayload?.body != null;
+ const hasResponseBody = event.responseBody != null;
+
+ let sectionDelay = 0;
+ const nextDelay = () => {
+ sectionDelay += 150;
+ return sectionDelay;
+ };
+
+ return (
+
+
+ )}
+ + Extensions implement IHttpEventExtension and + are automatically picked up as Spring beans. They add custom key-value pairs to every captured event's + {' '}additionalData map. +
++ For example, you could capture the current tenant, the authenticated user's roles, + security context details, or any request-scoped data your application needs for auditing: +
+
+{`@Component
+public class SecurityContextExtension implements IHttpEventExtension {
+
+ @Override
+ public Map enrichRequestEvent(
+ HttpServletRequest request,
+ HttpServletResponse response,
+ HttpRequestEvent event) {
+
+ Authentication auth = SecurityContextHolder.getContext()
+ .getAuthentication();
+
+ Map data = new HashMap<>();
+ data.put("tenantId", TenantContext.getCurrentTenant());
+ data.put("username", auth.getName());
+ data.put("roles", auth.getAuthorities().stream()
+ .map(GrantedAuthority::getAuthority)
+ .toList());
+ return data;
+ }
+}`}
+
+ + Other ideas for custom extensions: +
+-
+
- + - + Tenant ID — multi-tenant isolation + +
- + - + User roles — RBAC auditing + +
- + - + Correlation ID — distributed tracing + +
- + - + Session ID — session tracking + +
- + - + Feature flags — A/B test context + +
- + - + Geo-location — IP-based region + +
- + - + API key / client — consumer tracking + +
- + - + Security context — full auth details + +
+ {/* Header */}
+
+
+
+ {tab === 'raw' ? (
+
+
+ ) : (
+
+ );
+}
diff --git a/examples/frontend/src/components/DemoSelector.tsx b/examples/frontend/src/components/DemoSelector.tsx
new file mode 100644
index 0000000..f668a51
--- /dev/null
+++ b/examples/frontend/src/components/DemoSelector.tsx
@@ -0,0 +1,32 @@
+import type { DemoScenario } from './demoData';
+import MethodBadge from './MethodBadge';
+
+interface Props {
+ demos: DemoScenario[];
+ selected: DemoScenario;
+ onSelect: (demo: DemoScenario) => void;
+}
+
+export default function DemoSelector({ demos, selected, onSelect }: Props) {
+ return (
+
+
+
+
+ Captured by Spring Web Captor
+
+
+
+
+
+ {/* Summary cards */}
+
+
+
+ {/* Full URL */}
+
+
+
+ {/* === EXTENSIONS === */}
+ {(event.duration || event.userIp || event.userAgent) && (
+ <>
+
+
+
+
+
+
+ )}
+
+ {/* === REQUEST CAPTURE === */}
+
+
+
+
+
+
+ {hasQueryParams && (
+
+
+ )}
+
+ {hasPathParams && (
+
+
+ )}
+
+ {hasRequestBody && (
+
+
+ )}
+
+ {hasFiles && (
+
+
+ )}
+
+ {/* === RESPONSE CAPTURE === */}
+
+
+
+
+
+
+
+
+
+ {hasError && (
+
+
+ )}
+
+ {hasResponseBody && (
+
+
+ )}
+
+ {/* Bottom padding */}
+
+
+ )}
+
+
+
+
+ Method
+
+
+ Status
+
+
+
+
+
+ {String(event.endpointExists)}
+
+
+
+
+
+ {event.fullUrl}
+
+
+
+
+ + Extensions enrich events with additional data via the IHttpEventExtension interface. These are built-in — you can add your own. +
+
+ {event.duration && (
+
+
+
+ )}
+ {event.userIp && (
+
+
+ {parseDuration(event.duration)}
+ {event.startTime && event.endTime && (
+
+
+
+ Extension
+
+
+ {event.startTime} → {event.endTime}
+
+ )}
+
+
+ )}
+ {event.userAgent && (
+
+
+ {event.userIp}
+ Client IP
+
+ Extension
+
+
+
+ )}
+
+
+ {event.userAgent}
+
+
+
+ Extension
+
+
+
+
+
+
+ 
+ )}
+
+ ))
+ )}
+
+ {f.filename}
+ {(f.size / 1024).toFixed(1)} KB
+
+
+ Field: {field} | Type: {f.contentType}
+
+ {f.contentType?.startsWith('image/') && f.base64Content && (
+
+
+
+
+
+
+ Response Status
+
+
+ );
+}
diff --git a/examples/frontend/src/components/JsonViewer.tsx b/examples/frontend/src/components/JsonViewer.tsx
new file mode 100644
index 0000000..a0c6fa3
--- /dev/null
+++ b/examples/frontend/src/components/JsonViewer.tsx
@@ -0,0 +1,137 @@
+import { useState } from 'react';
+import { ChevronRight, ChevronDown, Copy, Check } from 'lucide-react';
+
+function StringValue({ value }: { value: string }) {
+ const [expanded, setExpanded] = useState(false);
+ const truncateAt = 200;
+
+ if (value.length <= truncateAt) {
+ return "{value}";
+ }
+
+ return (
+
+ "{expanded ? value : value.slice(0, truncateAt)}
+ {!expanded && (
+
+ )}
+ {expanded && (
+
+ )}
+ "
+
+ );
+}
+
+function JsonValue({ value, depth = 0 }: { value: unknown; depth?: number }) {
+ const [collapsed, setCollapsed] = useState(depth > 2);
+
+ if (value === null || value === undefined) {
+ return null;
+ }
+
+ if (typeof value === 'boolean') {
+ return {String(value)};
+ }
+
+ if (typeof value === 'number') {
+ return {value};
+ }
+
+ if (typeof value === 'string') {
+ return Choose a scenario to see what Spring Web Captor captures:
+
+ {demos.map((demo) => (
+
+ ))}
+
+
+ {value.map((item, i) => (
+
+ ]
+
+ );
+ }
+
+ if (typeof value === 'object') {
+ const entries = Object.entries(value as Record
+
+ ))}
+
+ {entries.map(([key, val], i) => (
+
+ {'}'}
+
+ );
+ }
+
+ return {String(value)};
+}
+
+export default function JsonViewer({ data, label }: { data: unknown; label?: string }) {
+ const [copied, setCopied] = useState(false);
+
+ const handleCopy = () => {
+ navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+ setCopied(true);
+ setTimeout(() => setCopied(false), 1500);
+ };
+
+ return (
+
+ "{key}":
+ ))}
+
+ {label &&
+ );
+}
diff --git a/examples/frontend/src/components/MethodBadge.tsx b/examples/frontend/src/components/MethodBadge.tsx
new file mode 100644
index 0000000..52806c9
--- /dev/null
+++ b/examples/frontend/src/components/MethodBadge.tsx
@@ -0,0 +1,18 @@
+const METHOD_COLORS: Record{label}
}
+
+
+
+
+ {/* Description */}
+
+ );
+}
diff --git a/examples/frontend/src/components/StatusBadge.tsx b/examples/frontend/src/components/StatusBadge.tsx
new file mode 100644
index 0000000..65b5d79
--- /dev/null
+++ b/examples/frontend/src/components/StatusBadge.tsx
@@ -0,0 +1,18 @@
+export default function StatusBadge({ status }: { status: string | number | undefined }) {
+ if (!status) return null;
+
+ const code = typeof status === 'string' ? parseInt(status) || 0 : status;
+ const label = typeof status === 'string' && isNaN(parseInt(status)) ? status : String(code);
+
+ let colors = 'bg-slate-500/15 text-slate-400 border-slate-500/30';
+ if (code >= 200 && code < 300) colors = 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30';
+ else if (code >= 300 && code < 400) colors = 'bg-yellow-500/15 text-yellow-400 border-yellow-500/30';
+ else if (code >= 400 && code < 500) colors = 'bg-orange-500/15 text-orange-400 border-orange-500/30';
+ else if (code >= 500) colors = 'bg-red-500/15 text-red-400 border-red-500/30';
+
+ return (
+
+ {label}
+
+ );
+}
diff --git a/examples/frontend/src/components/demoData.ts b/examples/frontend/src/components/demoData.ts
new file mode 100644
index 0000000..4f1a5e6
--- /dev/null
+++ b/examples/frontend/src/components/demoData.ts
@@ -0,0 +1,187 @@
+import { sendRequest } from '../api/client';
+
+export interface DemoScenario {
+ id: string;
+ title: string;
+ description: string;
+ method: string;
+ url: string;
+ headers: Record
+
+
+ {/* Request card */}
+ {demo.title}
+{demo.description}
+
+
+
+ {/* Send button */}
+
+ HTTP Request
+
+
+
+ {demo.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+ {/* Method + URL line */}
+
+
+
+
+ {/* Headers */}
+ {Object.keys(demo.headers).length > 0 && (
+
+ localhost:8085
+ {path}
+ {queryString && (
+ ?{queryString}
+ )}
+
+
+
+ )}
+
+ {/* Body */}
+ {demo.body && (
+ Headers
+ {Object.entries(demo.headers).map(([key, value]) => (
+
+ {key}
+ :
+ {value}
+
+ ))}
+
+
+ )}
+ Body
+
+ {demo.body}
+
+
+
+
+