Compare commits

...

2 Commits

Author SHA1 Message Date
xfy
2b048b94a3 fix(utils): sleep_ms 的 cfg guard 对齐 feature 模型,修复 web-only 构建失败
Some checks failed
CI / check (push) Has been cancelled
CI / build (push) Has been cancelled
sleep_ms 原用 #[cfg(not(target_arch = "wasm32"))] guard tokio::time::sleep,
但 tokio 是 server-only 的 optional 依赖。此 guard 会在「非 wasm32 主机 + 仅
web feature」组合(如 cargo build --no-default-features --features web)下
误激活,此时 tokio 未引入,导致编译失败。

该 bug 长期被 [dev-dependencies] tokio 掩盖——cargo test / 开发构建总能拿到
tokio,只有发布/生产构建(排除 dev-deps)才暴露。符合 AGENTS.md 第 1 条
dual-target gating 标准:触及 server-only 依赖的代码必须用 #[cfg(feature = "server")]
而非 target_arch 区分。

修复:tokio 版本改为 #[cfg(all(feature = "server", not(target_arch = "wasm32")))],
并为无效构建组合「非 wasm32 且非 server」补一个 panic stub(该组合不是有效部署
目标,web feature 真实构建目标即 wasm32;stub 仅保证符号可编译,运行时不会触发)。

调用点 runner.rs 的 server 占位分支(通过 sleep_ms 继承同一问题)无需改动——
它只在 server target 下编译运行,sleep_ms 修复后其调用自然可编译。
2026-07-24 10:52:51 +08:00
xfy
5a10b07bff fix(router): 修复错误冒泡触发的 404 页「返回首页」卡死
PostDetail 对不存在的 slug 抛出 ServerFnError(404) 后,ErrorLayout 的
ErrorBoundary 捕获错误并在 fallback 渲染 NotFound。此时 ErrorBoundary 持有错误,
根据 Dioxus 0.7.9 的渲染逻辑(有错则永远渲染 fallback,不渲染 children/Outlet),
点击 Link 切换路由虽更新了 URL,但页面仍停留在 fallback,表现为「URL 变了页面不变」。

根因:ErrorBoundary 捕获错误后不会自动恢复,必须显式调用 clear_errors() 才能
重新渲染 children。原实现用 Link 导航无法干预点击时机清除错误。

修复:NotFound 与 ErrorLayout 的通用错误 fallback 中,「返回首页」改用 button,
onclick 内先 clear_errors() 清除错误边界,再 navigator().push 导航。
- NotFound 通过 try_consume_context::<ErrorContext>() 获取可能存在的错误边界:
  路由匹配命中的 404 无错误(clear_errors 是 no-op),错误冒泡的 404 才需清除。
- ErrorLayout 的 handle_error 闭包参数本身就是 ErrorContext,clone 后在按钮内使用。
2026-07-24 10:34:18 +08:00
3 changed files with 58 additions and 9 deletions

View File

@ -6,13 +6,24 @@
//! 该页面为静态展示页面,不发起任何 server function 调用。
use dioxus::prelude::*;
use dioxus::router::components::Link;
use crate::router::Route;
/// 404 页面组件,对应兜底路由 `/:..segments`。
///
/// 展示大号的装饰性 404 数字、状态标签、错误说明以及返回首页的链接。
///
/// # 两种命中路径
/// 本组件在两种完全不同的机制下被渲染:
/// 1. **路由匹配** —— 访问任意未命中路径Router 命中 catch-all `Route::NotFound`
/// 此时 `ErrorBoundary` **无错误**,本组件作为 childrenOutlet正常渲染。
/// 2. **错误冒泡** —— 如 `PostDetail` 对不存在的 slug 抛出 `ServerFnError(404)`
/// `ErrorLayout` 的 `ErrorBoundary` 捕获后在 fallback 里渲染本组件。
///
/// 「返回首页」必须在导航前清除可能存在的错误边界,否则场景 2 会卡死:
/// ErrorBoundary 持有错误时不渲染 childrenOutlet路由虽切到 `Home`
/// 页面仍停留在 fallback本组件表现为「URL 变了但页面不变」。
/// 场景 1 下没有错误,`clear_errors` 是 no-op。
#[component]
pub fn NotFound(segments: Vec<String>) -> Element {
let _ = segments;
@ -51,10 +62,19 @@ pub fn NotFound(segments: Vec<String>) -> Element {
"这个页面似乎走丢了,或者从未存在过。"
}
// 返回首页
Link {
to: Route::Home {},
class: "group inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-paper-primary bg-paper-entry border border-paper-border rounded-lg hover:border-paper-secondary hover:bg-paper-border transition-all",
// 返回首页:用 onclick 先清除错误边界再导航。
// 直接用 Link 无法干预点击时机,故改为按钮 + 命令式导航。
// 详见组件顶部文档:场景 2错误冒泡下若不清除错误
// ErrorBoundary 会一直渲染 fallback路由切换后页面仍卡在本页。
button {
r#type: "button",
onclick: move |_| {
if let Some(ctx) = try_consume_context::<ErrorContext>() {
ctx.clear_errors();
}
let _ = dioxus::router::navigator().push(Route::Home {});
},
class: "group inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-paper-primary bg-paper-entry border border-paper-border rounded-lg hover:border-paper-secondary hover:bg-paper-border transition-all cursor-pointer",
svg {
xmlns: "http://www.w3.org/2000/svg",
width: "16",

View File

@ -129,6 +129,11 @@ fn ErrorLayout() -> Element {
rsx! {
ErrorBoundary {
handle_error: move |err: ErrorContext| {
// 克隆一份错误边界句柄,供 fallback 内的「返回首页」按钮清除错误。
// ErrorContext 内部是 Rc<RefCell<...>>clone 廉价。
// 不清除就导航会卡死ErrorBoundary 持有错误时永远渲染 fallback
// 不渲染 childrenOutlet导致 URL 变了但页面不变。
let err_ctx = err.clone();
// Commit the status code on the server side
#[cfg(feature = "server")]
{
@ -202,9 +207,18 @@ fn ErrorLayout() -> Element {
"抱歉,加载页面时出现了一些错误,请稍后再试。"
}
// CTA: Link back to home, styled with subtle border & background transition
dioxus::router::components::Link {
to: Route::Home {},
// CTA: 清除错误边界后命令式导航回首页。
// 必须用按钮而非 Link —— Link 无法在导航前清除错误,
// 会导致 ErrorBoundary 卡在 fallback页面不随路由切换更新。
button {
r#type: "button",
onclick: {
let err_ctx = err_ctx.clone();
move |_| {
err_ctx.clear_errors();
let _ = dioxus::router::navigator().push(Route::Home {});
}
},
class: "group inline-flex items-center gap-2 px-6 py-2.5 text-sm font-medium text-paper-primary bg-paper-theme border border-paper-border rounded-full hover:border-paper-secondary hover:bg-paper-border transition-all duration-200 cursor-pointer shadow-sm active:scale-[0.98]",
svg {
xmlns: "http://www.w3.org/2000/svg",

View File

@ -35,11 +35,26 @@ pub async fn sleep_ms(ms: u32) {
}
/// 异步睡眠指定毫秒数(原生 tokio 版本)。
#[cfg(not(target_arch = "wasm32"))]
///
/// 仅在 `server` feature 启用且非 wasm32 目标下编译。`tokio` 是 server-only 的
/// optional 依赖(见 Cargo.toml不可用 `#[cfg(not(target_arch = "wasm32"))]`——
/// 那样会在「非 wasm32 主机 + 仅 web feature」组合下误激活此时 tokio 未引入,
/// 导致编译失败(此 bug 曾被 `[dev-dependencies] tokio` 掩盖,发布构建才暴露)。
#[cfg(all(feature = "server", not(target_arch = "wasm32")))]
pub async fn sleep_ms(ms: u32) {
tokio::time::sleep(std::time::Duration::from_millis(ms as u64)).await;
}
/// `sleep_ms` 的占位 stub仅用于「非 wasm32 且非 server」的无效构建组合。
///
/// 此组合(如非 wasm32 主机执行 `cargo build --features web`)不是有效部署目标——
/// web feature 的真实构建目标就是 wasm32会走上面的 JS setTimeout 分支。
/// 此 stub 仅保证符号可编译,永远不会在有效运行时被调用;若被调用说明部署配置错误。
#[cfg(all(not(feature = "server"), not(target_arch = "wasm32")))]
pub async fn sleep_ms(_ms: u32) {
panic!("sleep_ms 在非 wasm32 且非 server 的无效构建组合下被调用:请检查 feature 配置");
}
/// 获取当前时间戳(毫秒)。
///
/// WASM 端使用 `js_sys::Date::now()`,服务端回退到 `chrono::Utc`。