浏览器panic钩子

对于基于WebAssembly的Rust应用程序，一个常用的panic处理器是console_error_panic_hook，它能够完成任务，但并不真正适合最终用户。

在将WebAssembly应用程序作为前端应用程序运行的情况下，我们确实有浏览器可以帮助与用户交互，所以为什么不利用它呢。

这正是这个crate所做的事情，以优雅的方式失败

展示

panic始终作为第一步记录到控制台。因为运行panic处理器也可能遇到麻烦。

接下来，它取决于你注册的展示模式。有一个Basic模式，它接管文档的主体并渲染一些简单的HTML结构，包括一些CSS类名。与现有的样式表结合使用，这可能已经足够了。

CustomBody模式允许提供一个函数来渲染整个主体。这可以用来为PatternFly或Bootstrap之类的框架创建更定制的输出。

一切归结为一个特质（PresentationMode），你也可以为其提供自定义实现。

请注意，你的应用程序已经panic了，所以你应该尽量保持简单，或者依赖一些基本的浏览器功能。

用法

无论如何，你需要将这个crate添加为你的项目的依赖项，并注册panic处理器。注册可以像这样简单：

pub fn main() -> Result<(), JsValue> {
    browser_panic_hook::set_once_default();

    // run your application ...
    Ok(())
}

你也可以使用一个更定制的变体

pub fn main() -> Result<(), JsValue> { 
    browser_panic_hook::set_once(|| {
        browser_panic_hook::CustomBody(Box::new(|details| {
            // render new body
            format!("…")
        }))
    });
 
    // run your application ...
    Ok(())
}

更完整的示例可以在示例文件夹中找到。

Yew

Yew已经设置了一个默认的panic钩子。可以使用以下方法覆盖它：

pub fn main() -> Result<(), JsValue> {
    // provide a custom panic hook
    yew::set_custom_panic_hook(Basic.into_panic_hook());
    // run the application
    yew::Renderer::<app::Application>::new().render();
    Ok(())
}

未来的改进

可以进一步改进，例如：

• 调用带有panic信息的诊断端点
• 创建一个覆盖而不是替换HTML主体的模式
• 允许添加额外的、特定于应用程序的HTML（如“点击此处报告错误”）
• 当然还有更多...