Function ErrorBoundary 

pub fn ErrorBoundary(props: ErrorBoundaryProps) -> Element

Create a new error boundary component that catches any errors thrown from child components

Details

Error boundaries handle errors within a specific part of your application. They are similar to try/catch in JavaScript, but they only catch errors in the tree below them. Any errors passed up from a child will be caught by the nearest error boundary. Error boundaries are quick to implement, but it can be useful to individually handle errors in your components to provide a better user experience when you know that an error is likely to occur.

Example

use dioxus::prelude::*;

fn App() -> Element {
    let mut multiplier = use_signal(|| String::from("2"));
    rsx! {
        input {
            r#type: "text",
            value: multiplier,
            oninput: move |e| multiplier.set(e.value())
        }
        ErrorBoundary {
            handle_error: |errors: ErrorContext| {
                rsx! {
                    div {
                        "Oops, we encountered an error. Please report {errors:?} to the developer of this application"
                    }
                }
            },
            Counter {
                multiplier
            }
        }
    }
}

#[component]
fn Counter(multiplier: ReadSignal<String>) -> Element {
    let multiplier_parsed = multiplier().parse::<usize>()?;
    let mut count = use_signal(|| multiplier_parsed);
    rsx! {
        button {
            onclick: move |_| {
                let multiplier_parsed = multiplier().parse::<usize>()?;
                *count.write() *= multiplier_parsed;
                Ok(())
            },
            "{count}x{multiplier}"
        }
    }
}

Resetting the error boundary

Once the error boundary catches an error, it will render the rsx returned from the handle_error function instead of the children. To reset the error boundary, you can call the ErrorContext::clear_errors method. This will clear all errors and re-render the children.

fn App() -> Element {
    let mut multiplier = use_signal(|| String::new());
    rsx! {
        input {
            r#type: "text",
            value: multiplier,
            oninput: move |e| multiplier.set(e.value())
        }
        ErrorBoundary {
            handle_error: |errors: ErrorContext| {
                rsx! {
                    div {
                        "Oops, we encountered an error. Please report {errors:?} to the developer of this application"
                    }
                    button {
                        onclick: move |_| {
                            errors.clear_errors();
                        },
                        "try again"
                    }
                }
            },
            Counter {
                multiplier
            }
        }
    }
}

#[component]
fn Counter(multiplier: ReadSignal<String>) -> Element {
    let multiplier_parsed = multiplier().parse::<usize>()?;
    let mut count = use_signal(|| multiplier_parsed);
    rsx! {
        button {
            onclick: move |_| {
                let multiplier_parsed = multiplier().parse::<usize>()?;
                *count.write() *= multiplier_parsed;
                Ok(())
            },
            "{count}x{multiplier}"
        }
    }
}