fix: ошибка 500 при сабмите формы отправки пьесы

[Aleksey-dev-crt]

Описание

При корректном заполнении всех полей формы подачи пьесы ошибка 500. Ошибка пофиксилась в другом пул реквесте, ошибка была в функции handleResponse (fetcher.ts) в строчке "const payload = await response.json();", т.к. сервер при POST запросе на /feedback/participation/ в ответе ничего не возвращает. Так же в этом пул реквесте исправлено то, что номер телефона не попадал в сабмит и возможность отправки формы, не до конца ее заполнив, нажатием Enter.

Ссылка на задачу

При корректном заполнении всех полей формы подачи пьесы ошибка 500

[AlMkin]

Будет лучше если вынести в отдельную функцию - в какой-нить handle...

[Aleksey-dev-crt]

ну тут я по аналогии со всеми остальными инпутами сделал, для всех остальных инпутов тогда тоже отдельные хендлеры прописать?

[AlMkin]

да, давай

[AlMkin]

Все хорошо, только можно упростить убрав лишний return

if (!canSubmit) return;

и router.push('/form/success') убрать в try

[Aleksey-dev-crt]

router.push('/form/success') убирать в try не вижу смысла, тогда редирект на страницу success произойдет, даже если запрос выполнится с ошибкой, можно добавить в блок finally, но тогда придется добавлять условие на случай ошибки. Сейчас реализовано корректно, на мой взгляд, т. к. в блоке catch есть return, т. е. если запрос выполнится с ошибкой редиректа на страницу success не будет.

[AlMkin]

"тогда редирект на страницу success произойдет, даже если запрос выполнится с ошибкой" - если запрос выполняется с ошибкой, то он должен попадать в блок catch

"блоке catch есть return, т. е. если запрос выполнится с ошибкой редиректа на страницу success не будет" - ты же говоришь, что при ошибке запроса произойдет редирект на success в блоке catch!? если я правильно тебя понял, то тут противоречия

эти два блока кода, абсолютно одинаковы по функциональности, но второй вариант предпочтительнее, читаемостью и структурой

`const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();
if (canSubmit) {
try {
await postParticipation(form.values);
} catch (error) {
handleSubmitError(error);

    return;
  }

  router.push('/form/success');
}

};

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (!canSubmit) return;
try {
    await postParticipation(form.values);
    router.push('/form/success');
  } catch (error) {
    handleSubmitError(error);
  }
}

};`

[AlMkin]

Как ты проверял? опиши свои кейсы

"а как появится ошибка, если не выполнится блок try?" - этот момент не очень понял

[Aleksey-dev-crt]

сорян, да действительно я ошибался, сейчас еще раз перепроверил... Видимо в прошлый раз строчку router.push('/form/success'); ставил выше запроса и не обратил на это внимания, все поправил, изменения запушил

[Aleksey-dev-crt]

еще раз извиняюсь, не внимательный)

[Aleksey-dev-crt]

Я понял почему у меня отрабатывал router.push('/form/success'); в блоке try, даже, если запрос выполнялся с ошибкой, router.push у меня стоял после запроса, но в handleResponse в fetcher.ts был блок try catch и в catch было return err из-за этого в компоненте form.tsx при сабмите формы я вообще не попадал в блок catch, не важно с ошибкой выполнился запрос или нет...

[AlMkin]

`async function handleResponse(response: Response) {
let payload;
try {
payload = await response.json();
} catch (err) {
// Если возникла ошибка при попытке разобрать JSON, устанавливаем payload в пустой объект
payload = {};
}

if (!response.ok) {
throw new HttpRequestError({ statusCode: response.status, payload });
}

return payload as T;
}`

[AlMkin]

В общем так как if (!response.ok) {
throw new HttpRequestError({ statusCode: response.status, payload });
} это ошибка выбраcывалась в блоке try, поэтому оно дальше попадало в catch который в handleResponse и дальше просто return error, которое кидало в try handleSubmit

Вот сверху вариант должен работать правильно, проверяй