React Error Boundaries

  • Post
     

    React Error Boundaries

    Di masa lalu, jika kita mendapatkan kesalahan JavaScript di dalam komponen, itu merusak keadaan internal React dan membuat React dalam keadaan rusak pada render berikutnya. Tidak ada cara untuk menangani kesalahan ini di komponen React, juga tidak menyediakan metode untuk memulihkannya. Tapi, React 16 memperkenalkan konsep baru untuk menangani kesalahan dengan menggunakan batasan kesalahan . Sekarang, jika ada kesalahan JavaScript yang ditemukan di bagian UI, itu tidak merusak seluruh aplikasi.

    Batas kesalahan adalah komponen React yang menangkap kesalahan JavaScript di mana saja di aplikasi kita, mencatat kesalahan tersebut, dan menampilkan UI fallback. Itu tidak merusak seluruh pohon komponen aplikasi dan hanya merender UI fallback setiap kali terjadi kesalahan dalam sebuah komponen. Batas kesalahan menangkap kesalahan selama rendering dalam metode siklus hidup komponen, dan konstruktor dari seluruh pohon di bawahnya.

    catatan:

    Terkadang, tidak mungkin untuk menangkap batasan Error dalam aplikasi React. Ini adalah:

    • Event handlers
    • Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
    • Server-side rendering
    • Errors are thrown in the error boundary itself rather than its children.

    Untuk aplikasi React sederhana, kita dapat mendeklarasikan batas kesalahan satu kali dan dapat menggunakannya untuk seluruh aplikasi. Untuk aplikasi kompleks yang memiliki banyak komponen, kita dapat mendeklarasikan beberapa batasan kesalahan untuk memulihkan setiap bagian dari keseluruhan aplikasi.

    Kami juga dapat melaporkan kesalahan ke layanan pemantauan kesalahan seperti Rollbar . Layanan pemantauan ini menyediakan kemampuan untuk melacak berapa banyak pengguna yang terpengaruh oleh kesalahan, menemukan penyebabnya, dan meningkatkan pengalaman pengguna.

    Error boundary in class

    Komponen kelas bisa menjadi batas kesalahan jika mendefinisikan metode siklus hidup baru baik getDerivedStateFromError () statis atau componentDidCatch (error, info). Kita bisa menggunakan getDerivedStateFromError () statis untuk merender UI fallback saat error muncul, dan bisa menggunakan componentDidCatch () untuk mencatat informasi error.

    Batas kesalahan tidak dapat menangkap kesalahan itu sendiri. Jika batas kesalahan gagal untuk membuat pesan kesalahan, kesalahan akan pergi ke batas kesalahan terdekat di atasnya. Ini mirip dengan blok {} tangkapan dalam JavaScript.

    How to implement error boundaries

    Langkah-1 Buat kelas yang memperluas komponen React dan meneruskan props di dalamnya.

    Langkah-2 Sekarang, tambahkan metode componentDidCatch () yang memungkinkan Anda menangkap kesalahan dalam komponen di bawahnya di pohon.

    Langkah-3 Selanjutnya tambahkan metode render (), yang bertanggung jawab atas bagaimana komponen harus dirender. Misalnya, ini akan menampilkan pesan kesalahan seperti “Ada yang salah”.

    Contoh

    1. classErrorBoundary extendsComponent {
    2. constructor(props) {
    3. super(props);
    4. this.state = { hasError: false };
    5. }
    6. static getDerivedStateFromError(error) {
    7. // It will update the state so the next render shows the fallback UI.
    8. return { hasError: true };
    9. }
    10. componentDidCatch(error, info) {
    11. // It will catch error in any component below. We can also log the error to an error reporting service.
    12. logErrorToMyService(error, info);
    13. }
    14. render() {
    15. if(this.state.hasError) {
    16. return(
    17. <div>Something is wrong.</div>;
    18. );
    19. }
    20. returnthis.props.children;
    21. }
    22. }

    Langkah-4 Sekarang, kita bisa menggunakannya sebagai komponen biasa. Tambahkan komponen baru di HTML, yang ingin Anda sertakan di batas kesalahan. Dalam contoh ini, kami menambahkan batas kesalahan di sekitar komponen MyWidgetCounter.

    1. <ErrorBoundary>
    2. <MyWidgetCounter />
    3. </ErrorBoundary>

     

    Where to Place Error Boundaries

    Batas kesalahan sepenuhnya bergantung pada Anda. Anda dapat menggunakan batas error pada level teratas dari komponen aplikasi atau membungkusnya pada masing-masing komponen untuk melindunginya dari kerusakan bagian lain dari aplikasi.

    Mari kita lihat contohnya.

    1. importReact from ‘react’;
    2. import‘./App.css’
    3. classErrorBoundary extendsComponent {
    4. constructor(props) {
    5. super(props);
    6. this.state = { error: false, errorInfo: null };
    7. }
    8. componentDidCatch(error, errorInfo) {
    9. // Catch errors in any components below and re-render with error message
    10. this.setState({
    11. error: error,
    12. errorInfo: errorInfo
    13. })
    14. }
    15. render() {
    16. if(this.state.errorInfo) {
    17. return(
    18. <div>
    19. <h2>Something went wrong.</h2>
    20. <details style={{ whiteSpace: ‘pre-wrap’}}>
    21. {this.state.error && this.state.error.toString()}
    22. <br />
    23. {this.state.errorInfo.componentStack}
    24. </details>
    25. </div>
    26. );
    27. }
    28. returnthis.props.children;
    29. }
    30. }
    31. classBuggyCounter extendsComponent {
    32. constructor(props) {
    33. super(props);
    34. this.state = { counter: 0};
    35. this.handleClick = this.handleClick.bind(this);
    36. }
    37. handleClick() {
    38. this.setState(({counter}) => ({
    39. counter: counter + 1
    40. }));
    41. }
    42. render() {
    43. if(this.state.counter === 3) {
    44. thrownew Error(‘I crashed!’);
    45. }
    46. return<h1 onClick={this.handleClick}>{this.state.counter}</h1>;
    47. }
    48. }
    49. function App() {
    50. return(
    51. <div>
    52. <p><b>Example of Error Boundaries</b></p>
    53. <hr />
    54. <ErrorBoundary>
    55. <p>These two counters are inside the same error boundary.</p>
    56. <BuggyCounter />
    57. <BuggyCounter />
    58. </ErrorBoundary>
    59. <hr />
    60. <p>These two counters are inside of their individual error boundary.</p>
    61. <ErrorBoundary><BuggyCounter /></ErrorBoundary>
    62. <ErrorBoundary><BuggyCounter /></ErrorBoundary>
    63. </div>
    64. );
    65. }
    66. export defaultApp

    Dalam potongan kode di atas, ketika kita mengklik angka , itu meningkatkan penghitung . Penghitung diprogram untuk membuat kesalahan saat mencapai 3 . Ini mensimulasikan kesalahan JavaScript dalam sebuah komponen. Di sini, kami menggunakan batas kesalahan dalam dua cara , yang diberikan di bawah ini.

    Pertama , kedua penghitung ini berada di dalam batas kesalahan yang sama. Jika ada yang crash, batas kesalahan akan menggantikan keduanya.

    1. <ErrorBoundary>
    2. <BuggyCounter />
    3. <BuggyCounter />
    4. </ErrorBoundary>

    Kedua , kedua penghitung ini berada di dalam batas kesalahan masing-masing. Jadi jika ada yang crash, yang lain tidak terpengaruh.

    1. <ErrorBoundary> <BuggyCounter /> </ErrorBoundary>
    2. <ErrorBoundary> <BuggyCounter /> </ErrorBoundary>

     

    New Behavior for Uncaught error

    Ini merupakan implikasi penting terkait dengan batasan kesalahan. Jika kesalahan tidak terdeteksi oleh batasan kesalahan apa pun, itu akan mengakibatkan unmount seluruh aplikasi React.

    Error Boundary di Event Handler

    Batas kesalahan tidak memungkinkan kesalahan penangkapan di dalam penangan acara. React tidak membutuhkan batasan kesalahan untuk memulihkan dari kesalahan di event handler. Jika ada kebutuhan untuk menangkap kesalahan di event handler, Anda dapat menggunakan pernyataan try-catch JavaScript .

    Pada contoh di bawah ini, Anda dapat melihat bagaimana penanganan kejadian akan menangani kesalahan.

    1. classMyComponent extendsComponent {
    2. constructor(props) {
    3. super(props);
    4. this.state = { error: null };
    5. this.handleClick = this.handleClick.bind(this);
    6. }
    7. handleClick() {
    8. try {
    9. // Do something which can throw error
    10. catch(error) {
    11. this.setState({ error });
    12. }
    13. }
    14. render() {
    15. if(this.state.error) {
    16. return
    17. <h2>It caught an error.</h2>
    18. }
    19. return<div onClick={this.handleClick}>Click Me</div>
    20. }
    21. }

     

    credit. javatpoint

Tagged: 

  • You must be logged in to reply to this topic.