pub fn unlocalized_development_default() -> Self {
        // Because this is an unlocalized, extremely simple default, we don't care about
        // capabilities or positioning
        Self::new(|cx, err, _, pos| {
            match err {
                // Special case for 404 due to its frequency
                ClientError::ServerError { status, .. } if status == 404 => (
                    view! { cx,
                        title { "Page not found" }
                    },
                    view! { cx,
                        div(
                            style = r#"
display: flex;
justify-content: center;
align-items: center;
height: 95vh;
width: 100%;
"#
                        ) {
                            main(
                                style = r#"
display: flex;
flex-direction: column;
border: 1px solid black;
border-radius: 0.5rem;
max-width: 36rem;
margin: 1rem;
"#
                            ) {
                                h3(
                                    style = r#"
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
width: 100%;
padding-bottom: 1rem;
border-bottom: 1px solid black;
margin-top: 1rem;
margin-bottom: 1rem;
"#
                                ) {
                                    span(style = "padding-left: 1rem;") { "Page not found!" }
                                }
                                div(
                                    style = r#"
padding: 1rem;
padding-top: 0;
margin-top: 1rem;
margin-bottom: 1rem;
"#
                                ) {
                                    span {
                                        "Uh-oh, that page doesn't seem to exist! Perhaps you forgot to add it to your "
                                        code { "PerseusApp" }
                                        "?"
                                    }
                                }
                            }
                        }

                    },
                ),
                ClientError::Panic(panic_msg) => (
                    // Panics are popups
                    View::empty(),
                    view! { cx,
                            div(
                                style = r#"
position: fixed;
bottom: 0;
right: 0;
background-color: #f87171;
color: white;
margin: 1rem;
border-radius: 0.5rem;
max-width: 30rem;
"#
                            ) {
                                h2(
                                    style = r#"
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
width: 100%;
padding-bottom: 1rem;
border-bottom: 1px solid white;
margin-top: 1rem;
margin-bottom: 1rem;
"#
                                ) {
                                    span(style = "padding-left: 1rem;") { "Critical error!" }
                                }
                                div(
                                    style = r#"
padding: 1rem;
padding-top: 0;
margin-top: 1rem;
"#
                                ) {
                                    p { "Your app has panicked! You can see the panic message below." }
                                    pre(
                                        style = r#"
background-color: #f59e0b;
padding: 1rem;
margin-top: 1rem;
border-radius: 0.5rem;
white-space: pre-wrap;
word-wrap: break-word;
"#
                                    ) {
                                        (panic_msg)
                                    }
                                    // This can happen with HSR, and it's a good idea to help the user out a bit
                                    // TODO Should there be more hints here?
                                    (if panic_msg.contains("cannot modify the panic hook from a panicking thread") {
                                        view! { cx,
                                            p {
                                                i { "It looks like the error is about the panicking hook itself, which means the original panic has been overidden, possibly by hot state reloading in development. Reloading the page might show you the original panic message." }
                                            }
                                        }
                                    } else {
                                        View::empty()
                                    })
                                }
                            }
                    },
                ),
                err => {
                    let err_msg = fmt_err(&err);

                    // This will be placed in either a popup or across the page
                    let inner_view = view! { cx,
                        div(
                            style = r#"
background-color: #f87171;
color: white;
margin: 1rem;
border-radius: 0.5rem;
max-width: 30rem;
"#
                        ) {
                            h2(
                                style = r#"
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
width: 100%;
padding-bottom: 1rem;
border-bottom: 1px solid white;
margin-top: 1rem;
margin-bottom: 1rem;
"#
                            ) {
                                span(style = "padding-left: 1rem;") { "Error!" }
                            }
                            div(
                                style = r#"
padding: 1rem;
padding-top: 0;
margin-top: 1rem;
"#
                            ) {
                                p { "Your app encountered an error, you can see the details below." }
                                pre(
                                    style = r#"
background-color: #f59e0b;
padding: 1rem;
margin-top: 1rem;
border-radius: 0.5rem;
white-space: pre-wrap;
word-break: break-word;
"#
                                ) {
                                    (err_msg)
                                }
                            }
                        }
                    };

                    (
                        view! { cx,
                                title { "Error" }
                        },
                        match pos {
                            ErrorPosition::Page => view! { cx,
                                div(
                                    style = r#"
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 95vh;
width: 100%;
"#
                                ) {
                                    (inner_view)
                                }
                            },
                            ErrorPosition::Popup => view! { cx,
                                div(
                                    style = r#"
position: fixed;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
"#
                                ) {
                                    (inner_view)
                                }
                            },
                            ErrorPosition::Widget => view! { cx,
                                div(
                                    style = r#"
display: flex;
flex-direction: column;
"#
                                ) {
                                    (inner_view)
                                }
                            },
                        },
                    )
                }
            }
        })
    }
Force-sets the unlocalized defaults. If you really want to use the
default error pages in production, this will allow you to (where
they would normally fail if you simply specified nothing).

**Warning:** these defaults are completely unlocalized, unstyled, and
intended for development! You will be able to use these by not
specifying any `.error_views()` on your `PerseusApp` in development,
and you should only use this function if you're doing production
testing of Perseus, and you don't particularly want to write
your own error pages.

Note that this is used throughout the Perseus examples for brevity.
packages/perseus/src/error_views.rs