[tradein][frontend] Мера estimate — React hydration error #418 (SSR≠client mismatch) #1803

New issue

Closed

opened 2026-06-19 17:33:53 +00:00 by lekss361 · 0 comments

lekss361 commented

2026-06-19 17:33:53 +00:00

Owner

Проблема

На /trade-in/ui-preview/estimate («Мера») консоль выдаёт React error #418 (Hydration failed — initial UI не совпадает с серверным рендером, text content mismatch). Визуальный артефакт/мерцание при загрузке.

Error: Minified React error #418; visit https://react.dev/errors/418?args[]=text&args[]=
  at rD (.../4bd1b696-...js)

Корень (гипотеза)

#418 с args[]=text = текстовое расхождение SSR↔client. Типичные причины в Next 15:

toLocaleString/Intl.NumberFormat для ₽/чисел — разные локали/разделители на сервере и клиенте.
Дата/время (new Date().toLocaleDateString) без фиксированной timezone/locale.
Math.random() / Date.now() в render.

Что сделать

Воспроизвести локально (next dev или prod build) → найти компонент с mismatch (React в dev покажет конкретный текст).
Зафиксировать форматирование чисел/дат: единый locale ru-RU + TZ на сервере и клиенте, или вынести в useEffect/suppressHydrationWarning где уместно.
Проверить, что после фикса консоль чистая на /trade-in/ui-preview/estimate.

Усилие

S–M (поиск компонента + фикс форматирования).

Файлы: tradein-mvp/frontend/src/app/ui-preview/estimate/** + связанные компоненты оценки. Probe 2026-06-19.

## Проблема На `/trade-in/ui-preview/estimate` («Мера») консоль выдаёт **React error #418** (Hydration failed — initial UI не совпадает с серверным рендером, text content mismatch). Визуальный артефакт/мерцание при загрузке. ``` Error: Minified React error #418; visit https://react.dev/errors/418?args[]=text&args[]= at rD (.../4bd1b696-...js) ``` ## Корень (гипотеза) `#418` с `args[]=text` = текстовое расхождение SSR↔client. Типичные причины в Next 15: - `toLocaleString`/`Intl.NumberFormat` для ₽/чисел — разные локали/разделители на сервере и клиенте. - Дата/время (`new Date().toLocaleDateString`) без фиксированной timezone/locale. - `Math.random()` / `Date.now()` в render. ## Что сделать 1. Воспроизвести локально (`next dev` или prod build) → найти компонент с mismatch (React в dev покажет конкретный текст). 2. Зафиксировать форматирование чисел/дат: единый locale `ru-RU` + TZ на сервере и клиенте, или вынести в `useEffect`/`suppressHydrationWarning` где уместно. 3. Проверить, что после фикса консоль чистая на `/trade-in/ui-preview/estimate`. ## Усилие S–M (поиск компонента + фикс форматирования). **Файлы:** `tradein-mvp/frontend/src/app/ui-preview/estimate/**` + связанные компоненты оценки. Probe 2026-06-19.