Обробка помилок у Server Actions

type ActionState = {
  status: 'idle' | 'error' | 'success'
  message?: string
  errors?: {
    email?: string
    password?: string
  }
}

// Не рекомендовано
return {
  status: 'error',
  error: new Error('Невірні дані'),
}

return {
  status: 'error',
  message: 'Перевірте введені дані',
  errors: {
    email: 'Введіть коректну електронну адресу',
  },
}

const [state, formAction] = useActionState(serverAction, initialState)

'use server'

export type ActionState = {
  status: 'idle' | 'error' | 'success'
  message?: string
  errors?: {
    email?: string
    password?: string
  }
}

export const initialState: ActionState = {
  status: 'idle',
}

export async function login(
  _previousState: ActionState,
  formData: FormData,
): Promise<ActionState> {
  const email = String(formData.get('email') ?? '').trim()
  const password = String(formData.get('password') ?? '')

  const errors: ActionState['errors'] = {}

  if (!email) {
    errors.email = 'Введіть адресу електронної пошти'
  } else if (!email.includes('@')) {
    errors.email = 'Введіть коректну адресу електронної пошти'
  }

  if (!password) {
    errors.password = 'Введіть пароль'
  } else if (password.length < 8) {
    errors.password = 'Пароль має містити щонайменше 8 символів'
  }

  if (errors.email || errors.password) {
    return {
      status: 'error',
      message: 'Перевірте введені дані',
      errors,
    }
  }

  try {
    // Тут зазвичай виконується запит до бази даних або іншого сервісу.
    // У прикладі перевірка успішно завершується без зовнішніх залежностей.
    const isCredentialsValid = true

    if (!isCredentialsValid) {
      return {
        status: 'error',
        message: 'Неправильна електронна пошта або пароль',
      }
    }

    return {
      status: 'success',
      message: 'Вхід успішно виконано',
    }
  } catch (error) {
    // Деталі помилки записуємо на сервері, але не показуємо користувачеві.
    console.error('Помилка під час входу:', error)

    return {
      status: 'error',
      message: 'Не вдалося виконати вхід. Спробуйте ще раз.',
    }
  }
}

'use client'

import { useActionState } from 'react'
import { useFormStatus } from 'react-dom'
import { initialState, login } from './actions'

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Виконується вхід...' : 'Увійти'}
    </button>
  )
}

export default function LoginForm() {
  const [state, formAction] = useActionState(login, initialState)

  return (
    <form action={formAction} noValidate>
      <div>
        <label htmlFor="email">Електронна пошта</label>

        <input
          id="email"
          name="email"
          type="email"
          aria-invalid={Boolean(state.errors?.email)}
          aria-describedby={state.errors?.email ? 'email-error' : undefined}
        />

        {state.errors?.email && (
          <p id="email-error" role="alert">
            {state.errors.email}
          </p>
        )}
      </div>

      <div>
        <label htmlFor="password">Пароль</label>

        <input
          id="password"
          name="password"
          type="password"
          aria-invalid={Boolean(state.errors?.password)}
          aria-describedby={
            state.errors?.password ? 'password-error' : undefined
          }
        />

        {state.errors?.password && (
          <p id="password-error" role="alert">
            {state.errors.password}
          </p>
        )}
      </div>

      {state.message && (
        <p role="status" aria-live="polite">
          {state.message}
        </p>
      )}

      <SubmitButton />
    </form>
  )
}

import LoginForm from './LoginForm'

export default function LoginPage() {
  return (
    <main>
      <h1>Вхід</h1>
      <LoginForm />
    </main>
  )
}

return {
  status: 'error',
  message: 'Користувач із таким email уже існує',
}

try {
  // Операція, яка може завершитися помилкою
  await saveData()
} catch (error) {
  console.error('Не вдалося зберегти дані:', error)

  return {
    status: 'error',
    message: 'Не вдалося зберегти дані. Спробуйте пізніше.',
  }
}

// Невдалий підхід для звичайної помилки форми
throw new Error('Email має неправильний формат')

return {
  status: 'error',
  errors: {
    email: 'Email має неправильний формат',
  },
}

return {
  status: 'error',
  message: 'Неправильна електронна пошта або пароль',
}

{state.status === 'error' && state.message && (
  <p role="alert">{state.message}</p>
)}

{state.status === 'success' && state.message && (
  <p role="status">{state.message}</p>
)}

return {
  error,
}

return {
  status: 'error',
  message: 'Операцію не вдалося виконати',
}

catch (error) {
  console.error(error)

  return {
    status: 'error',
    message: 'Виникла внутрішня помилка сервера',
  }
}

const initialState = {
  status: 'idle' as const,
}

export async function action(
  previousState: ActionState,
  formData: FormData,
) {
  // ...
}

{
  status: 'error',
  message: 'Перевірте дані',
}

{
  status: 'success',
  message: 'Дані збережено',
}