fix(ui): нормализовать detail из ответов API перед рендером — краш на 422

Что: все обработчики ошибок, которые клали сырой response.data.detail в
состояние и затем в JSX, переведены на существующий хелпер
getApiErrorMessage (src/utils/api-error.ts):

- Login.tsx — Telegram-auth, вход/регистрация по email, восстановление пароля
- Profile.tsx — смена email (запрос и подтверждение кода), повторная
  отправка письма верификации
- ConnectedAccounts.tsx — привязка email к аккаунту
- admin/AnalyticsTab.tsx, admin/MenuEditorTab.tsx — сохранение настроек

Почему: на невалидный по схеме запрос FastAPI/Pydantic отвечает 422, где
detail — не строка, а массив объектов {type, loc, msg, input, ctx}.
Компоненты рендерили его как есть, React падал с «Objects are not valid
as a React child», и вся страница (включая логин) уходила в ErrorBoundary
«Something went wrong» — пользователь не видел причину отказа вообще.

Зачем: getApiErrorMessage сводит Pydantic-массив к строке
«field: message; ...», поэтому вместо краша форма показывает настоящий
текст ошибки валидации. Ветвления по detail.includes(...) сохранены и
работают по нормализованной строке — поведение прежнее для строковых
detail, но безопасное для любой формы ответа.
This commit is contained in:
kewldan
2026-07-12 17:59:56 +03:00
parent 20565b8f59
commit 9b972931cf
5 changed files with 32 additions and 32 deletions

View File

@@ -2,6 +2,7 @@ import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { brandingApi } from '../../api/branding';
import { getApiErrorMessage } from '../../utils/api-error';
import { CheckIcon, CloseIcon, PencilIcon } from './icons';
export function AnalyticsTab() {
@@ -31,8 +32,7 @@ export function AnalyticsTab() {
setError(null);
},
onError: (err: unknown) => {
const detail = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail;
setError(detail || t('common.error'));
setError(getApiErrorMessage(err, t('common.error')));
},
});

View File

@@ -39,6 +39,7 @@ import {
import { Toggle } from './Toggle';
import { useNotify } from '../../platform/hooks/useNotify';
import { useNativeDialog } from '../../platform/hooks/useNativeDialog';
import { getApiErrorMessage } from '../../utils/api-error';
const ChevronIcon = ({ expanded }: { expanded: boolean }) => (
<PiCaretDown className={`h-3.5 w-3.5 transition-transform ${expanded ? 'rotate-180' : ''}`} />
@@ -511,9 +512,7 @@ export function MenuEditorTab() {
queryClient.setQueryData(['menu-layout'], data);
},
onError: (err: unknown) => {
const error = err as { response?: { data?: { detail?: string } } };
const detail = error.response?.data?.detail;
notify.error(detail || t('common.error'));
notify.error(getApiErrorMessage(err, t('common.error')));
},
});