feat: implement custom bug report forms (#2)

.gitignore

@@ -1 +1,33 @@
-/target
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+/Cargo.lock
+
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Generated by Trunk
+dist/
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# Some people use VSCode
+/.vscode/
+
+# Some people use IntelliJ with Rust
+/.idea/
+*.iml
+
+# Some people use pre-commit
+.pre-commit-config.yaml
+.pre-commit-config.yml
+
+# MSVC Windows builds of rustc generate these, which store debugging information
+*.pdb
+
+# Some people have Apple
+.DS_Store
+
+# Generated on wasm-pack failure
+**/unsupported.js

CHANGELOG.md

@@ -1,9 +1,26 @@
 # Changelog
 
+<!-- Instructions
+
 This changelog follows the patterns described here: <https://keepachangelog.com/en/1.0.0/>.
 
 Subheadings to categorize changes are `added, changed, deprecated, removed, fixed, security`.
 
+-->
+
+## Unreleased
+
+## 0.2.0
+
+### added
+
+- `FORM_TEXTAREA_ID` is now public, which has the element ID of the stack trace text area.
+- `FORM_SUBMIT_ID` is now public, which has the element ID of the submit button.
+
+### changed
+
+- `set_hook_with` now takes the additional argument of an HTML form structure. The previous, default form can still be used with `web_panic_report::set_default_hook_with`, however requires the new (default) cargo feature: `default-form`.
+
 ## 0.1.1
 
 ### changed

Cargo.toml

@@ -1,10 +1,10 @@
 [package]
 name = "web_panic_report"
 description = "A panic hook which replaces an HTML element with a bug report form."
-version = "0.1.1"
+version = "0.2.0"
 edition = "2021"
 license = "MIT OR Apache-2.0"
-repository = "https://github.com/vectorgameexperts/web_panic_report"
+repository = "https://github.com/loopystudios/web_panic_report"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 [dependencies]
@@ -20,3 +20,7 @@ web-sys = { version = "0.3", features = [
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3.42"
+
+[features]
+default = ["default-form"]
+default-form = []

Readme.md

@@ -6,8 +6,8 @@
 
 [![Discord](https://img.shields.io/discord/913957940560531456.svg?label=Loopy&logo=discord&logoColor=ffffff&color=ffffff&labelColor=000000)](https://discord.gg/zrjnQzdjCB)
 [![MIT/Apache 2.0](https://img.shields.io/badge/license-MIT%2FApache-blue.svg)](#license)
-[![Build status](https://github.com/vectorgameexperts/web_panic_report/workflows/CI/badge.svg)](https://github.com/vectorgameexperts/web_panic_report/actions)
-[![Dependency status](https://deps.rs/repo/github/vectorgameexperts/web_panic_report/status.svg)](https://deps.rs/repo/github/vectorgameexperts/web_panic_report)
+[![Build status](https://github.com/loopystudios/web_panic_report/workflows/CI/badge.svg)](https://github.com/loopystudios/web_panic_report/actions)
+[![dependency status](https://deps.rs/repo/github/loopystudios/web_panic_report/status.svg)](https://deps.rs/repo/github/loopystudios/web_panic_report)
 [![Crates.io](https://img.shields.io/crates/v/web_panic_report.svg)](https://crates.io/crates/web_panic_report)
 [![Docs](https://img.shields.io/docsrs/web_panic_report)](https://docs.rs/web_panic_report)
 
@@ -28,7 +28,7 @@ cargo install wasm-server-runner
 WASM_SERVER_RUNNER_CUSTOM_INDEX_HTML=examples/index.html cargo run --target wasm32-unknown-unknown --example simple
 ```
 
-There is also a web demo [available here](https://vectorgameexperts.github.io/web_panic_report).
+There is also a web demo [available here](https://loopystudios.github.io/web_panic_report).
 
 ![Demo](image.png)
 
@@ -59,13 +59,15 @@ Then, set the panic hook at the beginning of your program on web.
 ```rust
 fn main() {
     #[cfg(target_arch = "wasm32")]
-    web_panic_report::set_hook_with("my-container", |panic_info| {
+    web_panic_report::set_default_hook_with("my-container", |panic_info| {
         // Send the panic info to your backend here.
         // This is triggered when the user clicks "Send Report"
     });
 }
 ```
 
+You can also use a custom bug report form. See the [custom example](examples/custom.rs).
+
 ## Alternatives
 
 - [`console_error_panic_hook`](https://github.com/rustwasm/console_error_panic_hook) - Only outputs stack trace to the console.

examples/custom.rs

@@ -0,0 +1,28 @@
+/// This is called from a button on the web example to allow the user to trigger a panic.
+#[no_mangle]
+pub extern "C" fn trigger_panic() {
+    panic!("You triggered the panic!");
+}
+
+fn main() {
+    let my_form = format!(
+        r#"
+<div style="display: flex; flex-direction: column; width: 100%; height: 100%; background-color: white; color: red">
+    This is a custom panic form! The stack trace is hidden from users.
+    <textarea readonly id="{}" style="display: none;"></textarea>
+    <br />
+    <input id="{}" type="submit" value="See Panic Info" style="width: fit-content;" />
+</div>
+    "#,
+        web_panic_report::FORM_TEXTAREA_ID,
+        web_panic_report::FORM_SUBMIT_ID
+    );
+
+    // Set the panic hook at the beginning of your program
+    web_panic_report::set_hook_with("test-container", my_form, |panic_info| {
+        web_sys::window()
+            .unwrap()
+            .alert_with_message(&panic_info.display.to_string())
+            .unwrap();
+    });
+}

examples/simple.rs

@@ -1,13 +1,3 @@
-use wasm_bindgen::prelude::*;
-
-/// Nothing special here, we just want to call the Window `alert` function in our custom callback.
-/// This bindgen gives us access to that.
-#[wasm_bindgen]
-extern "C" {
-    /// The Window `alert` function.
-    fn alert(s: &str);
-}
-
 /// This is called from a button on the web example to allow the user to trigger a panic.
 #[no_mangle]
 pub extern "C" fn trigger_panic() {
@@ -16,10 +6,13 @@ pub extern "C" fn trigger_panic() {
 
 fn main() {
     // Set the panic hook at the beginning of your program
-    web_panic_report::set_hook_with("test-container", |panic_info| {
-        alert(&format!(
-            "This is a custom callback!\n\n{}",
-            panic_info.display
-        ));
+    web_panic_report::set_default_hook_with("test-container", |panic_info| {
+        web_sys::window()
+            .unwrap()
+            .alert_with_message(&format!(
+                "This is a custom callback!\n\n{}",
+                panic_info.display
+            ))
+            .unwrap();
     });
 }

src/default_form/mod.rs

@@ -0,0 +1,19 @@
+use crate::WasmPanicInfo;
+
+/// The default form HTML.
+const FORM_HTML: &str = include_str!("form.html");
+
+/// Set the panic hook, with a default form.
+///
+/// # Params
+/// `container_id`: The ID of the HTML element that will be unmounted in favor of the form.\
+/// `submit_callback`: The closure that will run when the user hits the send report button.
+///
+/// # Panics
+/// This will panic (ironically) if the panic occurs in a headless environment.
+pub fn set_default_hook_with<F>(container_id: impl Into<String>, submit_callback: F)
+where
+    F: Fn(&WasmPanicInfo) + Send + Sync + 'static,
+{
+    crate::set_hook_with(container_id, FORM_HTML, submit_callback)
+}