Pengendalian Ralat dalam Tindakan
Laksanakan strategi pengendalian ralat yang berkesan dalam Server Actions untuk memberikan maklum balas kukuh kepada pengguna.
Pengendalian Ralat dalam Tindakan ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.
Tindakan Pelayan yang Kukuh
Apabila membina aplikasi, pelbagai perkara boleh berlaku! Data mungkin tidak sah, pangkalan data mungkin tidak dapat dicapai atau API luaran mungkin gagal.
Pengendalian ralat yang berkesan dalam Tindakan Pelayan amat penting untuk pengalaman pengguna yang lancar dan mengekalkan integriti data. Pengendalian ini mencegah kerosakan serta menyediakan maklum balas yang jelas.
Blok `try-catch`
Dalam JavaScript/TypeScript, cara asas untuk mengendalikan ralat yang berkemungkinan berlaku adalah dengan menggunakan blok try-catch. Blok ini membolehkan anda 'mencuba' melaksanakan kod dan 'menangkap' sebarang ralat yang berlaku.
- Kod dalam blok
trydilaksanakan. - Jika ralat berlaku, pelaksanaan beralih ke blok
catch. - Blok
catchmenerima objek ralat, lalu membolehkan anda mengendalikannya dengan baik.
Contoh Ralat Tindakan Pelayan
Mari kita lihat Tindakan Pelayan ringkas yang mungkin gagal. Bayangkan suatu tindakan yang membahagikan dua nombor, tetapi salah satunya mungkin sifar.
Tanpa pengendalian ralat, pembahagian dengan sifar akan menyebabkan tindakan gagal dan berpotensi menjejaskan penyerahan borang sebelah klien.
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 };
}Menangkap Ralat pada Pelayan
Untuk mengelakkan tindakan daripada gagal, kita membalut kod berisiko dalam blok try-catch. Ini membolehkan kita mencatat ralat pada pelayan dan menghalang butiran ralat sensitif daripada sampai kepada klien.
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.' };
}
}Mengembalikan Ralat yang Mesra Klien
Selepas menangkap ralat pada pelayan, kita perlu mengembalikan mesej yang bermakna dan mudah difahami klien. Mesej ini membantu pengguna memahami perkara yang berlaku tanpa mendedahkan butiran dalaman pelayan.
- Kembalikan objek dengan bendera
success: false. - Sertakan sifat
errordengan mesej yang mesra pengguna. - Elakkan menghantar jejak tindanan ralat mentah kepada klien demi keselamatan.
Tindakan dengan Pengembalian Ralat Klien
Beginilah rupa tindakan divideNumbers kita apabila mengembalikan mesej ralat khusus kepada klien:
Perhatikan bahawa ralat yang berbeza menerima mesej yang berbeza, manakala mesej umum digunakan untuk ralat yang tidak dijangka.
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.' };
}
}Paparan Ralat Sisi Klien
Di sisi klien, selepas memanggil Tindakan Pelayan, anda akan menerima objek yang dikembalikan. Anda kemudian boleh menyemak sifat success dan error untuk mengemas kini antara muka pengguna anda.
Ini membolehkan anda memaparkan mesej ralat kepada pengguna, menyahdayakan bahagian tertentu dalam borang atau mengambil tindakan pembetulan yang lain.
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>
);
}Cangkuk React `useFormState`
Untuk borang, cangkuk React useFormState direka khusus untuk mengurus keadaan yang dikembalikan oleh Tindakan Pelayan. Cangkuk ini memudahkan paparan maklum balas, seperti mesej berjaya atau ralat, selepas borang dihantar.
Cangkuk ini menerima tindakan dan keadaan awal anda, kemudian mengembalikan keadaan semasa serta tindakan yang dikemas kini untuk dihantar kepada sifat action bagi <form> anda.
Menggunakan `useFormState` untuk Ralat
Begini cara mengintegrasikan useFormState untuk memaparkan mesej ralat secara terus dalam komponen borang anda. Cangkuk ini menjadikan pengendalian respons tindakan sangat kemas.
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>
);
}Mengendalikan Ralat Tindakan Pelayan
Antara amalan berikut, yang manakah merupakan amalan BEST untuk mengendalikan ralat yang ditangkap dalam Tindakan Pelayan Next.js?
Imbas Kembali: Pengendalian Ralat
Anda telah menguasai pengendalian ralat dalam Tindakan Pelayan Next.js!
- Gunakan blok
try-catchuntuk mengendalikan ralat pada pelayan dengan baik. - Catat ralat pada sisi pelayan untuk penyahpepijatan dan pemantauan.
- Kembalikan mesej ralat yang mudah difahami oleh klien menggunakan objek berstruktur, contohnya
{ success: false, error: 'message' }. - Gunakan cangkuk React
useFormStateuntuk mengurus dan memaparkan hasil tindakan serta ralat dalam borang anda dengan mudah.
Pengendalian ralat yang kukuh menjadikan aplikasi anda lebih boleh dipercayai dan mesra pengguna!
Pelajari TypeScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Soalan Lazim
Adakah pelajaran “Pengendalian Ralat dalam Tindakan” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “Pengendalian Ralat dalam Tindakan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pengendalian Ralat dalam Tindakan”?
Laksanakan strategi pengendalian ralat yang berkesan dalam Server Actions untuk memberikan maklum balas kukuh kepada pengguna. Anda berlatih Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Pengendalian Ralat dalam Tindakan” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) ini?
Ya. Setiap pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Borang Tindakan Pelayan Asas
- Mengubah Data & Pengesahan Semula
- Pengendalian Ralat dalam Tindakan
- UI Optimistik dan Keadaan Menunggu dengan Tindakan Pelayan