@iaportafolio/nextjs 0.1.1 → 0.3.0

package/dist/index.cjs

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -29,11 +30,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  FaroErrorBoundary: () => FaroErrorBoundary,
+  addBreadcrumb: () => addBreadcrumb,
+  captureException: () => captureException2,
   captureRequestError: () => captureRequestError,
+  close: () => close,
+  error: () => error,
   faro: () => faro,
-  faroClient: () => faroClient,
+  flush: () => flush,
+  getClient: () => getClient,
+  info: () => info,
   initFaroClient: () => initFaroClient,
-  registerFaro: () => registerFaro
+  log: () => log,
+  registerFaro: () => registerFaro,
+  setUser: () => setUser,
+  warn: () => warn
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -59,126 +70,375 @@ function captureRequestError(err, request) {
   });
 }
 
-// src/client.ts
-var client = null;
-function newClient(opts) {
-  const endpoint = opts.endpoint.replace(/\/$/, "");
-  const queue = [];
-  const maxBatch = opts.maxBatchSize ?? 100;
-  let pendingTimer = null;
-  function scheduleFlush() {
-    if (pendingTimer) return;
-    pendingTimer = setTimeout(() => {
-      pendingTimer = null;
-      void flush();
-    }, opts.flushIntervalMs ?? 1500);
-  }
-  async function flush() {
-    if (queue.length === 0) return;
-    const batch = queue.splice(0, maxBatch);
-    try {
-      const body = JSON.stringify({ service: opts.service, logs: batch });
-      const ok = typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function" && document.visibilityState === "hidden" ? navigator.sendBeacon(
-        `${endpoint}/api/v1/ingest/logs?_token=${encodeURIComponent(opts.token)}`,
-        new Blob([body], { type: "application/json" })
-      ) : false;
+// src/browser-core.ts
+var FaroBrowser = class {
+  constructor(opts) {
+    this.queue = [];
+    this.breadcrumbs = [];
+    this.user = null;
+    this.timer = null;
+    this.cleanup = [];
+    this.closed = false;
+    this.opts = {
+      endpoint: opts.endpoint.replace(/\/$/, ""),
+      token: opts.token,
+      service: opts.service,
+      environment: opts.environment,
+      release: opts.release,
+      attributes: opts.attributes,
+      flushIntervalMs: opts.flushIntervalMs ?? 2e3,
+      maxBatchSize: opts.maxBatchSize ?? 100,
+      maxQueueSize: opts.maxQueueSize ?? 2e3,
+      maxBreadcrumbs: opts.maxBreadcrumbs ?? 30,
+      captureUnhandled: opts.captureUnhandled ?? true,
+      captureConsole: opts.captureConsole ?? false,
+      captureWebVitals: opts.captureWebVitals ?? true,
+      captureClicks: opts.captureClicks ?? true,
+      captureNavigation: opts.captureNavigation ?? true,
+      beforeSend: opts.beforeSend
+    };
+    if (typeof window === "undefined") {
+      return;
+    }
+    this.timer = setInterval(() => void this.flush(), this.opts.flushIntervalMs);
+    if (this.opts.captureUnhandled) this.installErrorHandlers();
+    if (this.opts.captureConsole) this.installConsoleCapture();
+    if (this.opts.captureWebVitals) this.installWebVitals();
+    if (this.opts.captureClicks) this.installClickTracking();
+    if (this.opts.captureNavigation) this.installNavigationTracking();
+    this.installLifecycleHooks();
+  }
+  setUser(user) {
+    this.user = user;
+  }
+  addBreadcrumb(crumb) {
+    if (this.breadcrumbs.length >= this.opts.maxBreadcrumbs) {
+      this.breadcrumbs.shift();
+    }
+    this.breadcrumbs.push({ ...crumb, timestamp: Date.now() });
+  }
+  log(entry) {
+    if (this.closed) return;
+    const attrs = this.composeAttributes(entry.attributes);
+    const evt = {
+      level: entry.level ?? "INFO",
+      message: entry.message,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      attributes: attrs,
+      trace_id: entry.trace_id,
+      span_id: entry.span_id
+    };
+    this.enqueue(evt);
+  }
+  info(message, attrs) {
+    this.log({ level: "INFO", message, attributes: attrs });
+  }
+  warn(message, attrs) {
+    this.log({ level: "WARN", message, attributes: attrs });
+  }
+  error(message, attrs) {
+    this.log({ level: "ERROR", message, attributes: attrs });
+  }
+  captureException(err, ctx) {
+    const e = toError(err);
+    this.log({
+      level: "ERROR",
+      message: ctx?.message ?? `${e.name}: ${e.message}`,
+      attributes: {
+        "exception.type": e.name,
+        "exception.message": e.message,
+        "exception.stacktrace": e.stack ?? "",
+        ...ctx?.tags ?? {}
+      }
+    });
+  }
+  async flush(useBeacon = false) {
+    if (this.queue.length === 0) return;
+    const batch = this.queue.splice(0, this.opts.maxBatchSize);
+    const body = JSON.stringify({ service: this.opts.service, logs: batch });
+    const url = `${this.opts.endpoint}/api/v1/ingest/logs`;
+    if (useBeacon && typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
+      const beaconUrl = `${url}?_token=${encodeURIComponent(this.opts.token)}`;
+      const ok = navigator.sendBeacon(beaconUrl, new Blob([body], { type: "application/json" }));
       if (ok) return;
-      const res = await fetch(`${endpoint}/api/v1/ingest/logs`, {
+    }
+    try {
+      const res = await fetch(url, {
         method: "POST",
         keepalive: true,
         headers: {
-          "Authorization": `Bearer ${opts.token}`,
+          "Authorization": `Bearer ${this.opts.token}`,
           "Content-Type": "application/json"
         },
         body
       });
-      if (!res.ok) {
-        if (res.status >= 500) queue.unshift(...batch);
+      if (!res.ok && res.status >= 500) {
+        this.queue.unshift(...batch);
       }
-    } catch (_e) {
-      queue.unshift(...batch);
+    } catch {
+      this.queue.unshift(...batch);
     }
   }
-  function enqueue(level, message, attributes) {
+  close() {
+    if (this.closed) return;
+    this.closed = true;
+    if (this.timer) clearInterval(this.timer);
+    this.timer = null;
+    for (const fn of this.cleanup) fn();
+    this.cleanup = [];
+    void this.flush(true);
+  }
+  enqueue(evt) {
+    const processed = this.opts.beforeSend ? this.opts.beforeSend(evt) : evt;
+    if (!processed) return;
+    if (this.queue.length >= this.opts.maxQueueSize) return;
+    this.queue.push(processed);
+  }
+  composeAttributes(extra) {
     const attrs = {};
-    if (opts.attributes) {
-      for (const [k, v] of Object.entries(opts.attributes)) attrs[k] = String(v);
+    if (this.opts.attributes) {
+      for (const [k, v] of Object.entries(this.opts.attributes)) attrs[k] = String(v);
     }
-    if (opts.environment) attrs["deployment.environment"] = opts.environment;
-    if (opts.release) attrs["service.version"] = opts.release;
+    if (this.opts.environment) attrs["deployment.environment"] = this.opts.environment;
+    if (this.opts.release) attrs["service.version"] = this.opts.release;
     if (typeof window !== "undefined") {
       attrs["browser.url"] = window.location.href;
       attrs["browser.userAgent"] = navigator.userAgent;
     }
-    if (attributes) {
-      for (const [k, v] of Object.entries(attributes)) {
+    if (this.user) {
+      if (this.user.id) attrs["user.id"] = this.user.id;
+      if (this.user.email) attrs["user.email"] = this.user.email;
+      if (this.user.username) attrs["user.name"] = this.user.username;
+    }
+    if (this.breadcrumbs.length > 0) {
+      attrs["breadcrumbs"] = JSON.stringify(this.breadcrumbs.slice(-this.opts.maxBreadcrumbs));
+    }
+    if (extra) {
+      for (const [k, v] of Object.entries(extra)) {
         attrs[k] = typeof v === "string" ? v : JSON.stringify(v);
       }
     }
-    queue.push({
-      level,
-      message,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      attributes: attrs
-    });
-    if (queue.length >= maxBatch) void flush();
-    else scheduleFlush();
-  }
-  return {
-    log: (e) => enqueue(e.level ?? "INFO", e.message, e.attributes),
-    info: (m, a) => enqueue("INFO", m, a),
-    warn: (m, a) => enqueue("WARN", m, a),
-    error: (m, a) => enqueue("ERROR", m, a),
-    captureException: (err, ctx) => {
-      const e = err instanceof Error ? err : new Error(typeof err === "string" ? err : JSON.stringify(err));
-      enqueue("ERROR", (ctx == null ? void 0 : ctx.message) ?? `${e.name}: ${e.message}`, {
-        "exception.type": e.name,
-        "exception.message": e.message,
-        "exception.stacktrace": e.stack ?? "",
-        ...(ctx == null ? void 0 : ctx.tags) ?? {}
+    return attrs;
+  }
+  installErrorHandlers() {
+    const onError = (ev) => {
+      this.captureException(ev.error ?? ev.message, {
+        tags: { origin: "window.error", "source.file": ev.filename ?? "", "source.line": String(ev.lineno ?? 0) }
       });
-    },
-    flush
-  };
-}
-function initFaroClient(opts) {
-  if (typeof window === "undefined") {
-    return {
-      log() {
-      },
-      info() {
-      },
-      warn() {
-      },
-      error() {
-      },
-      captureException() {
-      },
-      flush: async () => void 0
     };
+    const onRejection = (ev) => {
+      this.captureException(ev.reason, { tags: { origin: "unhandledrejection" } });
+    };
+    window.addEventListener("error", onError);
+    window.addEventListener("unhandledrejection", onRejection);
+    this.cleanup.push(() => window.removeEventListener("error", onError));
+    this.cleanup.push(() => window.removeEventListener("unhandledrejection", onRejection));
   }
-  client = newClient(opts);
-  window.addEventListener("error", (ev) => {
-    client == null ? void 0 : client.captureException(ev.error ?? ev.message, { tags: { origin: "window.error" } });
-  });
-  window.addEventListener("unhandledrejection", (ev) => {
-    client == null ? void 0 : client.captureException(ev.reason, { tags: { origin: "unhandledrejection" } });
-  });
-  document.addEventListener("visibilitychange", () => {
-    if (document.visibilityState === "hidden") void (client == null ? void 0 : client.flush());
-  });
-  window.addEventListener("pagehide", () => void (client == null ? void 0 : client.flush()));
-  return client;
+  installConsoleCapture() {
+    const orig = { error: console.error, warn: console.warn };
+    console.error = (...args) => {
+      this.addBreadcrumb({ category: "console", message: String(args[0] ?? ""), data: { level: "error" } });
+      this.log({ level: "ERROR", message: stringifyArgs(args), attributes: { "console.method": "error" } });
+      orig.error.apply(console, args);
+    };
+    console.warn = (...args) => {
+      this.addBreadcrumb({ category: "console", message: String(args[0] ?? ""), data: { level: "warn" } });
+      orig.warn.apply(console, args);
+    };
+    this.cleanup.push(() => {
+      console.error = orig.error;
+      console.warn = orig.warn;
+    });
+  }
+  installWebVitals() {
+    void import("web-vitals").then(({ onLCP, onCLS, onINP, onFCP, onTTFB }) => {
+      const report = (name) => (m) => {
+        this.log({
+          level: "INFO",
+          message: `web-vital ${name}`,
+          attributes: {
+            "metric.name": name,
+            "metric.value": m.value,
+            "metric.rating": m.rating,
+            "metric.id": m.id
+          }
+        });
+      };
+      onLCP(report("LCP"));
+      onCLS(report("CLS"));
+      onINP(report("INP"));
+      onFCP(report("FCP"));
+      onTTFB(report("TTFB"));
+    }).catch(() => {
+    });
+  }
+  installClickTracking() {
+    const onClick = (ev) => {
+      const target = ev.target;
+      if (!target) return;
+      const tag = target.tagName?.toLowerCase() ?? "";
+      const id = target.id;
+      const text = (target.textContent ?? "").trim().slice(0, 60);
+      const data = { tag };
+      if (id) data.id = id;
+      if (text) data.text = text;
+      this.addBreadcrumb({ category: "click", message: `${tag}${id ? "#" + id : ""}`, data });
+    };
+    window.addEventListener("click", onClick, { capture: true, passive: true });
+    this.cleanup.push(() => window.removeEventListener("click", onClick, { capture: true }));
+  }
+  installNavigationTracking() {
+    const log2 = (from, to, method) => {
+      if (from === to) return;
+      this.addBreadcrumb({ category: "navigation", message: `${from} \u2192 ${to}`, data: { method, to } });
+    };
+    const origPush = history.pushState;
+    const origReplace = history.replaceState;
+    history.pushState = function(...args) {
+      const from = location.href;
+      const ret = origPush.apply(this, args);
+      log2(from, location.href, "pushState");
+      return ret;
+    };
+    history.replaceState = function(...args) {
+      const from = location.href;
+      const ret = origReplace.apply(this, args);
+      log2(from, location.href, "replaceState");
+      return ret;
+    };
+    const onPop = () => log2("", location.href, "popstate");
+    window.addEventListener("popstate", onPop);
+    this.cleanup.push(() => {
+      history.pushState = origPush;
+      history.replaceState = origReplace;
+      window.removeEventListener("popstate", onPop);
+    });
+  }
+  installLifecycleHooks() {
+    const onHide = () => {
+      if (document.visibilityState === "hidden") void this.flush(true);
+    };
+    const onPageHide = () => void this.flush(true);
+    document.addEventListener("visibilitychange", onHide);
+    window.addEventListener("pagehide", onPageHide);
+    this.cleanup.push(() => document.removeEventListener("visibilitychange", onHide));
+    this.cleanup.push(() => window.removeEventListener("pagehide", onPageHide));
+  }
+};
+function toError(err) {
+  if (err instanceof Error) return err;
+  if (typeof err === "string") return new Error(err);
+  try {
+    return new Error(JSON.stringify(err));
+  } catch {
+    return new Error(String(err));
+  }
+}
+function stringifyArgs(args) {
+  return args.map((a) => typeof a === "string" ? a : a instanceof Error ? a.stack ?? a.message : safeJson(a)).join(" ");
+}
+function safeJson(v) {
+  try {
+    return JSON.stringify(v);
+  } catch {
+    return String(v);
+  }
+}
+var singleton = null;
+function init2(opts) {
+  if (singleton) singleton.close();
+  singleton = new FaroBrowser(opts);
+  return singleton;
+}
+function getClient() {
+  if (!singleton) throw new Error("faro: init() must be called before use");
+  return singleton;
+}
+function log(entry) {
+  getClient().log(entry);
 }
-function faroClient() {
-  if (!client) throw new Error("Hay que llamar a initFaroClient() antes de usarlo");
-  return client;
+function info(msg, attrs) {
+  getClient().info(msg, attrs);
+}
+function warn(msg, attrs) {
+  getClient().warn(msg, attrs);
+}
+function error(msg, attrs) {
+  getClient().error(msg, attrs);
+}
+function captureException2(err, ctx) {
+  getClient().captureException(err, ctx);
+}
+function setUser(user) {
+  getClient().setUser(user);
+}
+function addBreadcrumb(crumb) {
+  getClient().addBreadcrumb(crumb);
+}
+function flush() {
+  return getClient().flush();
+}
+function close() {
+  getClient().close();
+}
+
+// src/browser-react.tsx
+var React = __toESM(require("react"), 1);
+var FaroErrorBoundary = class extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+    this.reset = () => {
+      this.setState({ error: null });
+    };
+  }
+  static getDerivedStateFromError(error2) {
+    return { error: error2 };
+  }
+  componentDidCatch(error2, info2) {
+    captureException2(error2, {
+      tags: {
+        origin: "react.error-boundary",
+        ...this.props.tags ?? {}
+      },
+      message: error2.message
+    });
+    this.props.onError?.(error2, info2);
+  }
+  render() {
+    if (this.state.error) {
+      const fb = this.props.fallback;
+      if (typeof fb === "function") return fb({ error: this.state.error, reset: this.reset });
+      if (fb !== void 0) return fb;
+      return null;
+    }
+    return this.props.children;
+  }
+};
+
+// src/client.ts
+function initFaroClient(opts) {
+  let release = opts.release;
+  if (!release && typeof process !== "undefined" && process.env) {
+    release = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA || process.env.NEXT_PUBLIC_GIT_COMMIT_SHA || process.env.NEXT_PUBLIC_VERSION || void 0;
+  }
+  return init2({ ...opts, release });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FaroErrorBoundary,
+  addBreadcrumb,
+  captureException,
   captureRequestError,
+  close,
+  error,
   faro,
-  faroClient,
+  flush,
+  getClient,
+  info,
   initFaroClient,
-  registerFaro
+  log,
+  registerFaro,
+  setUser,
+  warn
 });

package/dist/index.d.cts

@@ -0,0 +1,5 @@
+export { ServerOptions, captureRequestError, registerFaro } from './server.cjs';
+export { Breadcrumb, FaroBrowser, FaroBrowserOptions, FaroErrorBoundary, FaroErrorBoundaryProps, LogEntry, Severity, UserContext, WireEvent, addBreadcrumb, captureException, close, error, flush, getClient, info, initFaroClient, log, setUser, warn } from './client.cjs';
+import * as faro from '@iaportafolio/node';
+export { faro };
+import 'react';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { ServerOptions, captureRequestError, registerFaro } from './server.js';
+export { Breadcrumb, FaroBrowser, FaroBrowserOptions, FaroErrorBoundary, FaroErrorBoundaryProps, LogEntry, Severity, UserContext, WireEvent, addBreadcrumb, captureException, close, error, flush, getClient, info, initFaroClient, log, setUser, warn } from './client.js';
+import * as faro from '@iaportafolio/node';
+export { faro };
+import 'react';

package/dist/index.js

@@ -1,16 +1,36 @@
 import {
-  faroClient,
-  initFaroClient
-} from "./chunk-TYH3TMKC.js";
+  FaroErrorBoundary,
+  addBreadcrumb,
+  captureException,
+  close,
+  error,
+  flush,
+  getClient,
+  info,
+  initFaroClient,
+  log,
+  setUser,
+  warn
+} from "./chunk-I3FDJF4L.js";
 import {
   captureRequestError,
   faro,
   registerFaro
 } from "./chunk-LFDO56A5.js";
 export {
+  FaroErrorBoundary,
+  addBreadcrumb,
+  captureException,
   captureRequestError,
+  close,
+  error,
   faro,
-  faroClient,
+  flush,
+  getClient,
+  info,
   initFaroClient,
-  registerFaro
+  log,
+  registerFaro,
+  setUser,
+  warn
 };

package/dist/server.cjs

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/server.d.cts

@@ -0,0 +1,42 @@
+import * as faro from '@iaportafolio/node';
+export { faro };
+
+/**
+ * Faro para Next.js — lado servidor (instrumentation.ts).
+ *
+ * Uso (Next.js 13.4+ App Router):
+ *
+ *   // next.config.mjs
+ *   export default { experimental: { instrumentationHook: true } };  // Next 14- only
+ *
+ *   // instrumentation.ts
+ *   export async function register() {
+ *     const { registerFaro } = await import('@iaportafolio/nextjs/server');
+ *     registerFaro({
+ *       endpoint: process.env.FARO_ENDPOINT!,
+ *       token: process.env.FARO_TOKEN!,
+ *       service: 'mi-next-app',
+ *       environment: process.env.NODE_ENV,
+ *       release: process.env.VERCEL_GIT_COMMIT_SHA,
+ *     });
+ *   }
+ *
+ *   export async function onRequestError(err: unknown, request: { path: string; method: string }) {
+ *     const { captureRequestError } = await import('@iaportafolio/nextjs/server');
+ *     captureRequestError(err, request);
+ *   }
+ */
+
+type ServerOptions = faro.FaroOptions;
+declare function registerFaro(opts: ServerOptions): void;
+/**
+ * Engánchalo al hook de instrumentación `onRequestError` de Next.js (Next 15+).
+ * Reporta el error con el contexto de la request adjunto como tags.
+ */
+declare function captureRequestError(err: unknown, request: {
+    path?: string;
+    method?: string;
+    routerKind?: string;
+}): void;
+
+export { type ServerOptions, captureRequestError, registerFaro };

package/dist/server.d.ts

@@ -0,0 +1,42 @@
+import * as faro from '@iaportafolio/node';
+export { faro };
+
+/**
+ * Faro para Next.js — lado servidor (instrumentation.ts).
+ *
+ * Uso (Next.js 13.4+ App Router):
+ *
+ *   // next.config.mjs
+ *   export default { experimental: { instrumentationHook: true } };  // Next 14- only
+ *
+ *   // instrumentation.ts
+ *   export async function register() {
+ *     const { registerFaro } = await import('@iaportafolio/nextjs/server');
+ *     registerFaro({
+ *       endpoint: process.env.FARO_ENDPOINT!,
+ *       token: process.env.FARO_TOKEN!,
+ *       service: 'mi-next-app',
+ *       environment: process.env.NODE_ENV,
+ *       release: process.env.VERCEL_GIT_COMMIT_SHA,
+ *     });
+ *   }
+ *
+ *   export async function onRequestError(err: unknown, request: { path: string; method: string }) {
+ *     const { captureRequestError } = await import('@iaportafolio/nextjs/server');
+ *     captureRequestError(err, request);
+ *   }
+ */
+
+type ServerOptions = faro.FaroOptions;
+declare function registerFaro(opts: ServerOptions): void;
+/**
+ * Engánchalo al hook de instrumentación `onRequestError` de Next.js (Next 15+).
+ * Reporta el error con el contexto de la request adjunto como tags.
+ */
+declare function captureRequestError(err: unknown, request: {
+    path?: string;
+    method?: string;
+    routerKind?: string;
+}): void;
+
+export { type ServerOptions, captureRequestError, registerFaro };