Function ErrorBoundary

pub fn ErrorBoundary(props: ErrorBoundaryProps) -> Result<VNode, RenderError>

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. Any errors passed up from a child will be caught by the nearest error boundary.

Example

fn App() -> Element {
    rsx! {
        ErrorBoundary {
            handle_error: |errors: ErrorContext| rsx! { "Oops, we encountered an error. Please report {errors:?} to the developer of this application" },
            Counter {
                multiplier: "1234"
            }
        }
    }
}

#[component]
fn Counter(multiplier: String) -> Element {
    // You can bubble up errors with `?` inside components
    let multiplier_parsed = multiplier.parse::<usize>()?;
    let mut count = use_signal(|| multiplier_parsed);
    rsx! {
        button {
            // Or inside event handlers
            onclick: move |_| {
                let multiplier_parsed = multiplier.parse::<usize>()?;
                *count.write() *= multiplier_parsed;
                Ok(())
            },
            "{count}x{multiplier}"
        }
    }
}

Usage

Error boundaries are an easy way to handle errors in your application. They are similar to try/catch in JavaScript, but they only catch errors in the tree below them. 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.