refactor: production-essentials hardening pass
Backend: structured logger, env-validated config, graceful SIGTERM/SIGINT shutdown, per-IP rate limiter, per-tier scheduler concurrency latch, error context on previously-silent catches, compiled-JS Dockerfile stage. Frontend: lib/api.ts consolidates BACKEND_URL with lazy production-required check, root + per-segment error.tsx / not-found.tsx / loading.tsx, generateMetadata on park and ride pages, graceful fallback when backend is unreachable, Plausible script gated on env vars. Infra: CI runs lint + typecheck + tests on both packages before docker build, compose adds healthchecks, log rotation, and memory limits; .env.example documents every variable. Cleanup: removed empty app/api/parks/ dir and 0-byte root parks.db, moved wait-times-urls.txt into docs/, dropped an `as any` cast. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function RideError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||
useEffect(() => {
|
||||
console.error(error);
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: 24, background: "var(--color-bg)" }}>
|
||||
<div style={{ maxWidth: 480, textAlign: "center" }}>
|
||||
<h1 style={{ fontSize: "1.2rem", fontWeight: 700, color: "var(--color-text)", marginBottom: 12 }}>
|
||||
Could not load ride history
|
||||
</h1>
|
||||
<p style={{ color: "var(--color-text-muted)", lineHeight: 1.6, fontSize: "0.9rem", marginBottom: 20 }}>
|
||||
The backend is unreachable. Try again in a moment.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={reset}
|
||||
style={{
|
||||
padding: "8px 18px",
|
||||
background: "var(--color-text)",
|
||||
color: "var(--color-bg)",
|
||||
border: "none",
|
||||
borderRadius: 6,
|
||||
fontSize: "0.85rem",
|
||||
fontWeight: 600,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
export default function RideLoading() {
|
||||
return (
|
||||
<div style={{ minHeight: "100vh", background: "var(--color-bg)", padding: "32px 24px" }}>
|
||||
<div style={{ maxWidth: 960, margin: "0 auto" }}>
|
||||
<div className="skeleton" style={{ width: 160, height: 14, borderRadius: 4, marginBottom: 16 }} />
|
||||
<div className="skeleton" style={{ width: 320, height: 28, borderRadius: 6, marginBottom: 24 }} />
|
||||
<div className="skeleton" style={{ width: 100, height: 24, borderRadius: 999, marginBottom: 24 }} />
|
||||
<div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="skeleton" style={{ width: 80, height: 32, borderRadius: 6 }} />
|
||||
))}
|
||||
</div>
|
||||
<div className="skeleton" style={{ width: "100%", height: 280, borderRadius: 8 }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { PARK_MAP } from "@/lib/parks";
|
||||
import UptimePill from "@/components/charts/UptimePill";
|
||||
import WaitTimeTodayChart from "@/components/charts/WaitTimeTodayChart";
|
||||
import WeeklyStatsChart from "@/components/charts/WeeklyStatsChart";
|
||||
|
||||
const BACKEND_URL = process.env.BACKEND_URL ?? "http://localhost:3001";
|
||||
import { getBackendUrl } from "@/lib/api";
|
||||
|
||||
type Tab = "today" | "7d" | "30d";
|
||||
|
||||
@@ -62,6 +62,20 @@ function parseTab(raw: string | undefined): Tab {
|
||||
return "today";
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
||||
const { id, slug } = await params;
|
||||
const park = PARK_MAP.get(id);
|
||||
if (!park) return { title: "Ride not found | Thoosie Calendar" };
|
||||
const rideName = decodeURIComponent(slug).replace(/-/g, " ");
|
||||
const title = `${rideName} — ${park.shortName} | Thoosie Calendar`;
|
||||
const description = `Live wait time and uptime history for ${rideName} at ${park.name}.`;
|
||||
return {
|
||||
title,
|
||||
description,
|
||||
openGraph: { title, description },
|
||||
};
|
||||
}
|
||||
|
||||
export default async function RideDetailPage({ params, searchParams }: PageProps) {
|
||||
const { id, slug } = await params;
|
||||
const { tab: tabParam } = await searchParams;
|
||||
@@ -71,9 +85,14 @@ export default async function RideDetailPage({ params, searchParams }: PageProps
|
||||
|
||||
const tab = parseTab(tabParam);
|
||||
|
||||
const res = await fetch(`${BACKEND_URL}/api/parks/${id}/rides/${slug}`, {
|
||||
next: { revalidate: 60 },
|
||||
});
|
||||
let res: Response;
|
||||
try {
|
||||
res = await fetch(`${getBackendUrl()}/api/parks/${id}/rides/${slug}`, {
|
||||
next: { revalidate: 60 },
|
||||
});
|
||||
} catch {
|
||||
return <ErrorState parkId={id} parkName={park.name} />;
|
||||
}
|
||||
|
||||
if (res.status === 404) {
|
||||
return <NoHistoryYet parkId={id} parkName={park.name} slug={slug} />;
|
||||
@@ -83,7 +102,12 @@ export default async function RideDetailPage({ params, searchParams }: PageProps
|
||||
return <ErrorState parkId={id} parkName={park.name} />;
|
||||
}
|
||||
|
||||
const data: ApiResponse = await res.json();
|
||||
let data: ApiResponse;
|
||||
try {
|
||||
data = (await res.json()) as ApiResponse;
|
||||
} catch {
|
||||
return <ErrorState parkId={id} parkName={park.name} />;
|
||||
}
|
||||
const { ride, live, today, last7d, last30d, coverage } = data;
|
||||
|
||||
const last30dUptime = last30d.length
|
||||
|
||||
Reference in New Issue
Block a user