@greenhat-services/magpie-browser 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,597 @@
+import { truncate, normalize, TRACE_HEADER, formatTraceHeader, scrubUrl, parseTraceHeader, getClient, Client, setClient, endpoint, SDK_VERSION } from '@greenhat-services/magpie-core';
+export * from '@greenhat-services/magpie-core';
+
+// src/index.ts
+var CONSOLE_LEVELS = [
+  ["debug", "debug"],
+  ["log", "info"],
+  ["info", "info"],
+  ["warn", "warning"],
+  ["error", "error"]
+];
+function consoleBreadcrumbs() {
+  return {
+    name: "ConsoleBreadcrumbs",
+    setup(client) {
+      if (typeof console === "undefined") return;
+      const originals = /* @__PURE__ */ new Map();
+      let inside = false;
+      for (const [method, level] of CONSOLE_LEVELS) {
+        const original = console[method];
+        if (typeof original !== "function") continue;
+        originals.set(method, original);
+        console[method] = function(...args) {
+          if (!inside) {
+            inside = true;
+            try {
+              client.addBreadcrumb({ category: "log", level, message: args.map(format).join(" ") });
+            } finally {
+              inside = false;
+            }
+          }
+          return original.apply(this, args);
+        };
+      }
+      return () => {
+        for (const [method, original] of originals) console[method] = original;
+      };
+    }
+  };
+}
+function format(value) {
+  if (typeof value === "string") return truncate(value, 300);
+  if (value instanceof Error) return truncate(`${value.name}: ${value.message}`, 300);
+  try {
+    return truncate(JSON.stringify(normalize(value, 2, 100, 10)) ?? String(value), 300);
+  } catch {
+    return String(value);
+  }
+}
+function clickBreadcrumbs() {
+  return {
+    name: "ClickBreadcrumbs",
+    setup(client) {
+      if (typeof document === "undefined") return;
+      const onClick = (event) => {
+        const el = event.target;
+        if (!el || !("tagName" in el)) return;
+        client.addBreadcrumb({ category: "ui.click", message: describeElement(el) });
+      };
+      document.addEventListener("click", onClick, { capture: true, passive: true });
+      return () => document.removeEventListener("click", onClick, { capture: true });
+    }
+  };
+}
+function describeElement(el) {
+  const parts = [];
+  for (let node = el, depth = 0; node && depth < 3; node = node.parentElement, depth++) {
+    const tag = node.tagName.toLowerCase();
+    if (tag === "html" || tag === "body") break;
+    let part = tag;
+    if (node.id) part += `#${node.id}`;
+    const classes = (typeof node.className === "string" ? node.className : "").split(/\s+/).filter(Boolean).slice(0, 3);
+    if (classes.length) part += `.${classes.join(".")}`;
+    const testId = node.getAttribute("data-testid");
+    if (testId) part += `[data-testid=${testId}]`;
+    parts.unshift(part);
+    if (node.id) break;
+  }
+  return truncate(parts.join(" > ") || el.tagName.toLowerCase(), 200);
+}
+function historyBreadcrumbs(onNavigate) {
+  return {
+    name: "HistoryBreadcrumbs",
+    setup(client) {
+      if (typeof window === "undefined" || !window.history) return;
+      let from = location.href;
+      const record = () => {
+        const to = location.href;
+        if (to === from) return;
+        client.addBreadcrumb({ category: "navigation", data: { from: scrubUrl(from), to: scrubUrl(to) } });
+        from = to;
+        onNavigate?.(to);
+      };
+      const restore = [];
+      for (const method of ["pushState", "replaceState"]) {
+        const original = history[method];
+        history[method] = function(...args) {
+          const result = original.apply(this, args);
+          record();
+          return result;
+        };
+        restore.push(() => {
+          history[method] = original;
+        });
+      }
+      window.addEventListener("popstate", record);
+      restore.push(() => window.removeEventListener("popstate", record));
+      return () => restore.forEach((r) => r());
+    }
+  };
+}
+
+// src/globalHandlers.ts
+function globalHandlers() {
+  return {
+    name: "GlobalHandlers",
+    setup(client) {
+      if (typeof window === "undefined") return;
+      const onError = (event) => {
+        const target = event.target;
+        if (target && target !== window && "tagName" in target) {
+          const src = target.src || target.href || "";
+          client.addBreadcrumb({ category: "resource", level: "warning", message: `Failed to load <${target.tagName.toLowerCase()}> ${src}`.trim() });
+          return;
+        }
+        const e = event;
+        const mechanism = { type: "onerror", handled: false };
+        if (e.error !== void 0 && e.error !== null) {
+          client.captureException(e.error, { mechanism });
+          return;
+        }
+        if (!e.filename && /^Script error\.?$/i.test(e.message)) return;
+        const error = new Error(e.message);
+        error.name = /^(\w+Error):/.exec(e.message)?.[1] ?? "Error";
+        error.stack = e.filename ? `${error.name}: ${e.message}
+    at ${e.filename}:${e.lineno || 0}:${e.colno || 0}` : void 0;
+        client.captureException(error, { mechanism });
+      };
+      const onRejection = (event) => {
+        client.captureException(event.reason, { mechanism: { type: "onunhandledrejection", handled: false } });
+      };
+      window.addEventListener("error", onError, true);
+      window.addEventListener("unhandledrejection", onRejection);
+      return () => {
+        window.removeEventListener("error", onError, true);
+        window.removeEventListener("unhandledrejection", onRejection);
+      };
+    }
+  };
+}
+
+// src/idle.ts
+var trackers = /* @__PURE__ */ new WeakMap();
+function idleFor(tx) {
+  return trackers.get(tx);
+}
+function trackIdle(tx, options) {
+  let pending = 0;
+  let loaded = !options.waitForLoad || typeof document !== "undefined" && document.readyState === "complete";
+  let lastActivity = Date.now();
+  let timer;
+  let ended = false;
+  const cleanup = [];
+  const end = (backdate) => {
+    if (ended) return;
+    ended = true;
+    if (timer) clearTimeout(timer);
+    cleanup.forEach((c) => c());
+    const endAt = Math.max(tx.startTimestamp, (backdate ? lastActivity : Date.now()) / 1e3);
+    options.beforeEnd?.(tx, endAt);
+    tx.end(endAt);
+    options.onEnd?.(tx);
+  };
+  const arm = () => {
+    if (timer) clearTimeout(timer);
+    if (ended || pending > 0 || !loaded) return;
+    timer = setTimeout(() => end(true), options.idleTimeout);
+  };
+  const idle = {
+    requestStarted() {
+      pending++;
+      lastActivity = Date.now();
+      if (timer) clearTimeout(timer);
+    },
+    requestFinished() {
+      pending = Math.max(0, pending - 1);
+      lastActivity = Date.now();
+      arm();
+    },
+    finish: () => end(false)
+  };
+  trackers.set(tx, idle);
+  const max = setTimeout(() => end(false), options.maxDuration);
+  cleanup.push(() => clearTimeout(max));
+  if (typeof window !== "undefined") {
+    if (!loaded) {
+      const onLoad = () => {
+        loaded = true;
+        lastActivity = Date.now();
+        arm();
+      };
+      window.addEventListener("load", onLoad, { once: true });
+      cleanup.push(() => window.removeEventListener("load", onLoad));
+    }
+    const onHide = () => {
+      if (document.visibilityState === "hidden") end(true);
+    };
+    document.addEventListener("visibilitychange", onHide);
+    cleanup.push(() => document.removeEventListener("visibilitychange", onHide));
+  }
+  arm();
+  return idle;
+}
+
+// src/http.ts
+var refusedHosts = /* @__PURE__ */ new Set();
+function httpIntegration() {
+  return {
+    name: "Http",
+    setup(client) {
+      if (typeof window === "undefined") return;
+      const restore = [];
+      const skip = (url) => !!client.dsn && absolute(url).startsWith(client.dsn.origin);
+      if (typeof window.fetch === "function") {
+        const original = window.fetch;
+        window.fetch = function patchedFetch(input, init2) {
+          const info = describe(input, init2);
+          if (skip(info.url)) return original.call(this, input, init2);
+          const crossOrigin = !sameOrigin(absolute(info.url));
+          const host = hostOf(info.url);
+          const call = begin(client, info, crossOrigin && refusedHosts.has(host));
+          let args = [input, init2];
+          if (call.header) {
+            const headers = new Headers(init2?.headers ?? (typeof Request !== "undefined" && input instanceof Request ? input.headers : void 0));
+            if (!headers.has(TRACE_HEADER)) headers.set(TRACE_HEADER, call.header);
+            args = [input, { ...init2, headers }];
+          }
+          const done = (response) => {
+            call.finish(response.status);
+            return response;
+          };
+          const fail = (error) => {
+            call.finish(0);
+            throw error;
+          };
+          return original.apply(this, args).then(done, (error) => {
+            if (call.header && crossOrigin && error instanceof TypeError) {
+              refusedHosts.add(host);
+              if (client.options.debug) console.warn(`[magpie] ${host} rejected the ${TRACE_HEADER} header (its CORS policy does not allow it), so it will not be sent there again. Remove it from tracePropagationTargets, or allow the header on that API.`);
+              if (info.method === "GET" || info.method === "HEAD") return original.call(this, input, init2).then(done, fail);
+            }
+            return fail(error);
+          });
+        };
+        restore.push(() => {
+          window.fetch = original;
+        });
+      }
+      if (typeof XMLHttpRequest !== "undefined") {
+        const proto = XMLHttpRequest.prototype;
+        const open = proto.open;
+        const send = proto.send;
+        const state = /* @__PURE__ */ new WeakMap();
+        proto.open = function(method, url, ...rest) {
+          state.set(this, { method: String(method).toUpperCase(), url: String(url) });
+          return open.call(this, method, url, ...rest);
+        };
+        proto.send = function(body) {
+          const info = state.get(this);
+          if (info && !skip(info.url)) {
+            const call = begin(client, info);
+            if (call.header) {
+              try {
+                this.setRequestHeader(TRACE_HEADER, call.header);
+              } catch {
+              }
+            }
+            this.addEventListener("loadend", () => call.finish(this.status));
+          }
+          return send.call(this, body);
+        };
+        restore.push(() => {
+          proto.open = open;
+          proto.send = send;
+        });
+      }
+      return () => restore.forEach((r) => r());
+    }
+  };
+}
+function begin(client, info, withholdHeader = false) {
+  const started = performance.now();
+  const parent = client.activeTransaction;
+  const idle = parent ? idleFor(parent) : void 0;
+  const tracing = (client.options.tracesSampleRate ?? 0) > 0 && parent !== void 0;
+  let span;
+  if (parent?.sampled) {
+    span = parent.startChild({ op: "http.client", description: `${info.method} ${stripQuery(info.url)}`, data: { method: info.method } });
+    idle?.requestStarted();
+  } else if (parent) {
+    idle?.requestStarted();
+  }
+  const target = absolute(info.url);
+  const header = !withholdHeader && tracing && parent && (sameOrigin(target) || client.shouldPropagate(target)) ? formatTraceHeader(parent.traceId, span?.spanId ?? parent.spanId, parent.sampled) : void 0;
+  return {
+    header,
+    finish(status) {
+      const duration = Math.round(performance.now() - started);
+      const failed = status === 0 || status >= 400;
+      if (span) {
+        if (status) span.setData("status_code", status);
+        span.setStatus(status === 0 ? "unknown_error" : status >= 500 ? "internal_error" : "ok");
+        span.end();
+      }
+      if (parent) idle?.requestFinished();
+      client.addBreadcrumb({
+        category: "http",
+        type: "http",
+        level: status >= 500 || status === 0 ? "error" : failed ? "warning" : "info",
+        message: `${info.method} ${scrubUrl(info.url)}`,
+        data: { method: info.method, ...status ? { status_code: status } : { status_code: "failed" }, duration_ms: duration }
+      });
+    }
+  };
+}
+function describe(input, init2) {
+  const isRequest = typeof Request !== "undefined" && input instanceof Request;
+  const url = typeof input === "string" ? input : input instanceof URL ? input.href : isRequest ? input.url : String(input);
+  return { method: (init2?.method ?? (isRequest ? input.method : "GET")).toUpperCase(), url };
+}
+function absolute(url) {
+  try {
+    return new URL(url, location.href).href;
+  } catch {
+    return url;
+  }
+}
+function hostOf(url) {
+  try {
+    return new URL(url, location.href).host;
+  } catch {
+    return url;
+  }
+}
+function sameOrigin(absoluteUrl) {
+  try {
+    return new URL(absoluteUrl).origin === location.origin;
+  } catch {
+    return false;
+  }
+}
+function stripQuery(url) {
+  return scrubUrl(url).split(/[?#]/)[0];
+}
+var KEEPALIVE_LIMIT = 6e4;
+function fetchTransport(dsn, fetchImpl = (...args) => globalThis.fetch(...args)) {
+  const url = (payload) => `${endpoint(dsn, payload.type === "transaction" ? "transactions" : "events")}?magpie_key=${encodeURIComponent(dsn.publicKey)}`;
+  return {
+    async send(payload) {
+      try {
+        const body = JSON.stringify(payload);
+        const response = await fetchImpl(url(payload), {
+          method: "POST",
+          body,
+          headers: { "Content-Type": "text/plain" },
+          keepalive: body.length < KEEPALIVE_LIMIT,
+          mode: "cors",
+          credentials: "omit",
+          referrerPolicy: "no-referrer"
+        });
+        return { ok: response.ok, status: response.status, retryAfter: parseRetryAfter(response.headers.get("retry-after")) };
+      } catch {
+        return { ok: false };
+      }
+    }
+  };
+}
+function parseRetryAfter(value) {
+  const seconds = Number(value);
+  return value !== null && Number.isFinite(seconds) && seconds > 0 ? Math.min(seconds, 3600) : void 0;
+}
+
+// src/uaparse.ts
+function parseUserAgent(ua) {
+  const first = (re) => re.exec(ua)?.[1];
+  const major = (v) => v ? v.split(".")[0] : "";
+  let browser = { name: "Unknown", version: "" };
+  const rules = [
+    ["Edge", /\bEdgA?i?O?S?\/([\d.]+)/],
+    ["Opera", /\bOPR\/([\d.]+)/],
+    ["Samsung Internet", /\bSamsungBrowser\/([\d.]+)/],
+    ["Firefox", /\b(?:Firefox|FxiOS)\/([\d.]+)/],
+    ["Chrome", /\b(?:Headless)?(?:Chrome|Chromium|CriOS)\/([\d.]+)/],
+    ["Safari", /\bVersion\/([\d.]+).*\bSafari\//]
+  ];
+  for (const [name, re] of rules) {
+    const v = first(re);
+    if (v) {
+      browser = { name, version: major(v) };
+      break;
+    }
+  }
+  let os = { name: "Unknown" };
+  if (/\bWindows NT/.test(ua)) {
+    const nt = first(/\bWindows NT ([\d.]+)/);
+    os = { name: "Windows", version: nt === "10.0" ? "10" : nt === "6.3" ? "8.1" : nt === "6.2" ? "8" : nt === "6.1" ? "7" : nt };
+  } else if (/\b(iPhone|iPad|iPod)\b/.test(ua)) {
+    os = { name: "iOS", version: first(/\bOS ([\d_]+)/)?.replace(/_/g, ".") };
+  } else if (/\bAndroid\b/.test(ua)) {
+    os = { name: "Android", version: first(/\bAndroid ([\d.]+)/) };
+  } else if (/\bMac OS X\b/.test(ua)) {
+    os = { name: "macOS", version: first(/\bMac OS X ([\d_.]+)/)?.replace(/_/g, ".") };
+  } else if (/\bCrOS\b/.test(ua)) {
+    os = { name: "Chrome OS" };
+  } else if (/\bLinux\b/.test(ua)) {
+    os = { name: "Linux" };
+  }
+  const device = /\b(iPad|Tablet)\b/.test(ua) || /\bAndroid\b/.test(ua) && !/\bMobile\b/.test(ua) ? "tablet" : /\b(iPhone|iPod|Mobile)\b/.test(ua) ? "mobile" : "desktop";
+  return { browser, os, device };
+}
+
+// src/runtime.ts
+var SDK_NAME = "magpie.javascript.browser";
+function browserRuntime(options = {}) {
+  let agent;
+  const ua = () => typeof navigator === "undefined" ? "" : navigator.userAgent;
+  const parsed = () => agent ??= parseUserAgent(ua());
+  return {
+    sdk: { name: options.sdkName ?? SDK_NAME, version: SDK_VERSION },
+    platform: "javascript",
+    // The caller passes the original fetch, taken before it is patched, so delivering an event is never itself traced.
+    createTransport: (dsn) => fetchTransport(dsn, options.fetch),
+    contexts() {
+      const a = parsed();
+      return {
+        browser: { name: a.browser.name, version: a.browser.version },
+        os: { name: a.os.name, ...a.os.version ? { version: a.os.version } : {} },
+        device: {
+          type: a.device,
+          ...typeof screen !== "undefined" ? { screen_resolution: `${screen.width}x${screen.height}` } : {},
+          ...typeof navigator !== "undefined" && navigator.language ? { language: navigator.language } : {}
+        }
+      };
+    },
+    request() {
+      if (typeof location === "undefined") return void 0;
+      return {
+        url: location.href,
+        headers: {
+          "User-Agent": ua(),
+          ...options.sendDefaultPii && typeof document !== "undefined" && document.referrer ? { Referer: document.referrer } : {}
+        }
+      };
+    }
+  };
+}
+var DEFAULTS = { pageload: true, history: false, idleTimeout: 1e3, maxDuration: 15e3 };
+var settings = /* @__PURE__ */ new WeakMap();
+function tracingIntegration(options = {}) {
+  return {
+    name: "Tracing",
+    setup(client) {
+      if (typeof window === "undefined" || !((client.options.tracesSampleRate ?? 0) > 0)) return;
+      const config = { ...DEFAULTS, ...options };
+      settings.set(client, config);
+      const teardown = [];
+      if (config.pageload) startPageload(client, config);
+      if (config.history) {
+        const onChange = () => startNavigation(client, location.pathname);
+        window.addEventListener("popstate", onChange);
+        teardown.push(() => window.removeEventListener("popstate", onChange));
+      }
+      return () => {
+        idleFor(client.activeTransaction)?.finish();
+        teardown.forEach((t) => t());
+      };
+    }
+  };
+}
+function startNavigation(client, name) {
+  const config = settings.get(client);
+  if (!config) return void 0;
+  if (client.activeTransaction) idleFor(client.activeTransaction)?.finish();
+  const tx = client.startTransaction({ name, op: "navigation" });
+  client.activeTransaction = tx;
+  client.scope.setTransactionName(name);
+  trackIdle(tx, {
+    idleTimeout: config.idleTimeout,
+    maxDuration: config.maxDuration,
+    onEnd: (ended) => {
+      if (client.activeTransaction === ended) client.activeTransaction = void 0;
+    }
+  });
+  return tx;
+}
+function renameActiveTransaction(client, name) {
+  client.activeTransaction?.setName(name);
+  client.scope.setTransactionName(name);
+}
+function startPageload(client, config) {
+  const meta = document.querySelector('meta[name="magpie-trace"]')?.getAttribute("content");
+  const parent = parseTraceHeader(meta);
+  const tx = client.startTransaction({
+    name: location.pathname,
+    op: "pageload",
+    startTimestamp: performance.timeOrigin / 1e3,
+    ...parent ? { traceId: parent.traceId, parentSpanId: parent.spanId, sampled: parent.sampled } : {}
+  });
+  client.activeTransaction = tx;
+  client.scope.setTransactionName(tx.name);
+  const lcp = observeLargestPaint();
+  trackIdle(tx, {
+    idleTimeout: config.idleTimeout,
+    maxDuration: config.maxDuration,
+    waitForLoad: true,
+    beforeEnd: (t) => addPageloadSpans(client, t, lcp()),
+    onEnd: (ended) => {
+      if (client.activeTransaction === ended) client.activeTransaction = void 0;
+    }
+  });
+}
+function observeLargestPaint() {
+  let value;
+  try {
+    const observer = new PerformanceObserver((list) => {
+      const last = list.getEntries().at(-1);
+      if (last) value = last.startTime;
+    });
+    observer.observe({ type: "largest-contentful-paint", buffered: true });
+  } catch {
+  }
+  return () => value;
+}
+function addPageloadSpans(client, tx, lcp) {
+  if (!tx.sampled) return;
+  try {
+    const origin = performance.timeOrigin;
+    const at = (ms) => (origin + ms) / 1e3;
+    const add = (op, description, from, to) => {
+      if (!(to > from) && !(op === "ui.paint" && to === from)) return;
+      const span = tx.startChild({ op, description, startTimestamp: at(from) });
+      span.end(at(to));
+    };
+    const nav = performance.getEntriesByType("navigation")[0];
+    if (nav) {
+      add("browser.dns", "DNS lookup", nav.domainLookupStart, nav.domainLookupEnd);
+      add("browser.connect", "Connection", nav.connectStart, nav.connectEnd);
+      add("browser.request", "Waiting for the first byte", nav.requestStart, nav.responseStart);
+      add("browser.response", "Downloading the document", nav.responseStart, nav.responseEnd);
+      add("browser.dom", "Building the page", nav.responseEnd, nav.domContentLoadedEventEnd);
+      add("browser.load", "Loading everything else", nav.domContentLoadedEventEnd, nav.loadEventEnd);
+    }
+    const fcp = performance.getEntriesByName("first-contentful-paint")[0];
+    if (fcp) add("ui.paint", "first-contentful-paint", fcp.startTime, fcp.startTime);
+    if (lcp !== void 0) add("ui.paint", "largest-contentful-paint", lcp, lcp);
+    const ingest = client.dsn?.origin;
+    performance.getEntriesByType("resource").filter((r) => {
+      const entry = r;
+      return ["script", "link", "css", "img"].includes(entry.initiatorType) && entry.responseEnd > 0 && !(ingest && entry.name.startsWith(ingest));
+    }).slice(0, 25).forEach((r) => {
+      const entry = r;
+      add(`resource.${entry.initiatorType}`, entry.name.split(/[?#]/)[0], entry.startTime, entry.responseEnd);
+    });
+  } catch {
+  }
+}
+var injectedRelease = () => globalThis.__MAGPIE_RELEASE__;
+function init(options = {}) {
+  if (typeof window === "undefined") return void 0;
+  const previous = getClient();
+  if (previous) void previous.close(0);
+  const { captureUnhandled = true, breadcrumbs = true, tracing, sdkName, integrations = [], ...rest } = options;
+  const crumbs = breadcrumbs === false ? {} : { console: true, clicks: true, history: true, http: true, ...breadcrumbs === true ? {} : breadcrumbs };
+  const tracesOn = (rest.tracesSampleRate ?? 0) > 0 && tracing !== false;
+  const nativeFetch = typeof window.fetch === "function" ? window.fetch.bind(window) : void 0;
+  const client = new Client(
+    { ...rest, release: rest.release ?? injectedRelease() },
+    browserRuntime({ sendDefaultPii: rest.sendDefaultPii, sdkName, fetch: nativeFetch })
+  );
+  const defaults = [
+    ...captureUnhandled ? [globalHandlers()] : [],
+    ...crumbs.console ? [consoleBreadcrumbs()] : [],
+    ...crumbs.clicks ? [clickBreadcrumbs()] : [],
+    ...crumbs.history ? [historyBreadcrumbs()] : [],
+    // Request breadcrumbs and spans share one patch, and tracing needs it, so it runs when either is wanted.
+    ...crumbs.http || tracesOn ? [httpIntegration()] : [],
+    ...tracesOn ? [tracingIntegration(typeof tracing === "object" ? tracing : {})] : []
+  ];
+  setClient(client);
+  client.scope.setTransactionName(location.pathname);
+  client.setupIntegrations([...defaults.filter((i) => i.name !== "Tracing"), ...defaults.filter((i) => i.name === "Tracing"), ...integrations]);
+  return client;
+}
+
+export { clickBreadcrumbs, consoleBreadcrumbs, describeElement, fetchTransport, globalHandlers, historyBreadcrumbs, httpIntegration, init, parseUserAgent, renameActiveTransaction, startNavigation, tracingIntegration };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map