Update examples, add css

examples/error_handle.rs

@@ -1,3 +1,10 @@
+//! This example showcases how to use the ErrorBoundary component to handle errors in your app.
+//!
+//! The ErrorBoundary component is a special component that can be used to catch panics and other errors that occur.
+//! By default, Dioxus will catch panics during rendering, async, and handlers, and bubble them up to the nearest
+//! error boundary. If no error boundary is present, it will be caught by the root error boundary and the app will
+//! render the error message as just a string.
+
 use dioxus::{dioxus_core::CapturedError, prelude::*};
 
 fn main() {
@@ -7,7 +14,10 @@ fn main() {
 fn app() -> Element {
     rsx! {
         ErrorBoundary {
-            handle_error: |error: CapturedError| rsx! {"Found error {error}"},
+            handle_error: |error: CapturedError| rsx! {
+                h1 { "An error occurred" }
+                pre { "{error:#?}" }
+            },
             DemoC { x: 1 }
         }
     }
@@ -15,11 +25,18 @@ fn app() -> Element {
 
 #[component]
 fn DemoC(x: i32) -> Element {
-    let result = Err("Error");
-
-    result.throw()?;
-
     rsx! {
-        h1 { "{x}" }
+        h1 { "Error handler demo" }
+        button {
+            onclick: move |_| {
+                // Create an error
+                let result: Result<Element, &str> = Err("Error");
+
+                // And then call `throw` on it. The `throw` method is given by the `Throw` trait which is automatically
+                // imported via the prelude.
+                _ = result.throw();
+            },
+            "Click to throw an error"
+        }
     }
 }