Mereka bentuk UI Berdaya tahan: Corak Terperinci dan Kebolehcapaian untuk Pengendalian Ralat dalam React

Membina Antara Muka Pengguna Reaksi Teguh: Corak Pengendalian Ralat Lanjutan dan Kebolehcapaian

Membina antara muka pengguna yang berkuasa adalah lebih daripada sekadar memaparkan mesej ralat. Artikel ini akan meneroka corak sempadan ralat lanjutan, strategi pengendalian ralat global dan isu kebolehaksesan dalam reka bentuk UI sandaran inklusif dalam React. Mari kita mendalami!

---

Mod Sempadan Ralat Lanjutan

React 19 memperkenalkan komponen ErrorBoundary terbina dalam yang memudahkan pengendalian ralat dan selaras dengan amalan React moden.

Gunakan sempadan ralat terbina dalam React

Komponen ErrorBoundary baharu ialah cara deklaratif yang berfungsi untuk menangkap dan mengendalikan ralat dalam pepohon komponen:

import { ErrorBoundary } from 'react';

const FallbackComponent = ({ error, resetErrorBoundary }) => (
  <div>
    <h2 id="发生错误">发生错误！</h2>
    <p>{error.message}</p>
    <button onClick={resetErrorBoundary}>重试</button>
  </div>
);

const App = () => (
  <ErrorBoundary fallbackComponent={<FallbackComponent />} onError={(error, info) => console.error('ErrorBoundary 捕获到错误：', error, info)}>
    <MyComponent />
  </ErrorBoundary>
);

Ciri Utama

• fallbackComponent: Buat UI sandaran secara deklaratif.
• resetErrorBoundary: Tetapkan semula status ralat, selalunya digunakan dalam mekanisme cuba semula.
• onError Panggilan Balik: Tangkap butiran ralat dan logkannya untuk nyahpepijat atau pelaporan.

Penyelesaian terbina dalam ini menghapuskan keperluan untuk pelaksanaan berasaskan kelas tersuai, memastikan ketekalan dan kemudahan penggunaan.

---

Pengendalian ralat global

Apabila aplikasi anda berkembang, adalah penting untuk mengendalikan ralat secara global untuk mengelakkan kes tepi diabaikan. JavaScript menyediakan pendengar acara global yang membolehkan anda mengendalikan ralat ini pada peringkat aplikasi. Berikut ialah cara untuk memusatkan pengendalian ralat dengan berkesan:

Tangkap ralat dan penolakan yang tidak ditangkap

Gunakan pendengar acara global untuk menangkap ralat yang tidak dikendalikan:

// 捕获未捕获的 JavaScript 错误
window.onerror = (message, source, lineno, colno, error) => {
  console.error("捕获全局错误：", { message, source, lineno, colno, error });
};

// 捕获未处理的 Promise 拒绝
window.onunhandledrejection = (event) => {
  console.error("未处理的 Promise 拒绝：", event.reason);
};

Penerangan - window.onerror:

• message: Mesej ralat yang menerangkan masalah.
• source: URL skrip tempat ralat berlaku.
• lineno: Nombor baris skrip tempat ralat berlaku.
• colno: Nombor lajur tempat ralat berlaku.
• error: Objek ralat sebenar (jika tersedia), yang boleh memberikan butiran lanjut tentang masalah itu.

Ini membolehkan anda melog maklumat ralat yang berkaitan, yang boleh membantu dalam penyahpepijatan. console.error Output boleh digantikan dengan mekanisme pengendalian ralat tersuai, seperti menghantar log ke pelayan anda atau menjejak statistik ralat.

Penerangan - window.onunhandledrejection:

• event.reason: Atribut ini mengandungi sebab atau objek ralat yang dikaitkan dengan penolakan yang tidak dikendalikan. Biasanya, ia akan menjadi mesej ralat atau pengecualian yang dilemparkan daripada Janji.

Pendengar global ini memastikan bahawa sebarang penolakan yang tidak dikendalikan ditangkap dan direkodkan. Ini ialah cara yang berguna untuk memastikan kelakuan kod tak segerak yang boleh diramal, dan ia menyediakan cara untuk mengenal pasti dan menyelesaikan masalah yang mungkin disebabkan oleh penolakan Janji yang tidak dikendalikan.

---

Nota Kebolehcapaian

Memastikan UI sandaran boleh diakses membantu meningkatkan kebolehgunaan untuk semua pengguna, termasuk orang kurang upaya.

Gunakan ARIA untuk mengumumkan ralat

Memaklumi pembaca skrin secara dinamik tentang ralat menggunakan kawasan langsung ARIA:

import { ErrorBoundary } from 'react';

const FallbackComponent = ({ error, resetErrorBoundary }) => (
  <div>
    <h2 id="发生错误">发生错误！</h2>
    <p>{error.message}</p>
    <button onClick={resetErrorBoundary}>重试</button>
  </div>
);

const App = () => (
  <ErrorBoundary fallbackComponent={<FallbackComponent />} onError={(error, info) => console.error('ErrorBoundary 捕获到错误：', error, info)}>
    <MyComponent />
  </ErrorBoundary>
);

Pengurusan Fokus

Apabila ralat berlaku, tetapkan fokus terus kepada mesej ralat untuk navigasi yang lebih mudah:

// 捕获未捕获的 JavaScript 错误
window.onerror = (message, source, lineno, colno, error) => {
  console.error("捕获全局错误：", { message, source, lineno, colno, error });
};

// 捕获未处理的 Promise 拒绝
window.onunhandledrejection = (event) => {
  console.error("未处理的 Promise 拒绝：", event.reason);
};

---

Ringkasan

Dengan memanfaatkan komponen ErrorBoundary terbina dalam React 19, melaksanakan pengendalian ralat global dan mengutamakan kebolehaksesan, anda boleh mencipta UI yang mengendalikan kegagalan dengan anggun dan memenuhi kumpulan pengguna yang pelbagai. Ingat, daya tahan dalam reka bentuk UI adalah lebih daripada sekadar pulih daripada ralat—ia juga mengenai kepercayaan dengan pengguna.

Apakah pendekatan anda untuk mengendalikan ralat dalam aplikasi anda?

Atas ialah kandungan terperinci Mereka bentuk UI Berdaya tahan: Corak Terperinci dan Kebolehcapaian untuk Pengendalian Ralat dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!