Compare commits
10 Commits
feat/ru-ui
...
fix/interm
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8eaf006906 | ||
| 9f63b190f1 | |||
|
|
83bc603b95 | ||
| f8b4ce7111 | |||
|
|
53b9561a54 | ||
| 7e9c20d4bf | |||
|
|
e0ed0b6435 | ||
| 8442c761c2 | |||
|
|
87d6505fbf | ||
| 99ae7410ce |
@@ -24,10 +24,15 @@ API_PORT=3001
|
||||
# CALENDAR_RUN_MOCK_DB=1
|
||||
|
||||
# ─── CORS ────────────────────────────────────────────────────
|
||||
# Должен совпадать с origin в браузере (схема + хост + порт, без пути), иначе API «молчит».
|
||||
# Локальный Vite: http://localhost:5173
|
||||
# Стек с фронтом на 3033: http://localhost:3033
|
||||
# Прод: https://ваш-домен — несколько origin через запятую: https://a.ru,https://www.a.ru
|
||||
CORS_ORIGIN=http://localhost:5173
|
||||
|
||||
# ─── Версия API (опционально) ─────────────────────────────────
|
||||
# Если в образе не удаётся прочитать package.json, подставьте вручную (видно в GET /health).
|
||||
# APP_VERSION=1.0.0
|
||||
|
||||
# ─── Frontend (Vite, локально из каталога frontend/) ─────────
|
||||
# В Docker-образе фронта базовый URL API задаётся при сборке (/api), не из .env.
|
||||
VITE_API_BASE_URL=http://localhost:3001
|
||||
# Браузер всегда ходит на относительный /api; в dev это проксирует Vite.
|
||||
|
||||
@@ -5,8 +5,6 @@ WORKDIR /app
|
||||
COPY frontend/package.json frontend/package-lock.json ./
|
||||
RUN npm ci
|
||||
COPY frontend/ ./
|
||||
ARG VITE_API_BASE_URL=/api
|
||||
ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
|
||||
15
README.md
15
README.md
@@ -4,20 +4,20 @@
|
||||
|
||||
## Переменные окружения
|
||||
|
||||
Один шаблон для локальной разработки и для Docker-стека: **[`.env.example`](.env.example)** → скопируйте в **`.env`** в корне репозитория.
|
||||
Один шаблон для локальной разработки и для Docker-стека: `**[.env.example](.env.example)`** → скопируйте в `**.env**` в корне репозитория.
|
||||
|
||||
Там же перечислены **`DB_HOST`**, **`DB_PORT`**, **`DB_NAME`**, **`DB_USER`**, **`DB_PASSWORD`** (подключение бэкенда к БД), **`PORT`** / **`API_PORT`**, опционально **`CALENDAR_RUN_MOCK_DB`**, **`CORS_ORIGIN`**, а для локального Vite — **`VITE_API_BASE_URL`**.
|
||||
Там же перечислены `**DB_HOST**`, `**DB_PORT**`, `**DB_NAME**`, `**DB_USER**`, `**DB_PASSWORD**` (подключение бэкенда к БД), `**PORT**` / `**API_PORT**`, опционально `**CALENDAR_RUN_MOCK_DB**` и `**CORS_ORIGIN**`.
|
||||
|
||||
## Backend — локально
|
||||
|
||||
1. `cd backend && npm install`
|
||||
2. Корень: `cp .env.example .env`, задайте `DB_*` (и при необходимости `CORS_ORIGIN`).
|
||||
3. Postgres: из корня `docker compose up -d` (см. [`docker-compose.yml`](docker-compose.yml)) — в compose используются те же `DB_NAME`, `DB_USER`, `DB_PASSWORD` из `.env`.
|
||||
3. Postgres: из корня `docker compose up -d` (см. `[docker-compose.yml](docker-compose.yml)`) — в compose используются те же `DB_NAME`, `DB_USER`, `DB_PASSWORD` из `.env`.
|
||||
4. `cd backend && npm run db:migrate && npm run seed`
|
||||
5. Dev-режим: `npm run dev`
|
||||
6. Или production: `npm run build && npm start`
|
||||
|
||||
Без PostgreSQL (только smoke API): в `.env` задайте `CALENDAR_RUN_MOCK_DB=1`; **`db:migrate` и `seed` с mock не использовать**.
|
||||
Без PostgreSQL (только smoke API): в `.env` задайте `CALENDAR_RUN_MOCK_DB=1`; `**db:migrate` и `seed` с mock не использовать**.
|
||||
|
||||
## Frontend — локально
|
||||
|
||||
@@ -28,11 +28,11 @@ npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Значение `VITE_API_BASE_URL` см. в **корневом** [`.env.example`](.env.example); для dev по умолчанию `http://localhost:3001`. У бэкенда `CORS_ORIGIN` должен совпадать с origin приложения (например `http://localhost:5173`).
|
||||
Фронт всегда отправляет запросы на относительный префикс `**/api**`. В dev это проксирует Vite на `http://localhost:3001`, в Docker/проде — nginx фронта проксирует на backend. У бэкенда `CORS_ORIGIN` должен совпадать с origin приложения (например `http://localhost:5173`).
|
||||
|
||||
## Docker: backend + frontend рядом с Postgres
|
||||
|
||||
Используйте [`docker-compose.stack.yml`](docker-compose.stack.yml): общая **внешняя** сеть с контейнером Postgres (как в вашей инфраструктуре). В корне должен быть **`.env`** (из `.env.example`): `DB_HOST` — имя сервиса/контейнера Postgres в этой сети, `DB_PORT=5432`, плюс остальные `DB_*` и **`CORS_ORIGIN=http://localhost:3033`**, если заходите на фронт с хоста на порту 3033.
|
||||
Используйте `[docker-compose.stack.yml](docker-compose.stack.yml)`: общая **внешняя** сеть с контейнером Postgres (как в вашей инфраструктуре). В корне должен быть `**.env`** (из `.env.example`): `DB_HOST` — имя сервиса/контейнера Postgres в этой сети, `DB_PORT=5432`, плюс остальные `DB_*` и `**CORS_ORIGIN=http://localhost:3033**`, если заходите на фронт с хоста на порту 3033.
|
||||
|
||||
```bash
|
||||
docker compose -f docker-compose.stack.yml up -d --build
|
||||
@@ -40,9 +40,10 @@ docker compose -f docker-compose.stack.yml exec backend node dist/migrate.js
|
||||
docker compose -f docker-compose.stack.yml exec backend node dist/seed.js
|
||||
```
|
||||
|
||||
Фронт в браузере обращается к API по префиксу **`/api`** (nginx в образе фронта проксирует на backend).
|
||||
Фронт в браузере обращается к API по префиксу `**/api**` (nginx в образе фронта проксирует на backend).
|
||||
|
||||
## Документация API и бэкенда
|
||||
|
||||
- [Шпаргалка API для фронта](docs/backend-api-for-frontend.md)
|
||||
- [Эксплуатация backend](docs/backend.md)
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "calendar-run-backend",
|
||||
"version": "1.0.0",
|
||||
"version": "1.2.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
|
||||
@@ -7,11 +7,13 @@ import racesRouter from "./routes/races";
|
||||
export function createApp(): express.Express {
|
||||
const app = express();
|
||||
|
||||
app.use(cors({ origin: config.corsOrigin, methods: ["GET", "POST", "PATCH", "DELETE"] }));
|
||||
app.use(
|
||||
cors({ origin: config.corsOrigin, methods: ["GET", "POST", "PATCH", "DELETE", "OPTIONS"] }),
|
||||
);
|
||||
app.use(express.json());
|
||||
|
||||
app.use(healthRouter);
|
||||
app.use(racesRouter);
|
||||
app.use("/api", healthRouter);
|
||||
app.use("/api", racesRouter);
|
||||
|
||||
app.use((err: unknown, _req: Request, res: Response, _next: NextFunction) => {
|
||||
if (err instanceof SyntaxError && "body" in err) {
|
||||
|
||||
@@ -33,5 +33,21 @@ export const config = {
|
||||
password: requireEnv("DB_PASSWORD"),
|
||||
},
|
||||
apiPort: parseInt(process.env.PORT || process.env.API_PORT || "3001", 10),
|
||||
corsOrigin: process.env.CORS_ORIGIN || "http://localhost:5173",
|
||||
/** Одно значение или несколько через запятую (прод: https://домен) */
|
||||
corsOrigin: parseCorsOrigins(),
|
||||
};
|
||||
|
||||
function parseCorsOrigins(): string | string[] {
|
||||
const raw = process.env.CORS_ORIGIN?.trim();
|
||||
if (!raw) {
|
||||
return "http://localhost:5173";
|
||||
}
|
||||
const parts = raw.split(",").map((s) => s.trim()).filter(Boolean);
|
||||
if (parts.length === 0) {
|
||||
return "http://localhost:5173";
|
||||
}
|
||||
if (parts.length === 1) {
|
||||
return parts[0]!;
|
||||
}
|
||||
return parts;
|
||||
}
|
||||
|
||||
@@ -8,6 +8,11 @@ router.get("/health", (_req: Request, res: Response) => {
|
||||
res.json({ status: "ok", version: getBackendVersion() });
|
||||
});
|
||||
|
||||
/** Версия для UI; путь без «health», чтобы реже резался фильтрами/прокси. */
|
||||
router.get("/meta", (_req: Request, res: Response) => {
|
||||
res.json({ version: getBackendVersion() });
|
||||
});
|
||||
|
||||
router.get("/ready", async (_req: Request, res: Response) => {
|
||||
const dbOk = await checkDbConnection();
|
||||
if (dbOk) {
|
||||
|
||||
@@ -7,8 +7,18 @@ export function getBackendVersion(): string {
|
||||
if (cached) {
|
||||
return cached;
|
||||
}
|
||||
const fromEnv = process.env.APP_VERSION?.trim();
|
||||
if (fromEnv) {
|
||||
cached = fromEnv;
|
||||
return cached;
|
||||
}
|
||||
try {
|
||||
const pkgPath = path.join(__dirname, "..", "package.json");
|
||||
const raw = fs.readFileSync(pkgPath, "utf-8");
|
||||
cached = (JSON.parse(raw) as { version: string }).version;
|
||||
return cached;
|
||||
} catch {
|
||||
cached = "0.0.0";
|
||||
return cached;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,37 +5,43 @@ import { createApp } from "../src/app";
|
||||
|
||||
const app = createApp();
|
||||
|
||||
test("GET /health returns ok", async () => {
|
||||
const res = await request(app).get("/health").expect(200);
|
||||
test("GET /api/health returns ok", async () => {
|
||||
const res = await request(app).get("/api/health").expect(200);
|
||||
assert.equal(res.body.status, "ok");
|
||||
assert.equal(typeof res.body.version, "string");
|
||||
assert.ok(res.body.version.length > 0);
|
||||
});
|
||||
|
||||
test("GET /ready succeeds with mock database", async () => {
|
||||
const res = await request(app).get("/ready").expect(200);
|
||||
test("GET /api/meta returns version for UI footer", async () => {
|
||||
const res = await request(app).get("/api/meta").expect(200);
|
||||
assert.equal(typeof res.body.version, "string");
|
||||
assert.ok(res.body.version.length > 0);
|
||||
});
|
||||
|
||||
test("GET /api/ready succeeds with mock database", async () => {
|
||||
const res = await request(app).get("/api/ready").expect(200);
|
||||
assert.equal(res.body.status, "ready");
|
||||
assert.equal(res.body.db, "connected");
|
||||
});
|
||||
|
||||
test("GET /races rejects invalid year", async () => {
|
||||
const res = await request(app).get("/races?year=bad").expect(400);
|
||||
test("GET /api/races rejects invalid year", async () => {
|
||||
const res = await request(app).get("/api/races?year=bad").expect(400);
|
||||
assert.equal(res.body.error, "validation_error");
|
||||
assert.ok(Array.isArray(res.body.details));
|
||||
});
|
||||
|
||||
test("GET /races rejects month out of range", async () => {
|
||||
const res = await request(app).get("/races?month=13").expect(400);
|
||||
test("GET /api/races rejects month out of range", async () => {
|
||||
const res = await request(app).get("/api/races?month=13").expect(400);
|
||||
assert.equal(res.body.error, "validation_error");
|
||||
});
|
||||
|
||||
test("GET /races accepts year and month", async () => {
|
||||
const res = await request(app).get("/races?year=2026&month=5").expect(200);
|
||||
test("GET /api/races accepts year and month", async () => {
|
||||
const res = await request(app).get("/api/races?year=2026&month=5").expect(200);
|
||||
assert.ok(Array.isArray(res.body));
|
||||
});
|
||||
|
||||
test("GET /races/:id returns not_found", async () => {
|
||||
const res = await request(app).get("/races/does-not-exist").expect(404);
|
||||
test("GET /api/races/:id returns not_found", async () => {
|
||||
const res = await request(app).get("/api/races/does-not-exist").expect(404);
|
||||
assert.equal(res.body.error, "not_found");
|
||||
assert.ok(Array.isArray(res.body.details));
|
||||
});
|
||||
|
||||
@@ -38,8 +38,6 @@ services:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile.frontend
|
||||
args:
|
||||
VITE_API_BASE_URL: /api
|
||||
container_name: runners-calendar-frontend
|
||||
depends_on:
|
||||
- backend
|
||||
|
||||
@@ -8,9 +8,8 @@ server {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# Браузер ходит на тот же origin: /api/* → бэкенд без префикса /api
|
||||
# Браузер ходит на тот же origin: /api/* → бэкенд с тем же префиксом /api
|
||||
location /api/ {
|
||||
rewrite ^/api/(.*) /$1 break;
|
||||
proxy_pass http://backend:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
|
||||
@@ -2,13 +2,10 @@
|
||||
|
||||
## 1. Base URL
|
||||
|
||||
```
|
||||
VITE_API_BASE_URL=http://localhost:3001
|
||||
```
|
||||
SPA всегда отправляет запросы на относительный префикс `/api` текущего origin.
|
||||
|
||||
В коде SPA: `import.meta.env.VITE_API_BASE_URL`.
|
||||
|
||||
В Docker-стеке из репозитория образ фронта собирается с **`VITE_API_BASE_URL=/api`**: запросы идут на тот же origin, nginx проксирует `/api` на backend (см. `docker/nginx.frontend.conf`).
|
||||
- В dev (`npm run dev`): Vite proxy отправляет `/api/*` на `http://localhost:3001/api/*`.
|
||||
- В Docker/проде: nginx фронта проксирует `/api/*` на backend в той же сети.
|
||||
|
||||
## 2. CORS
|
||||
|
||||
@@ -22,7 +19,7 @@ CORS_ORIGIN=http://localhost:5173
|
||||
|
||||
## 3. Эндпоинты
|
||||
|
||||
### `GET /health`
|
||||
### `GET /api/health`
|
||||
|
||||
Liveness-проверка (без обращения к БД).
|
||||
|
||||
@@ -34,7 +31,7 @@ Liveness-проверка (без обращения к БД).
|
||||
|
||||
---
|
||||
|
||||
### `GET /ready`
|
||||
### `GET /api/ready`
|
||||
|
||||
Readiness-проверка (проверяет подключение к БД).
|
||||
|
||||
@@ -52,7 +49,7 @@ Readiness-проверка (проверяет подключение к БД).
|
||||
|
||||
---
|
||||
|
||||
### `GET /races`
|
||||
### `GET /api/races`
|
||||
|
||||
Список забегов, отсортированных по дате.
|
||||
|
||||
@@ -70,7 +67,7 @@ Readiness-проверка (проверяет подключение к БД).
|
||||
**Пример запроса:**
|
||||
|
||||
```
|
||||
GET /races?year=2026&month=5
|
||||
GET /api/races?year=2026&month=5
|
||||
```
|
||||
|
||||
**Ответ 200:**
|
||||
@@ -99,7 +96,7 @@ GET /races?year=2026&month=5
|
||||
|
||||
---
|
||||
|
||||
### `GET /races/:id`
|
||||
### `GET /api/races/:id`
|
||||
|
||||
Одна запись по `id`.
|
||||
|
||||
@@ -113,7 +110,7 @@ GET /races?year=2026&month=5
|
||||
|
||||
---
|
||||
|
||||
### `POST /races`
|
||||
### `POST /api/races`
|
||||
|
||||
Создание забега.
|
||||
|
||||
@@ -155,7 +152,7 @@ GET /races?year=2026&month=5
|
||||
|
||||
---
|
||||
|
||||
### `PATCH /races/:id`
|
||||
### `PATCH /api/races/:id`
|
||||
|
||||
Частичное обновление — передавать **только** изменяемые поля.
|
||||
|
||||
@@ -188,7 +185,7 @@ GET /races?year=2026&month=5
|
||||
|
||||
---
|
||||
|
||||
### `DELETE /races/:id`
|
||||
### `DELETE /api/races/:id`
|
||||
|
||||
Удаление забега.
|
||||
|
||||
@@ -220,7 +217,7 @@ GET /races?year=2026&month=5
|
||||
| `createdAt` | string | — | — | ISO timestamp (read-only) |
|
||||
| `updatedAt` | string \| null | — | — | ISO timestamp (read-only) |
|
||||
|
||||
## 5. Фильтрация списка (`GET /races`)
|
||||
## 5. Фильтрация списка (`GET /api/races`)
|
||||
|
||||
- **`year`** — целое число, фильтрует по `EXTRACT(YEAR FROM race_date)`.
|
||||
- **`month`** — целое число 1–12, фильтрует по `EXTRACT(MONTH FROM race_date)`.
|
||||
@@ -234,7 +231,7 @@ Seed-скрипт (`npm run seed` в `backend/`) выполняет **upsert**
|
||||
|
||||
## 7. Поведение при недоступной БД
|
||||
|
||||
- `GET /health` — всегда `200` (не проверяет БД).
|
||||
- `GET /ready` — при недоступной БД: `503 { "error": "database_unavailable", "db": "disconnected" }`. В режиме **`CALENDAR_RUN_MOCK_DB`** (dev/CI без Postgres) readiness возвращает успех без реального подключения — см. `docs/backend.md`.
|
||||
- `GET /api/health` — всегда `200` (не проверяет БД).
|
||||
- `GET /api/ready` — при недоступной БД: `503 { "error": "database_unavailable", "db": "disconnected" }`. В режиме **`CALENDAR_RUN_MOCK_DB`** (dev/CI без Postgres) readiness возвращает успех без реального подключения — см. `docs/backend.md`.
|
||||
- Все остальные маршруты — `503 { "error": "database_unavailable" }`.
|
||||
- В логах сервера: строка ошибки с контекстом маршрута.
|
||||
|
||||
@@ -78,7 +78,7 @@ API слушает порт: **`PORT`** (если задан), иначе **`API
|
||||
| `API_PORT` | Порт API-сервера | `3001` |
|
||||
| `CORS_ORIGIN` | Разрешённый origin для CORS | `http://localhost:5173` |
|
||||
|
||||
Для локального Vite в корневом `.env.example` также указан **`VITE_API_BASE_URL`** (читает только фронт из `frontend/`). В Docker-стеке базовый URL API задаётся при **сборке** образа фронта (`/api`), не через этот файл.
|
||||
Фронтенд всегда обращается к API по префиксу `/api` на текущем origin. В локальной разработке этот префикс проксирует Vite (`frontend/vite.config.ts`) на `http://localhost:3001`; в Docker-стеке — nginx фронта проксирует на backend.
|
||||
|
||||
**Без mock:** при отсутствии любой из `DB_*` процесс падает при старте: `Missing required environment variable: <NAME>`.
|
||||
|
||||
@@ -87,8 +87,8 @@ API слушает порт: **`PORT`** (если задан), иначе **`API
|
||||
## Поведение при недоступной БД
|
||||
|
||||
- **Старт сервера** — проходит успешно (env валидирован, Express слушает порт).
|
||||
- **`GET /health`** — всегда `200 { "status": "ok" }` (liveness, без обращения к БД).
|
||||
- **`GET /ready`** — при обычном режиме пробует подключиться к БД; `200` если ОК, `503 { "error": "database_unavailable", ... }` если нет. В режиме **`CALENDAR_RUN_MOCK_DB`** readiness считается успешным без реального подключения (удобно для CI/smoke API).
|
||||
- **`GET /api/health`** — всегда `200 { "status": "ok" }` (liveness, без обращения к БД).
|
||||
- **`GET /api/ready`** — при обычном режиме пробует подключиться к БД; `200` если ОК, `503 { "error": "database_unavailable", ... }` если нет. В режиме **`CALENDAR_RUN_MOCK_DB`** readiness считается успешным без реального подключения (удобно для CI/smoke API).
|
||||
- **Все остальные маршруты** при ошибке БД возвращают `503 { "error": "database_unavailable" }`.
|
||||
|
||||
## Структура каталога
|
||||
@@ -108,8 +108,8 @@ backend/
|
||||
│ ├── mappers/
|
||||
│ │ └── race.ts # snake_case ↔ camelCase
|
||||
│ └── routes/
|
||||
│ ├── health.ts # /health, /ready
|
||||
│ └── races.ts # CRUD /races
|
||||
│ ├── health.ts # /api/health, /api/ready, /api/meta
|
||||
│ └── races.ts # CRUD /api/races
|
||||
├── package.json
|
||||
└── tsconfig.json
|
||||
```
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
# Для локального npm run dev. Полный список переменных — в корневом .env.example репозитория.
|
||||
VITE_API_BASE_URL=http://localhost:3001
|
||||
# Для локального npm run dev дополнительных VITE-переменных не требуется.
|
||||
# Полный список переменных окружения — в корневом .env.example репозитория.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "calendar-run-frontend",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"version": "0.3.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -35,7 +35,8 @@ function normalizeApiCode(value: string | undefined): ApiErrorCode {
|
||||
value === "validation_error" ||
|
||||
value === "not_found" ||
|
||||
value === "database_unavailable" ||
|
||||
value === "conflict"
|
||||
value === "conflict" ||
|
||||
value === "unknown_error"
|
||||
) {
|
||||
return value;
|
||||
}
|
||||
@@ -46,7 +47,7 @@ function isGatewayStatus(status: number): boolean {
|
||||
return status === 502 || status === 503 || status === 504;
|
||||
}
|
||||
|
||||
function hasStructuredApiError(payload: unknown): payload is ApiErrorPayload {
|
||||
export function isStructuredApiErrorPayload(payload: unknown): payload is ApiErrorPayload {
|
||||
if (payload === null || typeof payload !== "object" || Array.isArray(payload)) {
|
||||
return false;
|
||||
}
|
||||
@@ -54,7 +55,7 @@ function hasStructuredApiError(payload: unknown): payload is ApiErrorPayload {
|
||||
}
|
||||
|
||||
export function toApiError(status: number, payload: unknown): ApiError {
|
||||
if (isGatewayStatus(status) && !hasStructuredApiError(payload)) {
|
||||
if (isGatewayStatus(status) && !isStructuredApiErrorPayload(payload)) {
|
||||
return new ApiError({
|
||||
code: "network_error",
|
||||
status,
|
||||
@@ -62,6 +63,17 @@ export function toApiError(status: number, payload: unknown): ApiError {
|
||||
});
|
||||
}
|
||||
|
||||
if (!isStructuredApiErrorPayload(payload) && (status === 401 || status === 403 || status === 404)) {
|
||||
return new ApiError({
|
||||
code: "network_error",
|
||||
status,
|
||||
message:
|
||||
status === 404
|
||||
? "API не найден по этому адресу. Проверьте прокси и префикс /api."
|
||||
: "Запрос отклонён сервером. Проверьте переменную CORS_ORIGIN на бэкенде.",
|
||||
});
|
||||
}
|
||||
|
||||
const maybePayload = payload as ApiErrorPayload;
|
||||
const code = normalizeApiCode(maybePayload?.error);
|
||||
const details = Array.isArray(maybePayload?.details)
|
||||
@@ -88,6 +100,8 @@ export function getApiErrorMessage(code: ApiErrorCode): string {
|
||||
return "Запись с таким идентификатором уже существует.";
|
||||
case "network_error":
|
||||
return "Не удалось связаться с сервером.";
|
||||
case "unknown_error":
|
||||
return "Сервер не смог обработать запрос. Попробуйте позже или обновите страницу.";
|
||||
default:
|
||||
return "Произошла неизвестная ошибка.";
|
||||
}
|
||||
|
||||
@@ -5,6 +5,15 @@ export type HealthResponse = {
|
||||
version: string;
|
||||
};
|
||||
|
||||
export type BackendMetaResponse = {
|
||||
version: string;
|
||||
};
|
||||
|
||||
export async function getHealth(init?: RequestInit): Promise<HealthResponse> {
|
||||
return requestJson<HealthResponse>("/health", init);
|
||||
}
|
||||
|
||||
/** Версия бэкенда для футера (отдельный путь от /health — меньше ложных блокировок). */
|
||||
export async function getBackendMeta(init?: RequestInit): Promise<BackendMetaResponse> {
|
||||
return requestJson<BackendMetaResponse>("/meta", init);
|
||||
}
|
||||
|
||||
@@ -1,27 +1,49 @@
|
||||
import { ApiError, toApiError } from "./errors";
|
||||
import { ApiError, isStructuredApiErrorPayload, toApiError } from "./errors";
|
||||
|
||||
const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL as string | undefined)?.trim() || "http://localhost:3001";
|
||||
const API_ROOT = "/api";
|
||||
|
||||
function buildUrl(path: string): string {
|
||||
const normalizedPath = path.startsWith("/") ? path : `/${path}`;
|
||||
return `${API_BASE_URL}${normalizedPath}`;
|
||||
return `${API_ROOT}${normalizedPath}`;
|
||||
}
|
||||
|
||||
async function parseResponseBody(response: Response): Promise<unknown> {
|
||||
const contentType = response.headers.get("content-type") ?? "";
|
||||
if (!contentType.includes("application/json")) {
|
||||
const text = await response.text();
|
||||
if (!text.trim()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const contentType = response.headers.get("content-type") ?? "";
|
||||
if (contentType.includes("application/json")) {
|
||||
try {
|
||||
return await response.json();
|
||||
return JSON.parse(text) as unknown;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const trimmed = text.trim();
|
||||
if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
|
||||
try {
|
||||
return JSON.parse(text) as unknown;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
const GATEWAY_RETRY_STATUSES = new Set([502, 503, 504]);
|
||||
|
||||
/** Повтор при «пустом» 404: часто бывает при нескольких инстансах/прокси до полного деплоя. */
|
||||
function shouldRetryIdempotentError(status: number, payload: unknown): boolean {
|
||||
if (GATEWAY_RETRY_STATUSES.has(status)) {
|
||||
return true;
|
||||
}
|
||||
return status === 404 && !isStructuredApiErrorPayload(payload);
|
||||
}
|
||||
|
||||
function delay(ms: number): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(resolve, ms);
|
||||
@@ -35,10 +57,15 @@ export async function requestJson<T>(path: string, init?: RequestInit): Promise<
|
||||
|
||||
for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
|
||||
try {
|
||||
const defaultHeaders: Record<string, string> = {};
|
||||
if (method !== "GET" && method !== "HEAD") {
|
||||
defaultHeaders["Content-Type"] = "application/json";
|
||||
}
|
||||
|
||||
const response = await fetch(buildUrl(path), {
|
||||
...init,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...defaultHeaders,
|
||||
...(init?.headers ?? {}),
|
||||
},
|
||||
});
|
||||
@@ -50,7 +77,7 @@ export async function requestJson<T>(path: string, init?: RequestInit): Promise<
|
||||
const payload = await parseResponseBody(response);
|
||||
|
||||
if (!response.ok) {
|
||||
const retryable = idempotent && GATEWAY_RETRY_STATUSES.has(response.status) && attempt < maxAttempts;
|
||||
const retryable = idempotent && attempt < maxAttempts && shouldRetryIdempotentError(response.status, payload);
|
||||
if (retryable) {
|
||||
await delay(80 * attempt);
|
||||
continue;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export type { CreateRacePayload, Race, RacesQuery, RaceStatus, UpdateRacePayload } from "./types";
|
||||
export { ApiError, getApiErrorMessage } from "./errors";
|
||||
export type { HealthResponse } from "./health";
|
||||
export { getHealth } from "./health";
|
||||
export type { BackendMetaResponse, HealthResponse } from "./health";
|
||||
export { getBackendMeta, getHealth } from "./health";
|
||||
export { getRaceById, getRaces, createRace, updateRace, deleteRace } from "./races";
|
||||
|
||||
@@ -1,23 +1,44 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { getHealth } from "../../api";
|
||||
import { getBackendMeta } from "../../api";
|
||||
import { FRONTEND_VERSION } from "../../frontendVersion";
|
||||
import { readCachedBackendVersion, writeCachedBackendVersion } from "../../lib/backendVersionCache";
|
||||
|
||||
function isAbortError(error: unknown): boolean {
|
||||
return (
|
||||
(error instanceof DOMException && error.name === "AbortError") ||
|
||||
(error instanceof Error && error.name === "AbortError")
|
||||
);
|
||||
}
|
||||
|
||||
export function AppShellFooter(): JSX.Element {
|
||||
const [backendVersion, setBackendVersion] = useState<string | null>(null);
|
||||
const [backendVersion, setBackendVersion] = useState<string | null>(() => readCachedBackendVersion());
|
||||
|
||||
useEffect(() => {
|
||||
const ac = new AbortController();
|
||||
void getHealth({ signal: ac.signal })
|
||||
.then((h) => {
|
||||
void getBackendMeta({ signal: ac.signal })
|
||||
.then((meta) => {
|
||||
if (ac.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
setBackendVersion(h.version);
|
||||
const v = meta.version;
|
||||
const label = typeof v === "string" && v.length > 0 ? v : "не указана";
|
||||
writeCachedBackendVersion(label);
|
||||
setBackendVersion(label);
|
||||
})
|
||||
.catch(() => {
|
||||
if (ac.signal.aborted) {
|
||||
.catch((err) => {
|
||||
if (ac.signal.aborted || isAbortError(err)) {
|
||||
return;
|
||||
}
|
||||
setBackendVersion("недоступна");
|
||||
setBackendVersion((prev) => {
|
||||
const cached = readCachedBackendVersion();
|
||||
if (cached) {
|
||||
return cached;
|
||||
}
|
||||
if (prev !== null) {
|
||||
return prev;
|
||||
}
|
||||
return "недоступна";
|
||||
});
|
||||
});
|
||||
return () => ac.abort();
|
||||
}, []);
|
||||
@@ -27,7 +48,7 @@ export function AppShellFooter(): JSX.Element {
|
||||
return (
|
||||
<footer className="app-shell__footer">
|
||||
<p className="app-shell__footer-versions">
|
||||
Версия клиента: {__FRONTEND_VERSION__}
|
||||
Версия клиента: {FRONTEND_VERSION}
|
||||
<span className="app-shell__footer-sep" aria-hidden="true">
|
||||
{" · "}
|
||||
</span>
|
||||
|
||||
3
frontend/src/frontendVersion.ts
Normal file
3
frontend/src/frontendVersion.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import packageJson from "../package.json";
|
||||
|
||||
export const FRONTEND_VERSION: string = packageJson.version;
|
||||
21
frontend/src/lib/backendVersionCache.ts
Normal file
21
frontend/src/lib/backendVersionCache.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
const STORAGE_KEY = "calendar_run.backendVersion.v1";
|
||||
|
||||
export function readCachedBackendVersion(): string | null {
|
||||
try {
|
||||
const raw = sessionStorage.getItem(STORAGE_KEY);
|
||||
return raw !== null && raw.trim().length > 0 ? raw.trim() : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function writeCachedBackendVersion(version: string): void {
|
||||
try {
|
||||
if (version === "недоступна" || version === "не указана") {
|
||||
return;
|
||||
}
|
||||
sessionStorage.setItem(STORAGE_KEY, version);
|
||||
} catch {
|
||||
// private mode / quota
|
||||
}
|
||||
}
|
||||
@@ -8,6 +8,7 @@ export {
|
||||
isCloseDistance,
|
||||
parseFinishTimeToSeconds,
|
||||
parseRaceDate,
|
||||
raceNeedsResultEntry,
|
||||
sortByDateAsc,
|
||||
sortByDateDesc,
|
||||
splitRacesByDate,
|
||||
|
||||
@@ -122,18 +122,36 @@ export function getPaceLabel(finishTime: string | null, distanceKm: number): str
|
||||
return `${String(paceMinutes).padStart(2, "0")}:${String(paceRemainder).padStart(2, "0")} /км`;
|
||||
}
|
||||
|
||||
export function getRaceStatusClassName(status: Race["status"]): string {
|
||||
const base = "race-card__status";
|
||||
if (status === "completed") {
|
||||
return `${base} ${base}--completed`;
|
||||
function isPastDateNeedingResult(status: Race["status"], raceDate: string): boolean {
|
||||
if (status !== "planned" && status !== "registered") {
|
||||
return false;
|
||||
}
|
||||
if (status === "registered") {
|
||||
return `${base} ${base}--registered`;
|
||||
}
|
||||
return `${base} ${base}--planned`;
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
return parseRaceDate(raceDate).getTime() < today.getTime();
|
||||
}
|
||||
|
||||
export function getRaceStatusLabel(status: Race["status"]): string {
|
||||
export function raceNeedsResultEntry(race: Race): boolean {
|
||||
return isPastDateNeedingResult(race.status, race.date);
|
||||
}
|
||||
|
||||
export function getRaceStatusClassName(status: Race["status"], raceDate?: string): string {
|
||||
const base = "race-card__status";
|
||||
let tier = `${base}--planned`;
|
||||
if (status === "completed") {
|
||||
tier = `${base}--completed`;
|
||||
} else if (status === "registered") {
|
||||
tier = `${base}--registered`;
|
||||
}
|
||||
const needs =
|
||||
raceDate && isPastDateNeedingResult(status, raceDate) ? ` ${base}--needs-result` : "";
|
||||
return `${base} ${tier}${needs}`;
|
||||
}
|
||||
|
||||
export function getRaceStatusLabel(status: Race["status"], raceDate?: string): string {
|
||||
if (raceDate && isPastDateNeedingResult(status, raceDate)) {
|
||||
return "внесите результат";
|
||||
}
|
||||
if (status === "completed") {
|
||||
return "пробежал";
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
getPaceLabel,
|
||||
getRaceStatusClassName,
|
||||
getRaceStatusLabel,
|
||||
raceNeedsResultEntry,
|
||||
} from "../lib";
|
||||
import type { Race } from "../api";
|
||||
|
||||
@@ -148,9 +149,19 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
{formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
|
||||
</p>
|
||||
</div>
|
||||
<span className={getRaceStatusClassName(race.status)}>{getRaceStatusLabel(race.status)}</span>
|
||||
<span className={getRaceStatusClassName(race.status, race.date)}>{getRaceStatusLabel(race.status, race.date)}</span>
|
||||
</div>
|
||||
|
||||
{raceNeedsResultEntry(race) ? (
|
||||
<p className="race-details-past-hint" role="status">
|
||||
Дата старта уже прошла —{" "}
|
||||
<Link className="race-details-past-hint__link" to={`/races/${race.id}/edit`}>
|
||||
внесите результат или обновите статус
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="race-details-actions">
|
||||
<Link className="btn btn--primary" to={`/races/${race.id}/edit`}>
|
||||
Редактировать
|
||||
@@ -202,7 +213,7 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
</div>
|
||||
<div className="race-details-meta__item">
|
||||
<dt className="race-details-meta__key">Статус</dt>
|
||||
<dd className="race-details-meta__value">{getRaceStatusLabel(race.status)}</dd>
|
||||
<dd className="race-details-meta__value">{getRaceStatusLabel(race.status, race.date)}</dd>
|
||||
</div>
|
||||
<DetailLink label="Сайт организатора" url={race.officialUrl} />
|
||||
<DetailItem label="Время старта" value={race.startTime} />
|
||||
|
||||
@@ -64,7 +64,7 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
|
||||
{formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
|
||||
</p>
|
||||
</div>
|
||||
<span className={getRaceStatusClassName(race.status)}>{getRaceStatusLabel(race.status)}</span>
|
||||
<span className={getRaceStatusClassName(race.status, race.date)}>{getRaceStatusLabel(race.status, race.date)}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -291,6 +291,31 @@ a {
|
||||
color: #8a5a00;
|
||||
}
|
||||
|
||||
.race-card__status--needs-result {
|
||||
outline: 1px solid var(--color-warning);
|
||||
}
|
||||
|
||||
.race-details-past-hint {
|
||||
margin: 0 0 var(--space-4);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-warning);
|
||||
background: #fffaf0;
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.race-details-past-hint__link {
|
||||
color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.race-details-past-hint__link:hover,
|
||||
.race-details-past-hint__link:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.races-filter {
|
||||
margin-top: var(--space-5);
|
||||
display: flex;
|
||||
|
||||
2
frontend/src/vite-env.d.ts
vendored
2
frontend/src/vite-env.d.ts
vendored
@@ -1,3 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare const __FRONTEND_VERSION__: string;
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
import { readFileSync } from "node:fs";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const pkg = JSON.parse(readFileSync(path.join(__dirname, "package.json"), "utf-8")) as { version: string };
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
define: {
|
||||
__FRONTEND_VERSION__: JSON.stringify(pkg.version),
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://localhost:3001",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user