feat: add breadcrumb management to Catcher class

example/index.html

@@ -174,6 +174,40 @@ <h2>Context Management</h2>
       <br /><br />
       <button id="btn-set-context">Set Context</button>
     </section>
+    <section>
+      <h2>Breadcrumbs Management</h2>
+      <label for="breadcrumbMessage">Breadcrumb Message</label>
+      <input type="text" id="breadcrumbMessage" placeholder="User performed action" />
+      <br /><br />
+      <label for="breadcrumbType">Type</label>
+      <select id="breadcrumbType">
+        <option value="default">default</option>
+        <option value="request">request</option>
+        <option value="ui">ui</option>
+        <option value="navigation">navigation</option>
+        <option value="logic">logic</option>
+        <option value="error">error</option>
+      </select>
+      <br /><br />
+      <label for="breadcrumbLevel">Level</label>
+      <select id="breadcrumbLevel">
+        <option value="info">info</option>
+        <option value="debug">debug</option>
+        <option value="warning">warning</option>
+        <option value="error">error</option>
+        <option value="fatal">fatal</option>
+      </select>
+      <br /><br />
+      <label for="breadcrumbCategory">Category (optional)</label>
+      <input type="text" id="breadcrumbCategory" placeholder="ui.click" />
+      <br /><br />
+      <button id="btn-add-breadcrumb">Add Breadcrumb</button>
+      <button id="btn-get-breadcrumbs">Get Breadcrumbs</button>
+      <button id="btn-clear-breadcrumbs">Clear Breadcrumbs</button>
+      <br /><br />
+      <button id="btn-test-fetch-breadcrumb">Test Fetch Breadcrumb</button>
+      <div id="breadcrumbs-output" style="margin-top: 15px; padding: 10px; background: rgba(36, 39, 50, 0.68); border-radius: 3px; max-height: 200px; overflow-y: auto; white-space: pre-wrap; font-family: monospace; font-size: 12px;"></div>
+    </section>
     <script src="https://unpkg.com/vue@2"></script>
     <section>
       <h2>Test Vue integration: $root</h2>

example/sample-errors.js

@@ -123,3 +123,65 @@ buttonSetContext.addEventListener('click', () => {
 
   window.hawk.setContext(context);
 });
+
+/**
+ * Breadcrumbs Management
+ */
+const buttonAddBreadcrumb = document.getElementById('btn-add-breadcrumb');
+const buttonGetBreadcrumbs = document.getElementById('btn-get-breadcrumbs');
+const buttonClearBreadcrumbs = document.getElementById('btn-clear-breadcrumbs');
+const buttonTestFetch = document.getElementById('btn-test-fetch-breadcrumb');
+const breadcrumbsOutput = document.getElementById('breadcrumbs-output');
+
+buttonAddBreadcrumb.addEventListener('click', () => {
+  const message = document.getElementById('breadcrumbMessage').value;
+  const type = document.getElementById('breadcrumbType').value;
+  const level = document.getElementById('breadcrumbLevel').value;
+  const category = document.getElementById('breadcrumbCategory').value;
+
+  if (!message.trim()) {
+    alert('Breadcrumb message is required');
+    return;
+  }
+
+  window.hawk.addBreadcrumb({
+    message,
+    type,
+    level,
+    ...(category.trim() && { category }),
+    data: {
+      timestamp: new Date().toISOString(),
+      custom: 'manual breadcrumb',
+    },
+  });
+
+  breadcrumbsOutput.textContent = `✓ Breadcrumb added: ${message}`;
+});
+
+buttonGetBreadcrumbs.addEventListener('click', () => {
+  const breadcrumbs = window.hawk.getBreadcrumbs();
+
+  if (breadcrumbs.length === 0) {
+    breadcrumbsOutput.textContent = 'No breadcrumbs yet';
+    return;
+  }
+
+  breadcrumbsOutput.textContent = JSON.stringify(breadcrumbs, null, 2);
+});
+
+buttonClearBreadcrumbs.addEventListener('click', () => {
+  window.hawk.clearBreadcrumbs();
+  breadcrumbsOutput.textContent = '✓ Breadcrumbs cleared';
+});
+
+buttonTestFetch.addEventListener('click', async () => {
+  breadcrumbsOutput.textContent = 'Testing fetch breadcrumb...';
+
+  try {
+    const response = await fetch('https://api.github.com/zen');
+    const text = await response.text();
+    breadcrumbsOutput.textContent = `✓ Fetch completed (${response.status}): "${text}". Check breadcrumbs!`;
+  } catch (error) {
+    breadcrumbsOutput.textContent = `✗ Fetch failed: ${error.message}`;
+  }
+});

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hawk.so/javascript",
   "type": "commonjs",
-  "version": "3.2.11",
+  "version": "3.2.13",
   "description": "JavaScript errors tracking for Hawk.so",
   "files": [
     "dist"
@@ -47,7 +47,7 @@
     "vue": "^2"
   },
   "dependencies": {
-    "@hawk.so/types": "^0.1.36",
+    "@hawk.so/types": "^0.1.38",
     "error-stack-parser": "^2.1.4",
     "vite-plugin-dts": "^4.2.4"
   }