Merge pull request #14 from koto-lang/display-error-on-panic

Display an error if the playground panics"
koto-lang · May 15, 2024 · 733a1e9 · 733a1e9
2 parents 0227923 + 7b03040
commit 733a1e9
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 10 deletions.
diff --git a/website/playground/src/components/share.rs b/website/playground/src/components/share.rs
@@ -6,7 +6,7 @@ use {
     gloo_net::http::Request,
     gloo_utils::window,
     js_sys::encode_uri_component,
-    serde::{Deserialize, Serialize},
+    serde::Deserialize,
     wasm_bindgen::prelude::*,
     web_sys::Element,
     yew::{context::ContextHandle, prelude::*},
@@ -63,7 +63,11 @@ impl Component for Share {
         ctx.link().send_future({
             let script = ctx.props().script.clone();
             async move {
-                match Request::post("/play/create-gist").body(&script).send().await {
+                match Request::post("/play/create-gist")
+                    .body(&script)
+                    .send()
+                    .await
+                {
                     Ok(response) => match response.json::<CreateGistResponse>().await {
                         Ok(gist) => Msg::GistCreated(gist),
                         Err(error) => Msg::GistResponseError {
@@ -260,11 +264,6 @@ extern "C" {
     pub fn show_modal(element: Element);
 }
 
-#[derive(Serialize)]
-struct CreateGistRequest {
-    script: String,
-}
-
 #[derive(Deserialize)]
 pub struct CreateGistResponse {
     id: String,

diff --git a/website/playground/src/main.rs b/website/playground/src/main.rs
@@ -5,15 +5,16 @@ mod stored_value;
 
 use {
     components::playground::Playground,
-    console_error_panic_hook::set_once as set_panic_hook,
-    gloo_utils::{document, window},
+    gloo_utils::{body, document, window},
+    js_sys::encode_uri_component,
     wasm_bindgen::prelude::*,
+    web_sys::console,
     yew::prelude::*,
 };
 
 fn main() {
     wasm_logger::init(wasm_logger::Config::default());
-    set_panic_hook();
+    yew::set_custom_panic_hook(Box::new(custom_panic_hook));
 
     register_koto_editor_mode();
 
@@ -67,3 +68,49 @@ fn set_local_storage_value(id: &str, value: &str) {
         .set(id, value)
         .ok();
 }
+
+fn custom_panic_hook(info: &std::panic::PanicInfo) {
+    let message = info.to_string(); // Get the panic message
+    let backtrace = info
+        .location()
+        .unwrap_or_else(|| panic!("Failed to get location")); // Get the backtrace location
+
+    let error_message = format!("{message}\n{backtrace:?}");
+
+    // Create a GitHub issue link
+    let issue_body = format!(
+        ">> Please describe what you were doing when this error occurred <<
+
+**Error:**
+```
+{error_message}
+```"
+    );
+    let issue_url = format!(
+        "https://github.com/koto-lang/koto.dev/issues/new?title=Playground+Crash&body={}",
+        encode_uri_component(&issue_body)
+    );
+
+    // Log the error in the console
+    console::log_1(&error_message.into());
+
+    // Update the HTML body
+    let html = format!(
+        "
+<div class='uk-container uk-padding'>
+    <div class='uk-card uk-card-default uk-margin'>
+        <div class='uk-card-body uk-alert-primary uk-text-lead uk-text-danger uk-text-center'>
+            An unexpected error occurred. 
+            <br/>
+            Please <a class='uk-link-text' href='{issue_url}' target='_blank'>click here</a> to report this issue.
+        </div>
+    </div>
+</div>
+",
+    );
+    if let Some(wrapper) = document().get_element_by_id("playground-wrapper") {
+        wrapper.set_inner_html(&html);
+    } else {
+        body().set_inner_html(&html);
+    }
+}