mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-12-18 00:23:07 +00:00
85 lines
3.3 KiB
Rust
85 lines
3.3 KiB
Rust
//! Example: Error Handling
|
|
//! ------------------------
|
|
//!
|
|
//! Error handling in Dioxus comes in a few flavors. Because Dioxus is a Rust project, Options and Results are obviously
|
|
//! the go-to way of wrapping possibly-errored data. However, if a component fails when "unwrapping," everything will crash,
|
|
//! the page will deadlock, and your users will be sad.
|
|
//!
|
|
//! So, obviously, you need to handle your errors.
|
|
//!
|
|
//! Fortunately, it's easy to avoid panics, even during quick prototyping.
|
|
//!
|
|
//! Here are a few strategies:
|
|
//! - Leverage the ability to return "None" and propagate None directly
|
|
//! - Instead of propagating "None" manually, use the "?" syntax sugar
|
|
//! - Convert Results into Options with .ok()
|
|
//! - Manually display a separate screen by matching on Options/Results
|
|
//!
|
|
//! There *are* plans to add helpful screens for when apps completely panic in Wasm. However, you should really try to
|
|
//! avoid panicking.
|
|
use dioxus::prelude::*;
|
|
fn main() {}
|
|
|
|
/// This is one way to go about error handling (just toss things away with unwrap).
|
|
/// However, if you get it wrong, the whole app will crash.
|
|
/// This is pretty flimsy.
|
|
static App: FC<()> = |cx, props| {
|
|
let data = get_data().unwrap();
|
|
cx.render(rsx!( div { "{data}" } ))
|
|
};
|
|
|
|
/// This is a pretty verbose way of error handling
|
|
/// However, it's still pretty good since we don't panic, just fail to render anything
|
|
static App1: FC<()> = |cx, props| {
|
|
let data = match get_data() {
|
|
Some(data) => data,
|
|
None => return None,
|
|
};
|
|
cx.render(rsx!( div { "{data}" } ))
|
|
};
|
|
|
|
/// This is an even better form of error handling.
|
|
/// However, it _does_ make the component go blank, which might not be desirable.
|
|
///
|
|
/// This type of error handling is good when you have "selectors" that produce Some/None based on some state that's
|
|
/// already controlled higher in the tree. i.e. displaying a "Username" in a component that should only be shown if
|
|
/// a user is logged in.
|
|
///
|
|
/// Dioxus will throw an error in the console if the None-path is ever taken.
|
|
static App2: FC<()> = |cx, props| {
|
|
let data = get_data()?;
|
|
cx.render(rsx!( div { "{data}" } ))
|
|
};
|
|
|
|
/// This is top-tier error handling since it displays a failure state.
|
|
///
|
|
/// However, the error is lacking in context.
|
|
static App3: FC<()> = |cx, props| match get_data() {
|
|
Some(data) => cx.render(rsx!( div { "{data}" } )),
|
|
None => cx.render(rsx!( div { "Failed to load data :(" } )),
|
|
};
|
|
|
|
/// For errors that return results, it's possible to short-circuit the match-based error handling with `.ok()` which converts
|
|
/// a Result<T, V> into an Option<T> and lets you abort rendering by early-returning `None`
|
|
static App4: FC<()> = |cx, props| {
|
|
let data = get_data_err().ok()?;
|
|
cx.render(rsx!( div { "{data}" } ))
|
|
};
|
|
|
|
/// This is great error handling since it displays a failure state... with context!
|
|
///
|
|
/// Hopefully you'll never need to display a screen like this. It's rather bad taste
|
|
static App5: FC<()> = |cx, props| match get_data_err() {
|
|
Ok(data) => cx.render(rsx!( div { "{data}" } )),
|
|
Err(c) => cx.render(rsx!( div { "Failed to load data: {c}" } )),
|
|
};
|
|
|
|
// this fetching function produces "nothing"
|
|
fn get_data() -> Option<String> {
|
|
None
|
|
}
|
|
|
|
// this fetching function produces "nothing"
|
|
fn get_data_err() -> Result<String, &'static str> {
|
|
Result::Err("Failed!")
|
|
}
|