Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve error handling guide #437

Merged
merged 2 commits into from
Feb 8, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs-src/0.6/src/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
- [Managing State](essentials/state/index.md)
- [Async](essentials/async/index.md)
- [Breaking Out](essentials/breaking/index.md)
- [Error Handling](essentials/error_handling/index.md)

---

Expand Down Expand Up @@ -65,7 +66,6 @@
- [Static Site Generation](guides/fullstack/static_site_generation.md)
- [Publishing](cookbook/publishing.md)
- [Anti-patterns](cookbook/antipatterns.md)
- [Error Handling](cookbook/error_handling.md)
- [Integrations](cookbook/integrations/index.md)
- [Logging](cookbook/integrations/logging.md)
- [Internationalization](cookbook/integrations/internationalization.md)
Expand Down
79 changes: 0 additions & 79 deletions docs-src/0.6/src/cookbook/error_handling.md

This file was deleted.

1 change: 0 additions & 1 deletion docs-src/0.6/src/cookbook/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ There are a few different sections in the cookbook:

- [Publishing](publishing.md) will teach you how to present your app in a variety of delicious forms.
- Explore the [Anti-patterns](antipatterns.md) section to discover what ingredients to avoid when preparing your application.
- Within [Error Handling](error_handling.md), we'll master the fine art of managing spoiled ingredients in Dioxus.
- Take a culinary journey through [State management](state/index.md), where we'll explore the world of handling local, global, and external state in Dioxus.
- [Integrations](integrations/index.md) will guide you how to seamlessly blend external libraries into your Dioxus culinary creations.
- [Testing](testing.md) explains how to examine the unique flavor of Dioxus-specific features, like components.
Expand Down
55 changes: 55 additions & 0 deletions docs-src/0.6/src/essentials/error_handling/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# Error handling

A selling point of Rust for web development is the reliability of always knowing where errors can occur and being forced to handle them. Dioxus provides ErrorBoundarys to help you handle errors in a declarative way. This guide will teach you how to use ErrorBoundaries and other error handling strategies in Dioxus.

## Returning Errors from Components

Astute observers might have noticed that `Element` is actually a type alias for `Result<VNode, RenderError>`. The `RenderError` type can be created from an error type that implements `Error`. You can use `?` to bubble up any errors you encounter while rendering to the nearest error boundary:

```rust
{{#include src/doc_examples/error_handling.rs:throw_error}}
```

## Capturing errors with ErrorBoundaries

When you return an error from a component, it gets sent to the nearest error boundary. That error boundary can then handle the error and render a fallback UI with the handle_error closure:

```rust
{{#include src/doc_examples/error_handling.rs:capture_error}}
```

## Throwing Errors from Event Handlers

In addition to components, you can throw errors from event handlers. If you throw an error from an event handler, it will bubble up to the nearest error boundary just like a component:

```rust
{{#include src/doc_examples/error_handling.rs:throw_error_event_handler}}
```

## Adding context to errors

You can add additional context to your errors with the [`Context`](https://docs.rs/dioxus/0.6/dioxus/prelude/trait.Context.html) trait. Calling `context` on a `Result` will add the context to the error variant of the `Result`:

```rust, no_run
{{#include src/doc_examples/error_handling.rs:add_context}}
```

If you need some custom UI for the error message, you can call `show` on a result to attach an Element to the error variant. The parent error boundary can choose to render this element instead of the default error message:

```rust, no_run
{{#include src/doc_examples/error_handling.rs:show}}
```

## Local Error Handling

If you need more fine-grained control over error states, you can store errors in reactive hooks and use them just like any other value. For example, if you need to show a phone number validation error, you can store the error in a memo and show it below the input field if it is invalid:

```rust, no_run
{{#include src/doc_examples/error_handling.rs:phone_number_validation}}
```

```inject-dioxus
DemoFrame {
error_handling::PhoneNumberValidation {}
}
```
2 changes: 2 additions & 0 deletions docs-src/0.6/src/essentials/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,5 @@ This section will guide you through key concepts in Dioxus:
- [Breaking Out](breaking/index.md) will teach you how to break out of Dioxus' rendering model to run JavaScript or interact with the DOM directly with `web-sys`.

- [Async](async/index.md) will teach you how to integrate async tasks with Dioxus and how to handle loading states while waiting for async tasks to finish.

- [Error Handling](error_handling/index.md) will teach you how to throw and handle errors in Dioxus.
2 changes: 1 addition & 1 deletion docs-src/0.6/src/reference/hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ This is only possible because the two hooks are always called in the same order,

1. Hooks may be only used in components or other hooks (we'll get to that later).
2. On every call to a component function.
3. The same hooks must be called (except in the case of early returns, as explained later in the [Error Handling chapter](../cookbook/error_handling.md)).
3. The same hooks must be called (except in the case of early returns, as explained later in the [Error Handling chapter](../essentials/error_handling/index.md)).
4. In the same order.
5. Hook names should start with `use_` so you don't accidentally confuse them with regular
functions (`use_signal()`, `use_signal()`, `use_resource()`, etc...).
Expand Down
Loading