Browser Panic Hook

A go-to panic handler for WebAssembly based Rust application is console_error_panic_hook, which does the job, but isn't really end user-friendly.

In the case of running the WebAssembly application as a frontend application, we do have the browser which can help interacting with the user, so why not leverage it.

That is what this crate does, failing in style:

Presentation

The panic is also always still logged to the console as a first step. As it might happen that running the panic handler might run into trouble as well.

Next, it depends on what presentation mode you register. There is a Basic one, which takes over the body of the document and renders some simple HTML structure, including some CSS class names. In combination with an existing stylesheet, this may already be enough.

The CustomBody mode allow to provide a function, which renders the full body. This can be used to create more customized output for frameworks like PatternFly or Bootstrap.

Everything boils down to a trait (PresentationMode), for which you can also provide a custom implementation.

Just note, your application is already panicking, so you should try to keep it simple, or rely on some basic browser functionality.

Usage

In any case, you need to add this crate a dependency to your project, and register the panic handler. Registering can be as easy as:

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

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

You can also use a more customized variant:

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(())
}

More complete examples can be found in the examples folder.

Yew

Yew already sets a default panic hook. This can be overridden using:

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(())
}

Future improvements

Additional improvements could be done, like:

• Call a diagnostic endpoint with the panic information
• Create a mode which overlays instead of replaces the HTML body
• Allow adding additional, application specific, HTML (like "click here to report the error")
• For sure some more …