ऐक्शन में त्रुटि प्रबंधन

export async function divideNumbers(formData: FormData) {
  const num1 = Number(formData.get('num1'));
  const num2 = Number(formData.get('num2'));

  if (num2 === 0) {
    throw new Error('Cannot divide by zero!');
  }

  const result = num1 / num2;
  return { success: true, result };
}

export async function divideNumbers(formData: FormData) {
  try {
    const num1 = Number(formData.get('num1'));
    const num2 = Number(formData.get('num2'));

    if (num2 === 0) {
      throw new Error('Cannot divide by zero!');
    }

    const result = num1 / num2;
    return { success: true, result };
  } catch (error: any) {
    console.error('Action Error:', error.message); // Log on server
    // Do NOT return `error` object directly to client!
    return { success: false, error: 'An unexpected error occurred.' };
  }
}

export async function divideNumbers(formData: FormData) {
  try {
    const num1 = Number(formData.get('num1'));
    const num2 = Number(formData.get('num2'));

    if (isNaN(num1) || isNaN(num2)) {
      throw new Error('Invalid input: Please enter numbers.');
    }
    if (num2 === 0) {
      throw new Error('Division by zero is not allowed.');
    }

    const result = num1 / num2;
    return { success: true, result };
  } catch (error: any) {
    console.error('Server Action Failed:', error.message);
    return { success: false, error: error.message || 'Unknown error occurred.' };
  }
}

import { useState } from 'react';
import { divideNumbers } from './actions'; // Your Server Action

export default function CalculatorForm() {
  const [message, setMessage] = useState('');

  async function handleSubmit(formData: FormData) {
    const res = await divideNumbers(formData);
    if (res.success) {
      setMessage(`Result: ${res.result}`);
    } else {
      setMessage(`Error: ${res.error}`);
    }
  }

  return (
    <form action={handleSubmit}>
      <input type="number" name="num1" />
      <input type="number" name="num2" />
      <button type="submit">Calculate</button>
      {message && <p>{message}</p>}
    </form>
  );
}

import { useFormState } from 'react-dom';
import { divideNumbers } from './actions';

const initialState = { success: false, error: '', result: null };

export default function CalculatorForm() {
  const [state, formAction] = useFormState(divideNumbers, initialState);

  return (
    <form action={formAction}>
      <input type="number" name="num1" placeholder="Number 1" />
      <input type="number" name="num2" placeholder="Number 2" />
      <button type="submit">Calculate</button>
      {state.success && <p>Result: {state.result}</p>}
      {!state.success && state.error && <p style={{ color: 'red' }}>{state.error}</p>}
    </form>
  );
}