nuxt-error-tracker 0.1.10 → 0.1.12

package/README.md

@@ -114,6 +114,7 @@ export default defineNuxtConfig({
 | `enabled`         | `boolean` | `true`      | Master switch. `false` = fully disabled.                           |
 | `captureFetch`    | `boolean` | `true`      | Wrap `fetch` to breadcrumb requests and report failures/5xx.       |
 | `captureConsole`  | `boolean` | `true`      | Patch `console.error` to capture logged-but-not-thrown errors.     |
+| `captureInputs`   | `boolean` | `false`     | Record form input values as breadcrumbs (on change). Sensitive fields masked. Opt-in — captures user-entered data. |
 | `flushDelay`      | `number`  | `2000`      | Debounce (ms) before a batch is sent.                              |
 | `maxPerSession`   | `number`  | `5`         | Max occurrences of the *same* error captured per session.          |
 | `maxBatch`        | `number`  | `20`        | Max errors per request (server also hard-caps at 20).              |
@@ -126,11 +127,12 @@ The plugin injects two helpers for manual use:
 ```ts
 const { $trackError, $addBreadcrumb } = useNuxtApp()
 
-// Report a handled error yourself
+// Report a handled error yourself — optional severity level
+// ('fatal' | 'error' | 'warning' | 'info' | 'debug', default 'error')
 try {
   await mayFail()
 } catch (e) {
-  $trackError(e)
+  $trackError(e, 'warning')
 }
 
 // Add your own breadcrumb to the trail
@@ -165,6 +167,12 @@ Click breadcrumbs record the element (tag / id / class / short text) — **never
 input values**. Nothing is captured until an error occurs; breadcrumbs live only
 in memory and ship attached to an error.
 
+Input values are **only** captured when you opt in with `captureInputs: true`.
+Even then, sensitive fields are masked (stored as `[masked, N chars]`, never in
+the clear): any `type="password"`, plus fields whose `name` / `id` /
+`autocomplete` match `pass`, `secret`, `token`, `otp`, `cvv`, `card`, `iban`,
+`ssn`, `pin`, `auth`, etc. Non-sensitive values are truncated to 100 chars.
+
 ## How it sends
 
 Payloads are encoded as **protobuf** and POSTed as `application/x-protobuf`. On

package/dist/module.d.mts

@@ -7,6 +7,12 @@ interface ModuleOptions {
     captureFetch?: boolean;
     /** Patch console.error to capture logged-but-not-thrown errors. Default true. */
     captureConsole?: boolean;
+    /**
+     * Record form input values as breadcrumbs (on change/blur). Sensitive fields
+     * (password/email/tel + name/id matching card/cvv/token/secret/otp/…) are
+     * masked. Default false — opt in, since it can capture user-entered data.
+     */
+    captureInputs?: boolean;
     /** Debounce before a batch is flushed, in ms. Default 2000. */
     flushDelay?: number;
     /** Max occurrences of the same error captured per session. Default 5. */

package/dist/module.d.ts

@@ -7,6 +7,12 @@ interface ModuleOptions {
     captureFetch?: boolean;
     /** Patch console.error to capture logged-but-not-thrown errors. Default true. */
     captureConsole?: boolean;
+    /**
+     * Record form input values as breadcrumbs (on change/blur). Sensitive fields
+     * (password/email/tel + name/id matching card/cvv/token/secret/otp/…) are
+     * masked. Default false — opt in, since it can capture user-entered data.
+     */
+    captureInputs?: boolean;
     /** Debounce before a batch is flushed, in ms. Default 2000. */
     flushDelay?: number;
     /** Max occurrences of the same error captured per session. Default 5. */

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-error-tracker",
   "configKey": "errorTracker",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -16,6 +16,7 @@ const module = defineNuxtModule({
     enabled: true,
     captureFetch: true,
     captureConsole: true,
+    captureInputs: false,
     flushDelay: 2e3,
     maxPerSession: 5,
     maxBatch: 20,
@@ -30,6 +31,7 @@ const module = defineNuxtModule({
       appVersion: options.appVersion ?? "unknown",
       captureFetch: options.captureFetch !== false,
       captureConsole: options.captureConsole !== false,
+      captureInputs: options.captureInputs === true,
       flushDelay: posInt(options.flushDelay, 2e3),
       maxPerSession: posInt(options.maxPerSession, 5),
       // Server hard-caps batches at 20 — never emit larger, even if misconfigured.

package/dist/runtime/plugin.client.js

@@ -40,37 +40,41 @@ export default defineNuxtPlugin((nuxtApp) => {
   function sessionKey(message, stack) {
     return `${message.slice(0, 120)}::${(stack.split("\n")[1] ?? "").trim()}`;
   }
+  const MAX_QUEUE = 200;
   function flush(useBeacon = false) {
     if (!queue.length) return;
-    const batch = queue.splice(0, MAX_BATCH);
-    const body = {
-      meta: {
-        device: deviceInfo(),
-        userId: resolveUserId(),
-        appVersion: config.appVersion
-      },
-      errors: batch
-    };
-    const bytes = encodeBatch(body);
-    if (useBeacon && navigator.sendBeacon) {
-      const url = `${config.endpoint}?key=${encodeURIComponent(config.publicKey)}`;
-      const sent = navigator.sendBeacon(
-        url,
-        new Blob([bytes], { type: "application/x-protobuf" })
-      );
-      if (sent) return;
+    try {
+      const batch = queue.splice(0, MAX_BATCH);
+      const body = {
+        meta: {
+          device: deviceInfo(),
+          userId: resolveUserId(),
+          appVersion: config.appVersion
+        },
+        errors: batch
+      };
+      const bytes = encodeBatch(body);
+      if (useBeacon && navigator.sendBeacon) {
+        const url = `${config.endpoint}?key=${encodeURIComponent(config.publicKey)}`;
+        const sent = navigator.sendBeacon(
+          url,
+          new Blob([bytes], { type: "application/x-protobuf" })
+        );
+        if (sent) return;
+      }
+      fetch(config.endpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-protobuf",
+          "X-Public-Key": config.publicKey
+        },
+        body: bytes,
+        keepalive: true
+      }).catch(() => {
+        if (queue.length < MAX_QUEUE) queue.unshift(...batch);
+      });
+    } catch {
     }
-    fetch(config.endpoint, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/x-protobuf",
-        "X-Public-Key": config.publicKey
-      },
-      body: bytes,
-      keepalive: true
-    }).catch(() => {
-      queue.unshift(...batch);
-    });
   }
   function scheduleFlush() {
     if (flushTimer) return;
@@ -128,6 +132,46 @@ export default defineNuxtPlugin((nuxtApp) => {
     },
     { capture: true, passive: true }
   );
+  if (config.captureInputs) {
+    const SENSITIVE = /pass|secret|token|otp|onetime|one-time|cvv|cvc|card|iban|ssn|pin|auth|security/i;
+    const fieldLabel = (el) => el.name || el.id || el.getAttribute("aria-label") || el.getAttribute("placeholder") || el.type || "field";
+    const isSensitive = (el) => {
+      const type = (el.type || "").toLowerCase();
+      if (type === "password") return true;
+      const hint = `${el.name || ""} ${el.id || ""} ${el.getAttribute("autocomplete") || ""}`;
+      return SENSITIVE.test(hint);
+    };
+    document.addEventListener(
+      "change",
+      (event) => {
+        try {
+          const el = event.target;
+          if (!el || !el.tagName) return;
+          const tag = el.tagName.toLowerCase();
+          if (tag !== "input" && tag !== "textarea" && tag !== "select") return;
+          const type = (el.type || "").toLowerCase();
+          let value;
+          if (type === "checkbox" || type === "radio") {
+            value = el.checked ? "checked" : "unchecked";
+          } else if (isSensitive(el)) {
+            const len = (el.value ?? "").length;
+            value = len ? `[masked, ${len} chars]` : "[empty]";
+          } else {
+            const raw = el.value ?? "";
+            if (!raw) return;
+            value = raw.length > 100 ? `${raw.slice(0, 100)}\u2026` : raw;
+          }
+          addCrumb({
+            type: "input",
+            category: "ui.input",
+            message: `${fieldLabel(el)} = ${value}`
+          });
+        } catch {
+        }
+      },
+      { capture: true, passive: true }
+    );
+  }
   useRouter().afterEach((to, from) => {
     addCrumb({
       type: "navigation",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-error-tracker",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "exports": {
     ".": {