1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
use crateChildren;
use ;
use ;
use ;
/// 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.
///
/// ```
/// # use leptos_reactive::*;
/// # use leptos_macro::*;
/// # use leptos_dom::*; use leptos::*;
/// # let runtime = create_runtime();
/// # if false {
/// 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>
/// }
/// # ;
/// # }
/// # runtime.dispose();
/// ```
///
/// ## 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.
///
/// ```rust,ignore
/// 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](https://docs.rs/leptos/latest/leptos/trait.IntoView.html).
/// `Result<T,E>` only implements `IntoView` if `E` implements [std::error::Error](https://doc.rust-lang.org/std/error/trait.Error.html).
/// So, for instance, if you pass a `Result<T,String>` where `T` implements [IntoView](https://docs.rs/leptos/latest/leptos/trait.IntoView.html)
/// and attempt to render the error for the purposes of `ErrorBoundary` you'll get a compiler error like this.
///
/// ```rust,ignore
/// 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](https://docs.rs/thiserror/latest/thiserror/)