glitchgrab 0.1.0

package/dist/index.mjs

@@ -0,0 +1,787 @@
+"use client";
+
+// src/provider.tsx
+import {
+  createContext,
+  useContext,
+  useRef,
+  useEffect,
+  useCallback
+} from "react";
+
+// src/error-boundary.tsx
+import React from "react";
+
+// src/breadcrumbs.ts
+var MAX_DEFAULT = 50;
+var breadcrumbs = [];
+var maxBreadcrumbs = MAX_DEFAULT;
+var initialized = false;
+function initBreadcrumbs(max) {
+  if (initialized) return;
+  maxBreadcrumbs = max != null ? max : MAX_DEFAULT;
+  try {
+    if (typeof window === "undefined") return;
+    interceptConsole();
+    interceptFetch();
+    interceptNavigation();
+    interceptClicks();
+    initialized = true;
+  } catch (e) {
+  }
+}
+function addBreadcrumb(type, message, data) {
+  try {
+    breadcrumbs.push({
+      type,
+      message: message.slice(0, 200),
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      data
+    });
+    if (breadcrumbs.length > maxBreadcrumbs) {
+      breadcrumbs = breadcrumbs.slice(-maxBreadcrumbs);
+    }
+  } catch (e) {
+  }
+}
+function getBreadcrumbs() {
+  return [...breadcrumbs];
+}
+function clearBreadcrumbs() {
+  breadcrumbs = [];
+}
+function interceptConsole() {
+  const origLog = console.log;
+  const origWarn = console.warn;
+  const origError = console.error;
+  console.log = function(...args) {
+    addBreadcrumb("console", `[log] ${argsToString(args)}`);
+    origLog.apply(console, args);
+  };
+  console.warn = function(...args) {
+    addBreadcrumb("console", `[warn] ${argsToString(args)}`);
+    origWarn.apply(console, args);
+  };
+  console.error = function(...args) {
+    addBreadcrumb("console", `[error] ${argsToString(args)}`);
+    origError.apply(console, args);
+  };
+}
+function argsToString(args) {
+  try {
+    return args.map((a) => {
+      if (typeof a === "string") return a;
+      if (a instanceof Error) return a.message;
+      try {
+        return JSON.stringify(a);
+      } catch (e) {
+        return String(a);
+      }
+    }).join(" ").slice(0, 200);
+  } catch (e) {
+    return "[unknown]";
+  }
+}
+function interceptFetch() {
+  const origFetch = window.fetch;
+  window.fetch = async function(input, init) {
+    var _a;
+    const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input instanceof Request ? input.url : String(input);
+    const method = (_a = init == null ? void 0 : init.method) != null ? _a : "GET";
+    const start = Date.now();
+    try {
+      const response = await origFetch.apply(window, [input, init]);
+      addBreadcrumb("api", `${method} ${url.slice(0, 100)} \u2192 ${response.status}`, {
+        method,
+        status: String(response.status),
+        duration: `${Date.now() - start}ms`
+      });
+      return response;
+    } catch (err) {
+      addBreadcrumb("api", `${method} ${url.slice(0, 100)} \u2192 FAILED`, {
+        method,
+        error: err instanceof Error ? err.message : "unknown",
+        duration: `${Date.now() - start}ms`
+      });
+      throw err;
+    }
+  };
+}
+function interceptNavigation() {
+  const origPush = history.pushState.bind(history);
+  const origReplace = history.replaceState.bind(history);
+  history.pushState = function(...args) {
+    origPush(...args);
+    addBreadcrumb("navigation", `Navigate to ${window.location.pathname}`);
+  };
+  history.replaceState = function(...args) {
+    origReplace(...args);
+    addBreadcrumb("navigation", `Replace to ${window.location.pathname}`);
+  };
+  window.addEventListener("popstate", () => {
+    addBreadcrumb("navigation", `Back/Forward to ${window.location.pathname}`);
+  });
+}
+function interceptClicks() {
+  document.addEventListener(
+    "click",
+    (e) => {
+      var _a, _b, _c;
+      try {
+        const target = e.target;
+        const tag = (_a = target.tagName) == null ? void 0 : _a.toLowerCase();
+        const text = (_c = (_b = target.textContent) == null ? void 0 : _b.trim().slice(0, 50)) != null ? _c : "";
+        const id = target.id ? `#${target.id}` : "";
+        const cls = target.className && typeof target.className === "string" ? `.${target.className.split(" ")[0]}` : "";
+        addBreadcrumb("click", `Click ${tag}${id}${cls} "${text}"`);
+      } catch (e2) {
+      }
+    },
+    { capture: true }
+  );
+}
+
+// src/utils.ts
+var SENSITIVE_PARAMS = [
+  "token",
+  "key",
+  "secret",
+  "password",
+  "passwd",
+  "auth",
+  "authorization",
+  "session",
+  "sessionid",
+  "session_id",
+  "api_key",
+  "apikey",
+  "access_token",
+  "refresh_token",
+  "client_secret",
+  "code",
+  "state",
+  "nonce",
+  "credential",
+  "private"
+];
+function sanitizeUrl(url) {
+  var _a;
+  try {
+    const parsed = new URL(url);
+    const params = new URLSearchParams(parsed.search);
+    let modified = false;
+    for (const key of Array.from(params.keys())) {
+      if (SENSITIVE_PARAMS.some((s) => key.toLowerCase().includes(s))) {
+        params.set(key, "[REDACTED]");
+        modified = true;
+      }
+    }
+    if (modified) parsed.search = params.toString();
+    return parsed.toString();
+  } catch (e) {
+    return (_a = url.split("?")[0]) != null ? _a : url;
+  }
+}
+function captureDeviceInfo() {
+  var _a, _b, _c;
+  try {
+    if (typeof window === "undefined") return null;
+    return {
+      screenWidth: screen.width,
+      screenHeight: screen.height,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      platform: (_a = navigator.platform) != null ? _a : "unknown",
+      language: (_b = navigator.language) != null ? _b : "unknown",
+      online: navigator.onLine,
+      colorScheme: window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
+      devicePixelRatio: (_c = window.devicePixelRatio) != null ? _c : 1
+    };
+  } catch (e) {
+    return null;
+  }
+}
+function captureContext(visitedPages) {
+  try {
+    return {
+      url: sanitizeUrl(typeof window !== "undefined" ? window.location.href : ""),
+      userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      visitedPages: visitedPages.map(sanitizeUrl),
+      breadcrumbs: getBreadcrumbs(),
+      deviceInfo: captureDeviceInfo()
+    };
+  } catch (e) {
+    return {
+      url: "",
+      userAgent: "",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      visitedPages: [],
+      breadcrumbs: [],
+      deviceInfo: null
+    };
+  }
+}
+var DEFAULT_BASE_URL = "https://glitchgrab.dev";
+var MAX_RETRIES = 3;
+var RETRY_BASE_MS = 500;
+async function sendReport(payload, baseUrl) {
+  var _a;
+  try {
+    const url = `${baseUrl != null ? baseUrl : DEFAULT_BASE_URL}/api/v1/sdk/report`;
+    const body = JSON.stringify(payload);
+    const headers = {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${payload.token}`
+    };
+    for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
+      try {
+        const response = await fetch(url, {
+          method: "POST",
+          headers,
+          body,
+          keepalive: true
+        });
+        if (response.ok) {
+          const data = await response.json();
+          return (_a = data.data) != null ? _a : { success: data.success };
+        }
+        if (response.status >= 400 && response.status < 500 && response.status !== 429) {
+          return null;
+        }
+      } catch (e) {
+      }
+      if (attempt < MAX_RETRIES - 1) {
+        await new Promise(
+          (resolve) => setTimeout(resolve, RETRY_BASE_MS * Math.pow(2, attempt))
+        );
+      }
+    }
+    if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+      try {
+        navigator.sendBeacon(url, new Blob([body], { type: "application/json" }));
+      } catch (e) {
+      }
+    }
+    return null;
+  } catch (e) {
+    return null;
+  }
+}
+
+// src/error-boundary.tsx
+var GlitchgrabErrorBoundary = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    var _a, _b;
+    try {
+      const context = captureContext(this.props.visitedPages);
+      const payload = {
+        token: this.props.token,
+        source: "SDK_AUTO",
+        type: "BUG",
+        errorMessage: error.message,
+        errorStack: error.stack,
+        componentStack: (_a = errorInfo.componentStack) != null ? _a : void 0,
+        pageUrl: context.url,
+        userAgent: context.userAgent,
+        breadcrumbs: context.breadcrumbs,
+        deviceInfo: (_b = context.deviceInfo) != null ? _b : void 0,
+        metadata: {
+          timestamp: context.timestamp,
+          visitedPages: JSON.stringify(context.visitedPages)
+        }
+      };
+      sendReport(payload, this.props.baseUrl);
+      if (this.props.onError) {
+        this.props.onError(error);
+      }
+    } catch (e) {
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return this.props.children;
+    }
+    return this.props.children;
+  }
+};
+
+// src/provider.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var DEFAULT_BASE_URL2 = "https://glitchgrab.dev";
+var GlitchgrabContext = createContext(null);
+function useGlitchgrab() {
+  const ctx = useContext(GlitchgrabContext);
+  if (!ctx) {
+    throw new Error("useGlitchgrab must be used within a GlitchgrabProvider");
+  }
+  return ctx;
+}
+function GlitchgrabProviderInner({
+  token,
+  baseUrl,
+  onError,
+  onReportSent,
+  breadcrumbs: enableBreadcrumbs = true,
+  maxBreadcrumbs: maxBreadcrumbs2 = 50,
+  children,
+  fallback
+}) {
+  const visitedPagesRef = useRef([]);
+  useEffect(() => {
+    if (enableBreadcrumbs) {
+      initBreadcrumbs(maxBreadcrumbs2);
+    }
+  }, [enableBreadcrumbs, maxBreadcrumbs2]);
+  useEffect(() => {
+    try {
+      if (typeof window === "undefined") return;
+      const trackPage = () => {
+        try {
+          const sanitized = sanitizeUrl(window.location.href);
+          const pages = visitedPagesRef.current;
+          if (pages[pages.length - 1] !== sanitized) {
+            pages.push(sanitized);
+            if (pages.length > 20) {
+              pages.splice(0, pages.length - 20);
+            }
+          }
+        } catch (e) {
+        }
+      };
+      trackPage();
+      const handlePopState = () => trackPage();
+      window.addEventListener("popstate", handlePopState);
+      const origPushState = history.pushState.bind(history);
+      const origReplaceState = history.replaceState.bind(history);
+      history.pushState = function(...args) {
+        origPushState(...args);
+        trackPage();
+      };
+      history.replaceState = function(...args) {
+        origReplaceState(...args);
+        trackPage();
+      };
+      return () => {
+        window.removeEventListener("popstate", handlePopState);
+        history.pushState = origPushState;
+        history.replaceState = origReplaceState;
+      };
+    } catch (e) {
+    }
+  }, []);
+  useEffect(() => {
+    try {
+      if (typeof window === "undefined") return;
+      const handleError = (event) => {
+        var _a, _b, _c, _d, _e;
+        try {
+          const context = captureContext(visitedPagesRef.current);
+          const payload = {
+            token,
+            source: "SDK_AUTO",
+            type: "BUG",
+            errorMessage: event.message,
+            errorStack: (_a = event.error) == null ? void 0 : _a.stack,
+            pageUrl: context.url,
+            userAgent: context.userAgent,
+            breadcrumbs: context.breadcrumbs,
+            deviceInfo: (_b = context.deviceInfo) != null ? _b : void 0,
+            metadata: {
+              timestamp: context.timestamp,
+              visitedPages: JSON.stringify(context.visitedPages),
+              filename: (_c = event.filename) != null ? _c : "",
+              lineno: String((_d = event.lineno) != null ? _d : ""),
+              colno: String((_e = event.colno) != null ? _e : "")
+            }
+          };
+          sendReport(payload, baseUrl).then((result) => {
+            if (result && onReportSent) onReportSent(result);
+          });
+          if (onError && event.error) onError(event.error);
+        } catch (e) {
+        }
+      };
+      const handleRejection = (event) => {
+        var _a;
+        try {
+          const context = captureContext(visitedPagesRef.current);
+          const reason = event.reason;
+          const payload = {
+            token,
+            source: "SDK_AUTO",
+            type: "BUG",
+            errorMessage: reason instanceof Error ? reason.message : String(reason),
+            errorStack: reason instanceof Error ? reason.stack : void 0,
+            pageUrl: context.url,
+            userAgent: context.userAgent,
+            breadcrumbs: context.breadcrumbs,
+            deviceInfo: (_a = context.deviceInfo) != null ? _a : void 0,
+            metadata: {
+              timestamp: context.timestamp,
+              visitedPages: JSON.stringify(context.visitedPages),
+              type: "unhandledrejection"
+            }
+          };
+          sendReport(payload, baseUrl).then((result) => {
+            if (result && onReportSent) onReportSent(result);
+          });
+          if (onError && reason instanceof Error) onError(reason);
+        } catch (e) {
+        }
+      };
+      window.addEventListener("error", handleError);
+      window.addEventListener("unhandledrejection", handleRejection);
+      return () => {
+        window.removeEventListener("error", handleError);
+        window.removeEventListener("unhandledrejection", handleRejection);
+      };
+    } catch (e) {
+    }
+  }, [token, baseUrl, onError, onReportSent]);
+  const report = useCallback(
+    async (type, description, metadata) => {
+      var _a;
+      try {
+        const context = captureContext(visitedPagesRef.current);
+        const payload = {
+          token,
+          source: "SDK_USER_REPORT",
+          type,
+          description,
+          pageUrl: context.url,
+          userAgent: context.userAgent,
+          breadcrumbs: context.breadcrumbs,
+          deviceInfo: (_a = context.deviceInfo) != null ? _a : void 0,
+          metadata: {
+            timestamp: context.timestamp,
+            visitedPages: JSON.stringify(context.visitedPages),
+            ...metadata
+          }
+        };
+        const result = await sendReport(payload, baseUrl);
+        if (result && onReportSent) onReportSent(result);
+        return result;
+      } catch (e) {
+        return null;
+      }
+    },
+    [token, baseUrl, onReportSent]
+  );
+  const reportBug = useCallback(
+    (description, metadata) => report("BUG", description, metadata),
+    [report]
+  );
+  const addBreadcrumb2 = useCallback(
+    (message, data) => {
+      addBreadcrumb("custom", message, data);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    GlitchgrabContext.Provider,
+    {
+      value: {
+        token,
+        baseUrl: baseUrl != null ? baseUrl : DEFAULT_BASE_URL2,
+        reportBug,
+        report,
+        addBreadcrumb: addBreadcrumb2
+      },
+      children: /* @__PURE__ */ jsx(
+        GlitchgrabErrorBoundary,
+        {
+          token,
+          baseUrl,
+          onError,
+          fallback,
+          visitedPages: visitedPagesRef.current,
+          children
+        }
+      )
+    }
+  );
+}
+function GlitchgrabProvider(props) {
+  try {
+    return /* @__PURE__ */ jsx(GlitchgrabProviderInner, { ...props });
+  } catch (e) {
+    return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+  }
+}
+
+// src/report-button.tsx
+import { useState, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ReportButton({
+  position = "bottom-right",
+  label = "Report Bug",
+  className
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [description, setDescription] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const modalRef = useRef2(null);
+  const { reportBug } = useGlitchgrab();
+  useEffect2(() => {
+    try {
+      if (!isOpen) return;
+      const handleClickOutside = (event) => {
+        if (modalRef.current && !modalRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    } catch (e) {
+    }
+  }, [isOpen]);
+  const handleSubmit = () => {
+    try {
+      if (!description.trim() || isSubmitting) return;
+      setIsSubmitting(true);
+      reportBug(description.trim());
+      setSubmitted(true);
+      setDescription("");
+      setIsSubmitting(false);
+      setTimeout(() => {
+        setSubmitted(false);
+        setIsOpen(false);
+      }, 2e3);
+    } catch (e) {
+      setIsSubmitting(false);
+    }
+  };
+  const positionStyles = position === "bottom-left" ? { left: "16px", bottom: "16px" } : { right: "16px", bottom: "16px" };
+  const modalPositionStyles = position === "bottom-left" ? { left: "16px", bottom: "64px" } : { right: "16px", bottom: "64px" };
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setIsOpen(!isOpen);
+          setSubmitted(false);
+        },
+        className,
+        style: {
+          position: "fixed",
+          ...positionStyles,
+          zIndex: 99999,
+          padding: "10px 18px",
+          borderRadius: "24px",
+          border: "none",
+          backgroundColor: "#18181b",
+          color: "#fafafa",
+          fontSize: "14px",
+          fontWeight: 500,
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          cursor: "pointer",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1)",
+          transition: "transform 0.15s ease, box-shadow 0.15s ease",
+          display: "flex",
+          alignItems: "center",
+          gap: "6px"
+        },
+        onMouseEnter: (e) => {
+          e.target.style.transform = "scale(1.05)";
+        },
+        onMouseLeave: (e) => {
+          e.target.style.transform = "scale(1)";
+        },
+        "aria-label": label,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              style: { flexShrink: 0 },
+              children: /* @__PURE__ */ jsx2(
+                "path",
+                {
+                  d: "M8 1C4.134 1 1 4.134 1 8s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm0 12.5a.75.75 0 110-1.5.75.75 0 010 1.5zm.75-3.5a.75.75 0 01-1.5 0V5a.75.75 0 011.5 0v5z",
+                  fill: "currentColor"
+                }
+              )
+            }
+          ),
+          label
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: modalRef,
+        style: {
+          position: "fixed",
+          ...modalPositionStyles,
+          zIndex: 1e5,
+          width: "320px",
+          backgroundColor: "#ffffff",
+          borderRadius: "12px",
+          boxShadow: "0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1)",
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              style: {
+                padding: "16px 16px 12px",
+                borderBottom: "1px solid #e4e4e7"
+              },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "15px",
+                          fontWeight: 600,
+                          color: "#18181b"
+                        },
+                        children: "Report a Bug"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setIsOpen(false),
+                        style: {
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer",
+                          padding: "4px",
+                          color: "#71717a",
+                          fontSize: "18px",
+                          lineHeight: 1
+                        },
+                        "aria-label": "Close",
+                        children: "\xD7"
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx2("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ jsx2(
+            "div",
+            {
+              style: {
+                textAlign: "center",
+                padding: "20px 0",
+                color: "#16a34a",
+                fontSize: "14px",
+                fontWeight: 500
+              },
+              children: "Bug report sent. Thank you!"
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+            /* @__PURE__ */ jsx2(
+              "textarea",
+              {
+                value: description,
+                onChange: (e) => setDescription(e.target.value),
+                placeholder: "Describe what went wrong...",
+                style: {
+                  width: "100%",
+                  minHeight: "100px",
+                  padding: "10px 12px",
+                  borderRadius: "8px",
+                  border: "1px solid #d4d4d8",
+                  fontSize: "14px",
+                  fontFamily: "inherit",
+                  resize: "vertical",
+                  outline: "none",
+                  boxSizing: "border-box",
+                  color: "#18181b",
+                  backgroundColor: "#fafafa"
+                },
+                onFocus: (e) => {
+                  e.target.style.borderColor = "#18181b";
+                },
+                onBlur: (e) => {
+                  e.target.style.borderColor = "#d4d4d8";
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: handleSubmit,
+                disabled: !description.trim() || isSubmitting,
+                style: {
+                  marginTop: "12px",
+                  width: "100%",
+                  padding: "10px",
+                  borderRadius: "8px",
+                  border: "none",
+                  backgroundColor: !description.trim() || isSubmitting ? "#a1a1aa" : "#18181b",
+                  color: "#fafafa",
+                  fontSize: "14px",
+                  fontWeight: 500,
+                  cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
+                  fontFamily: "inherit",
+                  transition: "background-color 0.15s ease"
+                },
+                children: isSubmitting ? "Sending..." : "Send Report"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              style: {
+                padding: "8px 16px 10px",
+                borderTop: "1px solid #e4e4e7",
+                textAlign: "center"
+              },
+              children: /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: "#a1a1aa" }, children: "Powered by Glitchgrab" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  GlitchgrabErrorBoundary,
+  GlitchgrabProvider,
+  ReportButton,
+  addBreadcrumb,
+  captureContext,
+  captureDeviceInfo,
+  clearBreadcrumbs,
+  getBreadcrumbs,
+  initBreadcrumbs,
+  sanitizeUrl,
+  sendReport,
+  useGlitchgrab
+};
+//# sourceMappingURL=index.mjs.map