feat: enterprise-grade middleware stack and frontend resilience

[Copilot]

Summary

Elevates TiM from MVP to enterprise-grade with comprehensive backend hardening and frontend resilience improvements. What SAP wishes they could be — but actually done right.

Backend Changes

Security Hardening

• helmet — Security headers: X-Content-Type-Options, X-Frame-Options, X-XSS-Protection, HSTS, Referrer-Policy, X-DNS-Prefetch-Control, X-Download-Options, X-Permitted-Cross-Domain-Policies
• CORS middleware — Configurable REST API CORS with CORS_ORIGIN env var and exposed X-Request-ID header
• Request body size limits — Configurable via REQUEST_BODY_LIMIT env var (default 1MB) to prevent payload abuse

Observability

• X-Request-ID — UUID v4 generation/propagation on every request for end-to-end correlation
• pino-http — Structured request logging with method, URL, status, response time, request ID. Auto-mutes health check noise
• Structured error logging — All errors logged with requestId, context, and proper severity levels
• Console.log elimination — All console.log/console.error replaced with structured pino logger

Resilience

• Graceful shutdown — SIGTERM/SIGINT handlers: Socket.IO client disconnect → HTTP connection drain → Prisma pool cleanup, with 15s safety timeout
• Response compression — gzip/deflate via compression middleware
• AppError class — Typed error hierarchy with HTTP status, machine-readable codes, factory methods (AppError.notFound(), AppError.conflict(), etc.)
• Improved error handler — Includes requestId in all error responses for client-side debugging

Configuration

• .env.example updated with all new environment variables: CORS_ORIGIN, REQUEST_BODY_LIMIT, RATE_LIMIT_*, DISABLE_HTTPS_REDIRECT

Frontend Changes

Crash Resilience

• ErrorBoundary — Wraps entire app; catches render errors and shows recovery UI with "Try Again" and "Reload Page" buttons

Performance

• React.lazy + Suspense — Route-level code splitting for all 8 page components
• Function-based manualChunks — Fixes @ui5/webcomponents build resolution error; properly splits vendor/ui5/charts bundles
• PWA cache limit — maximumFileSizeToCacheInBytes raised to 15MB to accommodate UI5 bundle

Developer Experience

• Centralized API client (apiClient) — Automatic Bearer token injection, 30s timeout, structured ApiError class, typed GET/POST/PUT/PATCH/DELETE methods
• Environment config (config/env.ts) — Centralized Vite env access with proper TypeScript interface
• Path alias (@/) — Configured in vite.config.ts

Validation

• ✅ Backend: npm run build succeeds
• ✅ Backend: 17 test suites, 178 tests pass
• ✅ Frontend: npm run build succeeds (main app + PWA service worker)
• ✅ Code review feedback addressed
• ✅ CodeQL: CSP disabled intentionally for SPA (documented in code)

[Copilot]

Pull request overview

This PR upgrades TiM’s backend middleware stack (security, observability, resilience) and improves frontend resilience/performance via route-level code splitting, an app-wide error boundary, and new configuration/service utilities.

Changes:

• Backend: adds request ID propagation, structured request logging (pino-http), CORS + compression + helmet integration, graceful shutdown, and a structured AppError type with enhanced global error handling.
• Frontend: adds React.lazy/Suspense route splitting, an ErrorBoundary, Vite alias + updated chunking rules, and introduces apiClient + env config helpers.
• Tooling/config: updates backend dependencies and .env.example; adjusts auth test expectations for the new error response shape.

Reviewed changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
frontend/vite.config.ts	Adds @ alias, increases PWA cache limit, switches manualChunks to function-based splitting.
frontend/src/services/apiClient.ts	Introduces centralized fetch wrapper with timeout + typed ApiError.
frontend/src/main.tsx	Converts routes to lazy-loaded components; wraps router in ErrorBoundary + Suspense.
frontend/src/config/env.ts	Adds centralized Vite env access helper.
frontend/src/components/ErrorBoundary.tsx	Adds global React error boundary with recovery UI.
backend/tests/auth.test.ts	Updates assertions for new error response shape (message + optional requestId).
backend/src/services/movementService.ts	Replaces console.error with structured logger.
backend/src/services/labReportService.ts	Replaces console.error with structured logger.
backend/src/middleware/requestLogger.ts	Adds pino-http middleware with requestId integration and health-check noise suppression.
backend/src/middleware/requestId.ts	Adds request ID propagation/generation and response header echo.
backend/src/middleware/cors.ts	Adds REST API CORS policy with env-based allowlist and requestId exposure.
backend/src/lifecycle/shutdown.ts	Adds SIGTERM/SIGINT graceful shutdown orchestration (Socket.IO, HTTP, Prisma).
backend/src/errors/AppError.ts	Adds typed application error with status/code factories for consistent error envelopes.
backend/src/app.ts	Wires enterprise middleware stack, structured error handler, and graceful shutdown registration.
backend/package.json	Adds dependencies for helmet/cors/compression and pino-http + type packages.
backend/package-lock.json	Locks new backend dependencies.
backend/.env.example	Documents new env vars (CORS, rate limits, HTTPS redirect toggle, body limits).

Files not reviewed (1)

• backend/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The test now only asserts on requestId if it exists, which can mask regressions (the new middleware stack is supposed to always attach a request ID). Consider asserting that res.body.requestId is always present and a string (and optionally matches a UUID format) to lock in the new contract.

Suggested change

	// Enterprise error handler also includes a requestId for traceability
	if (res.body.requestId) {
	expect(typeof res.body.requestId).toBe('string');
	}
	// Enterprise error handler always includes a requestId for traceability
	expect(res.body.requestId).toBeDefined();
	expect(typeof res.body.requestId).toBe('string');

[Copilot]

manualChunks vendor condition checks node_modules/react-router/, but the dependency in this repo is react-router-dom (see package-lock). This likely leaves react-router-dom out of the vendor chunk, reducing the effectiveness/predictability of the chunk split. Consider matching node_modules/react-router-dom/ (and optionally node_modules/react-router/) in the vendor branch.

Suggested change

	if (id.includes('node_modules/react-dom/') || id.includes('node_modules/react/') || id.includes('node_modules/react-router/')) {
	if (
	id.includes('node_modules/react-dom/') ||
	id.includes('node_modules/react/') ||
	id.includes('node_modules/react-router-dom/') ||
	id.includes('node_modules/react-router/')
	) {

[Copilot]

The file header comment says the base URL is resolved from environment, but API_BASE is currently hard-coded to '/api/v1'. Since src/config/env.ts introduces VITE_API_BASE, consider sourcing the base URL from there (or updating the comment) so deploys can target different API hosts/prefixes without code changes.

[Copilot]

init.headers can be a Headers instance or [string, string][], but this code spreads it as a Record<string,string>. At runtime spreading a Headers object results in no enumerable keys, so caller-provided headers may be silently dropped. Consider normalizing with new Headers(init.headers) and then setting defaults onto that, or accepting only object headers in the API type.

Suggested change

	try {
	const res = await fetch(url, {
	...init,
	signal: controller.signal,
	headers: {
	'Content-Type': 'application/json',
	...(skipAuth ? {} : getAuthHeaders()),
	...(init.headers as Record<string, string> | undefined),
	},
	const headers = new Headers(init.headers);
	if (!headers.has('Content-Type')) {
	headers.set('Content-Type', 'application/json');
	}
	if (!skipAuth) {
	for (const [key, value] of Object.entries(getAuthHeaders())) {
	if (!headers.has(key)) {
	headers.set(key, value);
	}
	}
	}
	try {
	const res = await fetch(url, {
	...init,
	signal: controller.signal,
	headers,

[Copilot]

RouteLoadingFallback renders a purely visual loading indicator without any accessibility semantics. Consider adding role="status"/aria-live="polite" (and/or aria-busy) to the container so screen readers announce route transitions, and mark decorative glyphs as aria-hidden if you keep them.

Suggested change

	<div style={{
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	minHeight: '60vh',
	fontFamily: "'72', Arial, sans-serif",
	color: '#6a6d70',
	}}>
	<div style={{ textAlign: 'center' }}>
	<div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>⏳</div>
	<div
	role="status"
	aria-live="polite"
	aria-busy="true"
	style={{
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	minHeight: '60vh',
	fontFamily: "'72', Arial, sans-serif",
	color: '#6a6d70',
	}}
	>
	<div style={{ textAlign: 'center' }}>
	<div aria-hidden="true" style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>⏳</div>

[Copilot]

The fallback UI renders this.state.error.message directly to end users. In production this can leak internal details (including potentially sensitive data) from thrown errors. Consider only showing the raw message in development (or behind a debug flag) and keep the production message generic while logging the full error for diagnostics.

[Copilot]

When an origin is not allowed, the middleware calls callback(new Error(...)). That error has no HTTP status, so the global error handler will treat it as a 500 and return "Internal server error" rather than a clear 403/401-style response. Consider throwing an AppError.forbidden(...) (or setting err.status = 403) so disallowed origins are handled as a client error instead of a server fault.

Suggested change

	callback(new Error(`Origin ${origin} not allowed by CORS`));
	const err = new Error(`Origin ${origin} not allowed by CORS`) as Error & {
	status?: number;
	statusCode?: number;
	};
	err.status = 403;
	err.statusCode = 403;
	return callback(err);