Function leptos::ErrorBoundary

source · 
pub fn ErrorBoundary<F, IV>(props: ErrorBoundaryProps<F, IV>) -> impl IntoView
where
    F: Fn(RwSignal<Errors>) -> IV + 'static,
    IV: IntoView,
Expand description

When you render a Result<_, _> in your view, in the Err case it will render nothing, and search up through the view tree for an <ErrorBoundary/>. This component lets you define a fallback that should be rendered in that error case, allowing you to handle errors within a section of the interface.

let (value, set_value) = create_signal(Ok(0));
let on_input =
    move |ev| set_value.set(event_target_value(&ev).parse::<i32>());

view! {
  <input type="text" on:input=on_input/>
  <ErrorBoundary
    fallback=move |_| view! { <p class="error">"Enter a valid number."</p>}
  >
    <p>"Value is: " {move || value.get()}</p>
  </ErrorBoundary>
}

§Interaction with <Suspense/>

If you use this with a <Suspense/> or <Transition/> component, note that the <ErrorBoundary/> should go inside the <Suspense/>, not the other way around, if there’s a chance that the <ErrorBoundary/> will begin in the error state. This is a limitation of the current design of the two components and the way they hydrate. Placing the <ErrorBoundary/> outside the <Suspense/> means that it is rendered on the server without any knowledge of the suspended view, so it will always be rendered on the server as if there were no errors, but might need to be hydrated with errors, depending on the actual result.

ⓘ
view! {
  <Suspense fallback=move || view! { <p>"Loading..."</p> }>
    <ErrorBoundary fallback=|errors| view! { <ErrorTemplate errors=errors/>}>
      {move || {
  /* etc. */

§Beginner’s Tip: ErrorBoundary Requires Your Error To Implement std::error::Error.

ErrorBoundary requires your Result<T,E> to implement IntoView. Result<T,E> only implements IntoView if E implements std::error::Error. So, for instance, if you pass a Result<T,String> where T implements IntoView and attempt to render the error for the purposes of ErrorBoundary you’ll get a compiler error like this.

ⓘ
error[E0599]: the method `into_view` exists for enum `Result<ViewableLoginFlow, String>`, but its trait bounds were not satisfied
   --> src/login.rs:229:32
    |
229 |                     err => err.into_view(),
    |                                ^^^^^^^^^ method cannot be called on `Result<ViewableLoginFlow, String>` due to unsatisfied trait bounds
    |
    = note: the following trait bounds were not satisfied:
            `<&Result<ViewableLoginFlow, std::string::String> as FnOnce<()>>::Output = _`
            which is required by `&Result<ViewableLoginFlow, std::string::String>: leptos::IntoView`
   ... more notes here ...

For more information about how to easily implement Error see thiserror

§Required Props

  • children: Children
    • The components inside the tag which will get rendered
  • fallback: [F]
    • A fallback that will be shown if an error occurs.