Membina Sistem Pengendalian Ralat Frontend yang Teguh dengan Axios dan Cangkuk Tersuai

pengenalan

Pengendalian ralat yang berkesan adalah penting untuk menyediakan pengalaman pengguna yang lancar dan mengekalkan kod yang bersih dan berskala. Dalam aplikasi yang kompleks, mengurus ralat secara manual merentas komponen selalunya membawa kepada kod yang bersepah dan tidak konsisten. Panduan ini akan menunjukkan kepada anda cara membina sistem pengendalian ralat modular, berskala dan terpusat dalam React menggunakan Axios, cangkuk tersuai (useApi) dan lapisan perkhidmatan modular untuk mencipta struktur yang mesra pengguna, teratur dan cekap.

Cangkuk: Mengapa Pengendalian Ralat Berpusat Penting

Bayangkan anda sedang membina platform e-dagang. Berbilang komponen mengambil data daripada pelbagai API, dan setiap satu mungkin gagal atas sebab yang berbeza—isu rangkaian, ralat pelayan atau input pengguna yang tidak sah. Tanpa sistem pengendalian ralat terpusat, kod anda menjadi berselerak dengan semakan ralat berulang dan pengguna menerima maklum balas yang tidak konsisten. Bagaimanakah anda boleh menyelaraskan proses ini untuk memastikan kebolehpercayaan dan pengalaman pengguna yang lancar? Panduan ini akan menunjukkan kepada anda caranya.

Pada akhirnya, anda akan belajar:

• Cara menyediakan pengendalian ralat terpusat dengan pemintas Axios.
• Peranan cangkuk useApi tersuai untuk mengurus keadaan permintaan API.
• Faedah menggunakan modul perkhidmatan untuk mengatur logik API.
• Teknik lanjutan untuk pengendalian ralat mesra pengguna, termasuk pilihan cuba semula dan pembatalan permintaan.

Jadual Kandungan

1. Mengapa Pengendalian Ralat Berpusat?
2. Pelaksanaan Asas
3. Menyediakan Instance Axios dengan Pemintas
4. Mencipta Cangkuk useApi Tersuai
5. Memahami Janji dan Menolak Janji
6. Menyusun Modul Perkhidmatan
7. Contoh: Perkhidmatan Pengguna
8. Penambahbaikan Lanjutan (Pilihan)
   • Ralat Menghuraikan Penyesuaian
   • Mekanisme Cuba Semula
   • Pemberitahuan Terperinci
   • Batalkan Permintaan pada Komponen Nyahlekap
9. Menyambung Titik
10. Ringkasan Visual
11. Menggabungkan Semuanya: Contoh Dunia Nyata
12. Amalan Terbaik
13. Bacaan Lanjut
14. Menyelesaikan masalah
15. Tatarajah Persekitaran
16. Kesimpulan
17. Seruan Bertindak

Mengapa Pengendalian Ralat Berpusat?

Pengendalian ralat terpusat menangani dua cabaran biasa:

Kod Ralat Berulang

• Isu: Tanpa mekanisme pusat, komponen bergantung pada berbilang blok tangkapan cuba.
• Kesan: Membawa kepada pengendalian ralat yang tidak konsisten dan kod berlebihan.

Pengalaman Pengguna Tidak Konsisten

• Isu: Mesej ralat mungkin berbeza di seluruh apl tanpa pemusatan.
• Kesan: Mencipta pengalaman pengguna yang terputus-putus dan boleh mengelirukan pengguna.

Menggunakan pendekatan terpusat dengan pemintas Axios, cangkuk tersuai (useApi) dan modul perkhidmatan menyelesaikan isu ini dengan:

• Lokasi Tunggal untuk Penghuraian Ralat dan Pemesejan: Menyediakan tempat yang bersatu untuk mengendalikan semua ralat, memastikan konsistensi.
• Pemisahan Kebimbangan: Membenarkan komponen memfokuskan sepenuhnya pada pembentangan data dan interaksi pengguna, meninggalkan pengendalian ralat kepada modul terpusat.

Pelaksanaan Asas

Menyediakan Instance Axios dengan Pemintas

Pemintas Axios ialah fungsi yang dipanggil oleh Axios untuk setiap permintaan atau respons. Dengan menyediakan pemintas respons, anda boleh mengendalikan ralat secara global, menghuraikan respons dan melakukan tindakan seperti mengelog atau mengubah hala pengguna berdasarkan syarat tertentu.

Langkah 1: Import Modul Diperlukan

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Langkah 2: Buat Instance Axios

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

Langkah 3: Tambah Pemintas Balasan

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

Penjelasan:

• Ralat Penghuraian: Pemintas menyemak sama ada ralat mempunyai respons. Jika tidak, ia menganggap ralat rangkaian dan memaparkan mesej yang sepadan.
• Mesej Ralat Tersuai: Ia cuba menggunakan mesej ralat tersuai berdasarkan jenis ralat yang disediakan oleh pelayan. Jika tiada yang tersedia, ia akan kembali kepada mesej yang dipratentukan.
• Maklum Balas Pengguna: Menggunakan react-toastify untuk menunjukkan pemberitahuan roti bakar, meningkatkan pengalaman pengguna dengan memberikan maklum balas segera.
• Ubah hala: Mengubah hala pengguna ke halaman log masuk jika ralat 401 Tanpa Kebenaran berlaku, memastikan keselamatan dengan menghalang akses tanpa kebenaran.

Langkah 4: Eksport Instance Axios

export default axiosInstance;

Mesej Ralat Tersuai

Tentukan mesej ralat tersuai anda dalam fail konfigurasi yang berasingan untuk mengekalkan konsistensi dan kemudahan pengurusan.

// config/customErrors.js

const ERROR_MESSAGES = {
  NETWORK_ERROR: "Network error. Please check your connection and try again.",
  BAD_REQUEST: "There was an issue with your request. Please check and try again.",
  UNAUTHORIZED: "You are not authorized to perform this action. Please log in.",
  FORBIDDEN: "Access denied. You don't have permission to view this resource.",
  NOT_FOUND: "The requested resource was not found.",
  GENERIC_ERROR: "Something went wrong. Please try again later.",

  // You can add more messages here if you want
};

export default ERROR_MESSAGES;

Ringkasan Pantas: Konfigurasi Pemintas Axios

Menyediakan pemintas Axios menyediakan:

• Penghuraian Ralat Berpusat: Mengurus ralat di satu tempat, memastikan konsistensi merentas semua permintaan API.
• Maklum Balas Pengguna: Menggunakan react-toastify untuk memberitahu pengguna tentang isu dengan segera.
• Pengalihan dan Keselamatan: Ubah hala pengguna yang tidak dibenarkan untuk log masuk apabila diperlukan, memastikan apl itu selamat.

Tata Axios terpusat ini adalah kunci untuk membina lapisan komunikasi API yang boleh dipercayai dan mesra pengguna yang memastikan pengurusan yang konsisten bagi semua permintaan API dan pengendalian ralat merentas aplikasi anda.

Mencipta Custom useApi Hook

Kait useApi memusatkan pengendalian permintaan API, mengurus pemuatan, data dan keadaan ralat. Dengan mengabstraksikan proses ini, useApi membenarkan komponen untuk mengelakkan blok cuba-tangkap berulang dan fokus pada pembentangan data.

Parameter:

• apiFunc (Fungsi): Fungsi API untuk dilaksanakan, biasanya daripada modul perkhidmatan.
• segera (Boolean, pilihan): Menentukan sama ada panggilan API perlu dibuat serta-merta selepas pemulaan cangkuk. Lalai kepada palsu.

Nilai yang dikembalikan:

• data: Data respons daripada panggilan API.
• memuatkan: Menunjukkan sama ada panggilan API sedang dijalankan.
• ralat: Menangkap sebarang mesej ralat daripada panggilan API yang gagal.
• permintaan: Fungsi untuk memulakan panggilan API, yang boleh dipanggil dengan parameter yang diperlukan.

Pelaksanaan:

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Penjelasan:

• Pengurusan Negeri:
  • data: Menyimpan data respons.
  • memuatkan: Menunjukkan jika panggilan API sedang dijalankan.
  • ralat: Menangkap sebarang mesej ralat.
• Fungsi permintaan:
  • Memulakan panggilan API.
  • Mengurus kemas kini keadaan berdasarkan hasil panggilan API.

Memahami Janji dan Menolak Janji

Sebelum menyelam lebih dalam, adalah penting untuk memahami Janji dan Penolakan Janji dalam JavaScript, kerana ia memainkan peranan penting dalam mengendalikan operasi tak segerak seperti panggilan API.

• Janji: Janji ialah objek yang mewakili penyiapan atau kegagalan operasi tak segerak. Ia membolehkan anda melampirkan panggilan balik untuk mengendalikan kejayaan (menyelesaikan) atau kegagalan (menolak) operasi.
• Penolakan Janji: Apabila operasi gagal, Janji "ditolak", mencetuskan kaedah .catch atau parameter kedua dalam .then.

Perkaitan dalam Axios dan useApi:

• Axios and Promises: Axios menggunakan Promises untuk mengendalikan permintaan HTTP. Apabila anda membuat permintaan menggunakan Axios, ia mengembalikan Janji yang diselesaikan dengan data respons atau menolak dengan ralat.
• Penolakan Janji dalam Pemintas Axios: Dalam pemintas Axios, apabila ralat berlaku, pemintas menolak Promise menggunakan Promise.reject(error). Penolakan ini merebak ke tempat panggilan API dibuat.
• Menangkap Penolakan dalam useApi: Fungsi permintaan cangkuk useApi menggunakan cuba-tangkap untuk mengendalikan penolakan ini. Apabila apiFunc(...args) menolak, blok tangkapan menangkap ralat, mengemas kini keadaan ralat dengan sewajarnya.

Kepentingan Mengendalikan Penolakan Janji:

• Cegah Penolakan Tidak Terkendali: Jika penolakan Promise tidak dikendalikan, ia boleh membawa kepada tingkah laku yang tidak dijangka dan menyukarkan penyahpepijatan.
• Pengurusan Ralat Konsisten: Dengan memusatkan pengendalian penolakan Promise, anda memastikan semua ralat diurus secara seragam, meningkatkan kebolehpercayaan kod dan pengalaman pengguna.

Bagaimana Jika useApi Hook Tidak Digunakan?

Tanpa cangkuk useApi, anda perlu melaksanakan blok cuba-tangkap dalam setiap komponen yang membuat panggilan API. Pendekatan ini membawa kepada:

• Kod Berulang: Setiap komponen akan mempunyai logik pengendalian ralat yang serupa, meningkatkan lebihan kod.
• Pengendalian Ralat Tidak Konsisten: Komponen yang berbeza mungkin mengendalikan ralat secara berbeza, yang membawa kepada pengalaman pengguna yang tidak konsisten.
• Meningkatkan Usaha Penyelenggaraan: Mengemas kini logik pengendalian ralat memerlukan perubahan merentas berbilang komponen, menjadikan penyelenggaraan menyusahkan.

Dengan menggunakan cangkuk useApi, anda mengasingkan logik pengendalian ralat yang berulang, mempromosikan kod yang lebih bersih dan lebih boleh diselenggara.

Contoh Penggunaan:

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Dalam contoh ini, cangkuk useApi mengurus panggilan API untuk mengambil produk. Ia mengendalikan keadaan pemuatan, menangkap sebarang ralat dan menyediakan data yang diambil kepada komponen untuk pemaparan.

Menyusun Modul Perkhidmatan

Modul perkhidmatan mentakrifkan fungsi titik akhir API, disusun mengikut entiti (cth., pengguna, produk). Struktur ini memastikan logik API berasingan daripada kod komponen, memastikan modulariti dan penggunaan semula.

Contoh: Perkhidmatan Produk

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Contoh: Perkhidmatan Pengguna

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

Faedah Modul Perkhidmatan:

• Dayakan Penggunaan Semula dan Kemodulatan: Fungsi API boleh digunakan semula merentas berbilang komponen, mengurangkan pertindihan kod.
• Pastikan Pemisahan Kebimbangan: Memastikan komponen bersih dengan memindahkan logik API ke dalam perkhidmatan, meningkatkan organisasi kod dan kebolehselenggaraan.
• Pengujian Lebih Mudah: Modul perkhidmatan boleh diuji secara bebas, memastikan interaksi API berfungsi seperti yang diharapkan sebelum menyepadukannya ke dalam komponen.

Penambahbaikan Lanjutan (Pilihan)

Bagi mereka yang bersedia untuk meneruskan sistem pengendalian ralat mereka, pertimbangkan untuk melaksanakan teknik lanjutan ini:

Ralat Menghuraikan Penyesuaian

Kategori ralat (cth., rangkaian lwn. pengesahan) dan sediakan mesej yang boleh diambil tindakan untuk membantu pengguna memahami isu dan kemungkinan penyelesaian.

Pelaksanaan:

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

Penjelasan:

• Pengkategorian Ralat: Pemintas menyemak sifat jenis dalam respons ralat untuk menentukan sifat ralat (cth., pengesahan atau pengesahan).
• Mesej Boleh Tindakan: Menyediakan pengguna dengan mesej ralat khusus berdasarkan jenis ralat, meningkatkan pemahaman dan keupayaan mereka untuk bertindak balas dengan sewajarnya.

Cuba semula Mekanisme

Laksanakan pilihan cuba semula untuk permintaan yang gagal, seperti butang cuba semula dalam UI atau percubaan semula automatik dengan backoff eksponen, untuk meningkatkan kebolehpercayaan.

Pelaksanaan:

export default axiosInstance;

Penjelasan:

• Cuba Semula: Mengkonfigurasikan Axios untuk mencuba semula permintaan yang gagal sehingga tiga kali dengan strategi mundur yang eksponen.
• Syarat Cuba Semula: Percubaan semula berlaku untuk ralat rangkaian, permintaan idempoten atau apabila pelayan membalas dengan Ralat Pelayan Dalaman 500.
• Cuba Semula Log: Mencatat setiap percubaan mencuba semula, yang boleh berguna untuk penyahpepijatan dan pemantauan.

Pemberitahuan Terperinci

Bezakan pemberitahuan mengikut keterukan (maklumat, amaran, ralat) untuk membantu pengguna memahami kepentingan ralat.

Pelaksanaan:

// config/customErrors.js

const ERROR_MESSAGES = {
  NETWORK_ERROR: "Network error. Please check your connection and try again.",
  BAD_REQUEST: "There was an issue with your request. Please check and try again.",
  UNAUTHORIZED: "You are not authorized to perform this action. Please log in.",
  FORBIDDEN: "Access denied. You don't have permission to view this resource.",
  NOT_FOUND: "The requested resource was not found.",
  GENERIC_ERROR: "Something went wrong. Please try again later.",

  // You can add more messages here if you want
};

export default ERROR_MESSAGES;

Penjelasan:

• Jenis Pemberitahuan: Menentukan jenis pemberitahuan roti bakar (maklumat, amaran, ralat) berdasarkan kategori ralat.
• Maklum Balas Pengguna: Menyediakan maklum balas khusus konteks kepada pengguna, membantu mereka memahami keterukan dan sifat isu.

Batalkan Permintaan pada Komponen Nyahlekap

Gunakan token pembatalan Axios untuk mengelakkan kebocoran memori dengan membatalkan permintaan berterusan jika komponen dinyahlekap.

Pelaksanaan:

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Penjelasan:

• Batal Token: Menggunakan token pembatalan Axios untuk membatalkan permintaan API yang sedang berjalan apabila permintaan baharu dibuat atau apabila komponen dinyahlekap.
• Cegah Kebocoran Memori: Memastikan tiada kemas kini keadaan berlaku pada komponen yang tidak dipasang, mengelakkan kemungkinan kebocoran memori.
• Melog Permintaan Dibatalkan: Log permintaan yang dibatalkan untuk tujuan penyahpepijatan.

Ringkasan Peningkatan Lanjutan

Melaksanakan teknik lanjutan ini membawa sistem pengendalian ralat anda ke peringkat seterusnya:

• Penyesuaian Menghuraikan Ralat: Menyampaikan mesej ralat yang lebih khusus kepada pengguna, membantu mereka memahami dan menangani isu secara langsung.
• Mekanisme Cuba Semula: Meningkatkan kebolehpercayaan dengan membenarkan permintaan mencuba semula secara automatik atau manual selepas ralat tertentu.
• Pemberitahuan Terperinci: Membezakan antara jenis ralat, menunjukkan pemberitahuan berdasarkan keterukan untuk memaklumkan pengguna dengan lebih baik.
• Batalkan Permintaan pada Komponen Nyahlekap: Mencegah kebocoran memori dan permintaan berlebihan, memastikan prestasi apl yang stabil dan cekap.

Peningkatan ini adalah pilihan tetapi sangat berharga kerana ia menambah kedalaman, fleksibiliti dan penambahbaikan tertumpu pengguna pada pendekatan pengendalian ralat apl anda.

Menyambung Titik

Apabila komponen memulakan panggilan API melalui useApi, aliran berikut dicetuskan:

Komponen Menggunakan Modul Perkhidmatan:

Setiap modul perkhidmatan (cth., UserService, productService) mentakrifkan fungsi untuk titik akhir API tertentu dan menggunakan axiosInstance yang dikonfigurasikan. Komponen hanya berinteraksi dengan fungsi perkhidmatan ini.

useApi Mencetuskan Axios melalui Modul Perkhidmatan:

Komponen melepasi fungsi perkhidmatan (cth., productService.getProducts) untuk menggunakanApi. Apabila permintaan dipanggil, useApi memajukan fungsi kepada perkhidmatan, yang kemudiannya membuat permintaan HTTP melalui axiosInstance.

Penghuraian Ralat Tersuai dalam Pemintas Axios:

Pemintas dalam axiosInstance mengendalikan pengelogan ralat, menghuraikan mesej ralat tersuai yang dipratentukan dan memusatkan pengendalian ralat.

Respons Berstruktur daripada useApi:

useApi mengembalikan keadaan berstruktur (data, pemuatan dan ralat) kepada komponen, membolehkannya memberi tumpuan semata-mata pada penyampaian data dan pengendalian interaksi.

Ringkasan Visual

Garis berikut menerangkan cara setiap komponen dalam sistem pengendalian ralat berinteraksi dalam aplikasi, daripada panggilan API awal kepada maklum balas pengguna:

1. Komponen

   • Komponen memulakan permintaan API menggunakan cangkuk useApi, yang menghilangkan kerumitan mengurus panggilan API, pengendalian ralat dan keadaan pemuatan.

2. gunakan Api Hook

   • useApi ialah cangkuk tersuai yang menerima fungsi untuk permintaan API (daripada modul perkhidmatan). Ia mengurus keadaan pemuatan permintaan, mengendalikan ralat dan mengembalikan respons berstruktur (data, pemuatan, ralat) kembali kepada komponen.

3. Modul Perkhidmatan

   • Modul perkhidmatan mentakrifkan fungsi khusus untuk setiap titik akhir API (cth., getProducts, createProduct) dan menggunakan axiosInstance terpusat untuk semua permintaan, memastikan konsistensi merentas aplikasi.

4. Instance Axios

   • AxiosInstance mengurus permintaan dan respons HTTP, menggunakan sebarang konfigurasi tersuai seperti URL asas dan pengepala.

5. Respons API

   • Respons daripada API diproses melalui pemintas Axios, yang mengendalikan ralat secara global. Ini termasuk menghuraikan mesej ralat tersuai dan mencetuskan pemberitahuan pengguna.

6. Pengendalian Ralat & Pemberitahuan Pengguna

   • Pemintas memaparkan mesej ralat kepada pengguna melalui pemberitahuan react-toastify, dan mereka boleh mengurus tindakan tambahan, seperti mengubah hala pengguna ke halaman log masuk mengenai ralat pengesahan.

Aliran ini membolehkan pengurusan ralat terpusat dan maklum balas pengguna yang konsisten, membenarkan komponen menumpukan semata-mata pada persembahan data tanpa perlu mengendalikan logik semakan ralat berulang.

Menyatukan Semuanya: Contoh Dunia Nyata

Komponen Senarai Produk

Contoh ini menunjukkan keseluruhan aliran, daripada membuat panggilan API kepada memaparkan data, dengan pengendalian ralat terpusat dan maklum balas.

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Pecahan Komponen:

• Penyata Import:

  • react-toastify: Digunakan untuk memaparkan pemberitahuan roti bakar.
  • productService: Mengandungi fungsi API yang berkaitan dengan produk.
  • useApi: Cangkuk tersuai untuk mengurus panggilan API.

• Permulaan Cangkuk:

  • Memulakan cangkuk useApi dengan fungsi getProducts daripada productService. Parameter palsu menunjukkan bahawa panggilan API tidak sepatutnya berlaku serta-merta selepas pengamulaan cangkuk.

• Pencetus Panggilan API:

  • Menggunakan useEffect untuk memanggil fungsi permintaan apabila komponen dipasang, mengambil halaman pertama produk.

• Pengendalian Ralat:

  • Kegunaan lainEffect mendengar perubahan dalam keadaan ralat. Jika ralat berlaku, ia mencetuskan pemberitahuan roti bakar untuk memaklumkan pengguna.

• Pemarahan Bersyarat:

  • Keadaan Memuatkan: Memaparkan mesej memuatkan semasa panggilan API sedang dijalankan.
  • Keadaan Ralat: Menunjukkan mesej ralat jika panggilan API gagal.
  • Perenderan Data: Sebaik sahaja data berjaya diambil, ia memaparkan grid produk dengan imej, nama dan harganya.

Contoh ini menunjukkan cara pengendalian ralat terpusat memudahkan logik komponen dan memastikan maklum balas pengguna yang konsisten.

Amalan Terbaik

Mematuhi amalan terbaik memastikan sistem pengendalian ralat anda cekap, boleh diselenggara dan mesra pengguna.

Pemisahan Kebimbangan

• Penerangan: Simpan logik API berasingan daripada komponen UI dengan menggunakan modul perkhidmatan. Ini meningkatkan organisasi kod dan kebolehselenggaraan.
• Contoh: Daripada membuat panggilan API terus dalam komponen, wakilkan mereka kepada modul perkhidmatan seperti productService.js.

Pemesejan Ralat Konsisten

• Penerangan: Kendalikan semua ralat secara seragam untuk memudahkan penyahpepijatan dan memberikan pengalaman pengguna yang lancar.
• Contoh: Menggunakan mesej ralat yang dipratentukan dalam customErrors.js memastikan pengguna menerima maklum balas yang konsisten tanpa mengira dari mana ralat itu berasal.

Elakkan Kod Berulang

• Penerangan: Gunakan pengendalian ralat terpusat dan cangkuk tersuai untuk menghapuskan blok cuba-tangkap berulang merentas komponen.
• Contoh: Cangkuk useApi mengurus keadaan ralat dan pemberitahuan, membenarkan komponen memfokuskan pada pemaparan data semata-mata.

Mesej Ralat Bermakna

• Penerangan: Sediakan mesej ralat yang mesra pengguna dan boleh diambil tindakan untuk meningkatkan pemahaman dan mengurangkan kekecewaan.
• Contoh: Daripada memaparkan mesej generik seperti "Ralat berlaku," gunakan mesej khusus seperti "Ralat Pengesahan: Sila masukkan alamat e-mel yang sah."

Mengendalikan Kes Tepi

• Penerangan: Jangka dan urus senario yang tidak dijangka, seperti kegagalan rangkaian atau ralat pelayan, untuk menghalang aplikasi anda daripada ranap.
• Contoh: Pemintas Axios mengendalikan ralat rangkaian dengan memaparkan roti bakar "Ralat rangkaian" dan menghalang aplikasi daripada pecah.

Pengendalian Ralat Selamat

• Perihalan: Elakkan daripada mendedahkan maklumat sensitif dalam mesej ralat. Sediakan mesej mesra pengguna semasa mengelog ralat terperinci dengan selamat pada pelayan.
• Contoh: Paparkan mesej ralat generik kepada pengguna sambil menghantar log ralat terperinci kepada perkhidmatan pengelogan seperti Sentry untuk pembangun.

Bacaan Selanjutnya

Tingkatkan pemahaman anda tentang konsep yang diliputi dalam panduan ini dengan sumber berikut:

• Dokumentasi Pemintas Axios: Ketahui cara menggunakan pemintas Axios untuk mengendalikan permintaan dan respons secara global.
• Dokumentasi React Hooks: Fahami asas React Hooks untuk menguruskan keadaan dan kesan sampingan.
• Pengenalan Redux Toolkit: Mulakan dengan Redux Toolkit untuk pengurusan keadaan yang cekap dalam aplikasi React.
• React-Toastify Documentation: Temui cara melaksanakan pemberitahuan roti bakar untuk maklum balas pengguna yang lebih baik.

Menyelesaikan masalah

1. Pemberitahuan Roti Bakar Tidak Muncul

• Punca: The komponen daripada react-toastify mungkin tiada dalam aplikasi anda.
• Penyelesaian: Pastikan disertakan dalam komponen aplikasi utama anda, biasanya dalam halaman/_app.js.

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

2. Permintaan API Tidak Ditangkap oleh Pemintas

• Sebab: Modul perkhidmatan mungkin mengimport pustaka Axios lalai dan bukannya axiosInstance terpusat.
• Penyelesaian: Pastikan semua modul perkhidmatan mengimport axiosInstance terpusat.

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

3. Ubah hala Tidak Berfungsi pada Ralat Tertentu

• Punca: Penghala dari sebelah/penghala mungkin tidak diimport atau digunakan dengan betul di luar komponen React.
• Penyelesaian: Pastikan pemintas Axios digunakan dalam konteks di mana Penghala boleh melakukan ubah hala. Sebagai alternatif, kendalikan ubah hala dalam cangkuk useApi atau dalam komponen.

Konfigurasi Persekitaran

Menguruskan persekitaran yang berbeza memastikan aplikasi anda berinteraksi dengan titik akhir API yang betul semasa pembangunan, ujian dan pengeluaran.

Langkah 1: Tentukan Pembolehubah Persekitaran

Buat fail .env.local dalam direktori akar projek anda dan tentukan URL asas API anda:

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

Langkah 2: Akses Pembolehubah Persekitaran dalam Kod

Pastikan tika Axios anda menggunakan pembolehubah persekitaran:

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Amalan Terbaik:

• Maklumat Sensitif Selamat: Jangan sekali-kali menyerahkan fail .env.local atau sebarang pembolehubah persekitaran sensitif kepada sistem kawalan versi anda. Gunakan .gitignore untuk mengecualikan fail ini.
• Konvensyen Penamaan Konsisten: Gunakan penamaan yang jelas dan konsisten untuk pembolehubah persekitaran, biasanya diawali dengan NEXT_PUBLIC_ untuk menunjukkan ia terdedah kepada bahagian hadapan.
• Konfigurasi Berasingan untuk Setiap Persekitaran: Kekalkan fail .env berasingan untuk persekitaran yang berbeza (cth., .env.development, .env.production) untuk mengurus konfigurasi dengan berkesan.

Kesimpulan

Dengan membina sistem pengendalian ralat terpusat, anda telah menyediakan struktur yang bersih, modular dan mesra pengguna yang meningkatkan pengalaman pembangun dan kepuasan pengguna. Sama ada anda baru memulakan atau ingin meningkatkan pengurusan ralat apl anda, pendekatan ini menyediakan asas kukuh yang boleh berkembang bersama aplikasi anda.

Galakkan diri anda untuk bereksperimen dengan ciri yang diterangkan di sini, bermula dengan asas dan menambah peningkatan apabila anda semakin selesa. Pendekatan terpusat untuk pengendalian ralat ialah kemahiran dan amalan berharga yang akan membuahkan hasil apabila aplikasi anda meningkat.

Seruan Bertindak

Bersedia untuk meningkatkan aplikasi React/Next.js anda dengan pengendalian ralat terpusat?

Laksanakan strategi yang digariskan dalam panduan ini untuk mengalami kod yang lebih bersih, pemberitahuan pengguna yang konsisten dan kebolehselenggaraan yang lebih baik.

Kongsi Maklum Balas Anda

Ada soalan, cadangan atau pengalaman untuk dikongsi? Berinteraksi dengan komuniti dengan meninggalkan komen atau menghubungi GitHub dan Twitter.

Nantikan Lagi

Saya sedang berusaha untuk membangunkan pakej npm berdasarkan sistem pengendalian ralat terpusat ini. Nantikan kemas kini atau cadangkan ciri yang anda rasa berharga!

Selamat Mengekod! ?✨

Atas ialah kandungan terperinci Membina Sistem Pengendalian Ralat Frontend yang Teguh dengan Axios dan Cangkuk Tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!