@iaportafolio/nextjs 0.1.1 → 0.2.2

package/README.md

@@ -1,9 +1,12 @@
 # @iaportafolio/nextjs
 
-SDK para Next.js (App Router y Pages Router). Tiene dos mitades: **server** (Node runtime, captura errores de Route Handlers / Server Actions / SSR) y **client** (browser, captura `window.onerror` + `unhandledrejection` + Web Vitals manuales).
+SDK para Next.js — App Router y Pages Router. Cubre ambos lados:
+
+- **Server**: captura errores de Route Handlers, Server Actions y SSR. Vive sobre [`@iaportafolio/node`](../node/).
+- **Client (browser)**: RUM completo — Web Vitals (LCP/CLS/INP/FCP/TTFB), `window.error`, `unhandledrejection`, clicks/navegaciones como breadcrumbs, React `<ErrorBoundary>` y flush garantizado al cerrar el tab. Vive sobre [`@iaportafolio/browser`](../browser/).
 
 ```bash
-npm install @iaportafolio/nextjs @iaportafolio/node
+npm install @iaportafolio/nextjs @iaportafolio/node @iaportafolio/browser
 ```
 
 ## Server-side
@@ -43,22 +46,34 @@ export async function POST(req: Request) {
 }
 ```
 
-## Client-side (browser)
+## Client-side (RUM completo)
 
 ```tsx
 // app/faro-client.tsx
 'use client';
 import { useEffect } from 'react';
-import { initFaroClient } from '@iaportafolio/nextjs/client';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { initFaroClient, addBreadcrumb, setUser } from '@iaportafolio/nextjs/client';
 
 export function FaroClient() {
+  const pathname = usePathname();
+  const search = useSearchParams();
+
   useEffect(() => {
     initFaroClient({
       endpoint: process.env.NEXT_PUBLIC_FARO_ENDPOINT!,
       token:    process.env.NEXT_PUBLIC_FARO_TOKEN!,
       service:  'mi-next-app-web',
+      // release se autodetecta desde NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA si no la pasas
     });
   }, []);
+
+  // Breadcrumb explícito por ruta — el SDK ya rastrea pushState/popstate,
+  // pero esto da una entrada limpia con el pathname de Next.
+  useEffect(() => {
+    addBreadcrumb({ category: 'navigation', message: pathname, data: { pathname } });
+  }, [pathname, search]);
+
   return null;
 }
 
@@ -76,10 +91,58 @@ export default function RootLayout({ children }) {
 }
 ```
 
-El cliente:
-- Registra `window.onerror` y `unhandledrejection`.
-- Hace `flush` automático al `visibilitychange=hidden` y `pagehide` (usa `navigator.sendBeacon` cuando está disponible).
-- Adjunta `browser.url` y `browser.userAgent` a cada evento.
+### Identificar al usuario
+
+Tras hacer login:
+
+```ts
+import { setUser } from '@iaportafolio/nextjs/client';
+setUser({ id: user.id, email: user.email });
+```
+
+Todos los eventos siguientes incluyen `user.id`, `user.email`.
+
+### React Error Boundary
+
+Envuelve secciones críticas para capturar errores de render sin reventar la app entera:
+
+```tsx
+'use client';
+import { FaroErrorBoundary } from '@iaportafolio/nextjs/client';
+
+export default function CheckoutPage() {
+  return (
+    <FaroErrorBoundary
+      tags={{ module: 'checkout' }}
+      fallback={({ error, reset }) => (
+        <div>
+          <h1>Algo se rompió en el checkout</h1>
+          <pre>{error.message}</pre>
+          <button onClick={reset}>Reintentar</button>
+        </div>
+      )}
+    >
+      <Checkout />
+    </FaroErrorBoundary>
+  );
+}
+```
+
+### Qué captura automáticamente
+
+| Cosa | Cómo |
+| --- | --- |
+| Errores no atrapados | `window.onerror` y `unhandledrejection` |
+| Errores de React | `<FaroErrorBoundary>` (manual) |
+| **Web Vitals** | LCP, CLS, INP, FCP, TTFB enviados como logs con `metric.name`/`metric.value` |
+| Clicks | Breadcrumb con tag + id + texto del elemento |
+| Navegaciones | Breadcrumb en cada `history.pushState`/`popstate` |
+| Contexto | `browser.url`, `browser.userAgent`, `user.*` (si llamas `setUser`) |
+| Flush al cerrar tab | `navigator.sendBeacon` en `pagehide`/`visibilitychange=hidden` |
+
+### Apagar comportamientos
+
+`initFaroClient({ captureWebVitals: false, captureClicks: false, ... })` — todos los flags están en [`@iaportafolio/browser`](../browser/).
 
 ## Variables de entorno
 
@@ -88,4 +151,9 @@ El cliente:
 | `FARO_ENDPOINT`                   | solo servidor      | URL base                                  |
 | `FARO_TOKEN`                      | solo servidor      | Token de proyecto (privado)               |
 | `NEXT_PUBLIC_FARO_ENDPOINT`       | cliente + servidor | URL base para el navegador                |
-| `NEXT_PUBLIC_FARO_TOKEN`          | cliente + servidor | **Mismo token de proyecto.** Sí queda expuesto en el bundle — es deliberado, igual que en Sentry: el token solo permite ingerir, no leer datos del dashboard. |
+| `NEXT_PUBLIC_FARO_TOKEN`          | cliente + servidor | **Mismo token de proyecto.** Queda expuesto en el bundle — es deliberado, igual que en Sentry: el token solo permite ingerir, no leer datos del dashboard. |
+
+## Changelog
+
+- **v0.2.0**: RUM completo (Web Vitals, breadcrumbs, ErrorBoundary, setUser, navigation tracking). El cliente ahora se apoya en `@iaportafolio/browser`.
+- **v0.1.x**: captura básica de errores en el cliente.

package/dist/chunk-YWAGEOOH.js

@@ -0,0 +1,39 @@
+// src/client.ts
+import {
+  init as initBrowser
+} from "@iaportafolio/browser";
+import {
+  log,
+  info,
+  warn,
+  error,
+  captureException,
+  setUser,
+  addBreadcrumb,
+  flush,
+  close,
+  getClient
+} from "@iaportafolio/browser";
+import { FaroErrorBoundary } from "@iaportafolio/browser/react";
+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 initBrowser({ ...opts, release });
+}
+
+export {
+  initFaroClient,
+  log,
+  info,
+  warn,
+  error,
+  captureException,
+  setUser,
+  addBreadcrumb,
+  flush,
+  close,
+  getClient,
+  FaroErrorBoundary
+};

package/dist/client.cjs

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -19,126 +20,42 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/client.ts
 var client_exports = {};
 __export(client_exports, {
-  faroClient: () => faroClient,
-  initFaroClient: () => initFaroClient
+  FaroErrorBoundary: () => import_react.FaroErrorBoundary,
+  addBreadcrumb: () => import_browser2.addBreadcrumb,
+  captureException: () => import_browser2.captureException,
+  close: () => import_browser2.close,
+  error: () => import_browser2.error,
+  flush: () => import_browser2.flush,
+  getClient: () => import_browser2.getClient,
+  info: () => import_browser2.info,
+  initFaroClient: () => initFaroClient,
+  log: () => import_browser2.log,
+  setUser: () => import_browser2.setUser,
+  warn: () => import_browser2.warn
 });
 module.exports = __toCommonJS(client_exports);
-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;
-      if (ok) return;
-      const res = await fetch(`${endpoint}/api/v1/ingest/logs`, {
-        method: "POST",
-        keepalive: true,
-        headers: {
-          "Authorization": `Bearer ${opts.token}`,
-          "Content-Type": "application/json"
-        },
-        body
-      });
-      if (!res.ok) {
-        if (res.status >= 500) queue.unshift(...batch);
-      }
-    } catch (_e) {
-      queue.unshift(...batch);
-    }
-  }
-  function enqueue(level, message, attributes) {
-    const attrs = {};
-    if (opts.attributes) {
-      for (const [k, v] of Object.entries(opts.attributes)) attrs[k] = String(v);
-    }
-    if (opts.environment) attrs["deployment.environment"] = opts.environment;
-    if (opts.release) attrs["service.version"] = 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)) {
-        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) ?? {}
-      });
-    },
-    flush
-  };
-}
+var import_browser = require("@iaportafolio/browser");
+var import_browser2 = require("@iaportafolio/browser");
+var import_react = require("@iaportafolio/browser/react");
 function initFaroClient(opts) {
-  if (typeof window === "undefined") {
-    return {
-      log() {
-      },
-      info() {
-      },
-      warn() {
-      },
-      error() {
-      },
-      captureException() {
-      },
-      flush: async () => void 0
-    };
+  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;
   }
-  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;
-}
-function faroClient() {
-  if (!client) throw new Error("Hay que llamar a initFaroClient() antes de usarlo");
-  return client;
+  return (0, import_browser.init)({ ...opts, release });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  faroClient,
-  initFaroClient
+  FaroErrorBoundary,
+  addBreadcrumb,
+  captureException,
+  close,
+  error,
+  flush,
+  getClient,
+  info,
+  initFaroClient,
+  log,
+  setUser,
+  warn
 });

package/dist/client.d.cts

@@ -0,0 +1,59 @@
+import { FaroBrowserOptions, FaroBrowser } from '@iaportafolio/browser';
+export { Breadcrumb, FaroBrowserOptions, LogEntry, Severity, UserContext, WireEvent, addBreadcrumb, captureException, close, error, flush, getClient, info, log, setUser, warn } from '@iaportafolio/browser';
+export { FaroErrorBoundary, FaroErrorBoundaryProps } from '@iaportafolio/browser/react';
+
+/**
+ * Faro para Next.js — lado cliente (corre en el navegador).
+ *
+ * Es un wrapper fino sobre @iaportafolio/browser. El core (captura de
+ * window.error, Web Vitals, breadcrumbs, batching, sendBeacon en pagehide,
+ * ErrorBoundary React) vive en el paquete browser. Aquí sólo añadimos:
+ *  - auto-detección de la release desde env vars típicas de Vercel/Next
+ *  - re-exports para que sea ergonómico (`import {...} from '@iaportafolio/nextjs/client'`)
+ *
+ * Uso típico (App Router):
+ *
+ *   // app/faro-client.tsx
+ *   'use client';
+ *   import { useEffect } from 'react';
+ *   import { usePathname, useSearchParams } from 'next/navigation';
+ *   import { initFaroClient, addBreadcrumb } from '@iaportafolio/nextjs/client';
+ *
+ *   export function FaroClient() {
+ *     const pathname = usePathname();
+ *     const search = useSearchParams();
+ *
+ *     useEffect(() => {
+ *       initFaroClient({
+ *         endpoint: process.env.NEXT_PUBLIC_FARO_ENDPOINT!,
+ *         token:    process.env.NEXT_PUBLIC_FARO_TOKEN!,
+ *         service:  'mi-next-app-web',
+ *       });
+ *     }, []);
+ *
+ *     // (opcional) breadcrumb explícito en cada route change con el pathname limpio.
+ *     // El SDK ya captura pushState, esto sólo es más legible en el dashboard.
+ *     useEffect(() => {
+ *       addBreadcrumb({ category: 'navigation', message: pathname, data: { pathname } });
+ *     }, [pathname, search]);
+ *
+ *     return null;
+ *   }
+ *
+ *   // app/layout.tsx
+ *   import { FaroClient } from './faro-client';
+ *   <body><FaroClient />{children}</body>
+ *
+ * Y opcionalmente envuelve secciones críticas con ErrorBoundary:
+ *
+ *   import { FaroErrorBoundary } from '@iaportafolio/nextjs/client';
+ *   <FaroErrorBoundary fallback={...}><Checkout /></FaroErrorBoundary>
+ */
+
+/**
+ * Inicializa el SDK browser. Seguro de llamar en SSR — si `typeof window === 'undefined'`
+ * el SDK subyacente no hace nada. Llámalo desde `useEffect` en un componente 'use client'.
+ */
+declare function initFaroClient(opts: FaroBrowserOptions): FaroBrowser;
+
+export { initFaroClient };

package/dist/client.d.ts

@@ -0,0 +1,59 @@
+import { FaroBrowserOptions, FaroBrowser } from '@iaportafolio/browser';
+export { Breadcrumb, FaroBrowserOptions, LogEntry, Severity, UserContext, WireEvent, addBreadcrumb, captureException, close, error, flush, getClient, info, log, setUser, warn } from '@iaportafolio/browser';
+export { FaroErrorBoundary, FaroErrorBoundaryProps } from '@iaportafolio/browser/react';
+
+/**
+ * Faro para Next.js — lado cliente (corre en el navegador).
+ *
+ * Es un wrapper fino sobre @iaportafolio/browser. El core (captura de
+ * window.error, Web Vitals, breadcrumbs, batching, sendBeacon en pagehide,
+ * ErrorBoundary React) vive en el paquete browser. Aquí sólo añadimos:
+ *  - auto-detección de la release desde env vars típicas de Vercel/Next
+ *  - re-exports para que sea ergonómico (`import {...} from '@iaportafolio/nextjs/client'`)
+ *
+ * Uso típico (App Router):
+ *
+ *   // app/faro-client.tsx
+ *   'use client';
+ *   import { useEffect } from 'react';
+ *   import { usePathname, useSearchParams } from 'next/navigation';
+ *   import { initFaroClient, addBreadcrumb } from '@iaportafolio/nextjs/client';
+ *
+ *   export function FaroClient() {
+ *     const pathname = usePathname();
+ *     const search = useSearchParams();
+ *
+ *     useEffect(() => {
+ *       initFaroClient({
+ *         endpoint: process.env.NEXT_PUBLIC_FARO_ENDPOINT!,
+ *         token:    process.env.NEXT_PUBLIC_FARO_TOKEN!,
+ *         service:  'mi-next-app-web',
+ *       });
+ *     }, []);
+ *
+ *     // (opcional) breadcrumb explícito en cada route change con el pathname limpio.
+ *     // El SDK ya captura pushState, esto sólo es más legible en el dashboard.
+ *     useEffect(() => {
+ *       addBreadcrumb({ category: 'navigation', message: pathname, data: { pathname } });
+ *     }, [pathname, search]);
+ *
+ *     return null;
+ *   }
+ *
+ *   // app/layout.tsx
+ *   import { FaroClient } from './faro-client';
+ *   <body><FaroClient />{children}</body>
+ *
+ * Y opcionalmente envuelve secciones críticas con ErrorBoundary:
+ *
+ *   import { FaroErrorBoundary } from '@iaportafolio/nextjs/client';
+ *   <FaroErrorBoundary fallback={...}><Checkout /></FaroErrorBoundary>
+ */
+
+/**
+ * Inicializa el SDK browser. Seguro de llamar en SSR — si `typeof window === 'undefined'`
+ * el SDK subyacente no hace nada. Llámalo desde `useEffect` en un componente 'use client'.
+ */
+declare function initFaroClient(opts: FaroBrowserOptions): FaroBrowser;
+
+export { initFaroClient };

package/dist/client.js

@@ -1,8 +1,28 @@
 import {
-  faroClient,
-  initFaroClient
-} from "./chunk-TYH3TMKC.js";
+  FaroErrorBoundary,
+  addBreadcrumb,
+  captureException,
+  close,
+  error,
+  flush,
+  getClient,
+  info,
+  initFaroClient,
+  log,
+  setUser,
+  warn
+} from "./chunk-YWAGEOOH.js";
 export {
-  faroClient,
-  initFaroClient
+  FaroErrorBoundary,
+  addBreadcrumb,
+  captureException,
+  close,
+  error,
+  flush,
+  getClient,
+  info,
+  initFaroClient,
+  log,
+  setUser,
+  warn
 };

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: () => import_react.FaroErrorBoundary,
+  addBreadcrumb: () => import_browser2.addBreadcrumb,
+  captureException: () => import_browser2.captureException,
   captureRequestError: () => captureRequestError,
+  close: () => import_browser2.close,
+  error: () => import_browser2.error,
   faro: () => faro,
-  faroClient: () => faroClient,
+  flush: () => import_browser2.flush,
+  getClient: () => import_browser2.getClient,
+  info: () => import_browser2.info,
   initFaroClient: () => initFaroClient,
-  registerFaro: () => registerFaro
+  log: () => import_browser2.log,
+  registerFaro: () => registerFaro,
+  setUser: () => import_browser2.setUser,
+  warn: () => import_browser2.warn
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -60,125 +71,31 @@ 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;
-      if (ok) return;
-      const res = await fetch(`${endpoint}/api/v1/ingest/logs`, {
-        method: "POST",
-        keepalive: true,
-        headers: {
-          "Authorization": `Bearer ${opts.token}`,
-          "Content-Type": "application/json"
-        },
-        body
-      });
-      if (!res.ok) {
-        if (res.status >= 500) queue.unshift(...batch);
-      }
-    } catch (_e) {
-      queue.unshift(...batch);
-    }
-  }
-  function enqueue(level, message, attributes) {
-    const attrs = {};
-    if (opts.attributes) {
-      for (const [k, v] of Object.entries(opts.attributes)) attrs[k] = String(v);
-    }
-    if (opts.environment) attrs["deployment.environment"] = opts.environment;
-    if (opts.release) attrs["service.version"] = 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)) {
-        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) ?? {}
-      });
-    },
-    flush
-  };
-}
+var import_browser = require("@iaportafolio/browser");
+var import_browser2 = require("@iaportafolio/browser");
+var import_react = require("@iaportafolio/browser/react");
 function initFaroClient(opts) {
-  if (typeof window === "undefined") {
-    return {
-      log() {
-      },
-      info() {
-      },
-      warn() {
-      },
-      error() {
-      },
-      captureException() {
-      },
-      flush: async () => void 0
-    };
+  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;
   }
-  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;
-}
-function faroClient() {
-  if (!client) throw new Error("Hay que llamar a initFaroClient() antes de usarlo");
-  return client;
+  return (0, import_browser.init)({ ...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,6 @@
+export { ServerOptions, captureRequestError, registerFaro } from './server.cjs';
+export { initFaroClient } from './client.cjs';
+export { Breadcrumb, FaroBrowserOptions, LogEntry, Severity, UserContext, WireEvent, addBreadcrumb, captureException, close, error, flush, getClient, info, log, setUser, warn } from '@iaportafolio/browser';
+export { FaroErrorBoundary, FaroErrorBoundaryProps } from '@iaportafolio/browser/react';
+import * as faro from '@iaportafolio/node';
+export { faro };

package/dist/index.d.ts

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

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-YWAGEOOH.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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iaportafolio/nextjs",
-  "version": "0.1.1",
-  "description": "Faro SDK for Next.js (App Router + Pages Router)",
+  "version": "0.2.2",
+  "description": "Faro SDK for Next.js (App Router + Pages Router): RUM, Web Vitals, error capture, ErrorBoundary",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -36,27 +36,25 @@
   },
   "homepage": "https://github.com/IA-Portafolio/faro/tree/main/sdks/nextjs#readme",
   "bugs": "https://github.com/IA-Portafolio/faro/issues",
-  "keywords": [
-    "faro",
-    "nextjs",
-    "observability",
-    "logging",
-    "telemetry"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "provenance": true
-  },
-  "scripts": {
-    "build": "tsup src/index.ts src/client.ts src/server.ts --format cjs,esm --dts --clean"
-  },
+  "keywords": ["faro", "nextjs", "observability", "logging", "telemetry"],
+  "publishConfig": { "access": "public" },
+  "scripts": { "build": "tsup src/index.ts src/client.ts src/server.ts --format cjs,esm --dts --clean --external react --external next --external @iaportafolio/node --external @iaportafolio/browser" },
   "peerDependencies": {
     "@iaportafolio/node": "^0.1.0",
-    "next": ">=13"
+    "@iaportafolio/browser": "^0.1.0",
+    "next": ">=13",
+    "react": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true }
   },
   "devDependencies": {
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
-    "@types/node": "^20.0.0"
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "@iaportafolio/node": "^0.1.0",
+    "@iaportafolio/browser": "^0.1.0"
   }
 }

package/src/client.ts

@@ -1,14 +1,24 @@
 /**
  * Faro para Next.js — lado cliente (corre en el navegador).
  *
- * Uso:
+ * Es un wrapper fino sobre @iaportafolio/browser. El core (captura de
+ * window.error, Web Vitals, breadcrumbs, batching, sendBeacon en pagehide,
+ * ErrorBoundary React) vive en el paquete browser. Aquí sólo añadimos:
+ *  - auto-detección de la release desde env vars típicas de Vercel/Next
+ *  - re-exports para que sea ergonómico (`import {...} from '@iaportafolio/nextjs/client'`)
+ *
+ * Uso típico (App Router):
  *
  *   // app/faro-client.tsx
  *   'use client';
  *   import { useEffect } from 'react';
- *   import { initFaroClient } from '@iaportafolio/nextjs/client';
+ *   import { usePathname, useSearchParams } from 'next/navigation';
+ *   import { initFaroClient, addBreadcrumb } from '@iaportafolio/nextjs/client';
  *
  *   export function FaroClient() {
+ *     const pathname = usePathname();
+ *     const search = useSearchParams();
+ *
  *     useEffect(() => {
  *       initFaroClient({
  *         endpoint: process.env.NEXT_PUBLIC_FARO_ENDPOINT!,
@@ -16,143 +26,70 @@
  *         service:  'mi-next-app-web',
  *       });
  *     }, []);
+ *
+ *     // (opcional) breadcrumb explícito en cada route change con el pathname limpio.
+ *     // El SDK ya captura pushState, esto sólo es más legible en el dashboard.
+ *     useEffect(() => {
+ *       addBreadcrumb({ category: 'navigation', message: pathname, data: { pathname } });
+ *     }, [pathname, search]);
+ *
  *     return null;
  *   }
  *
- *   // y renderiza <FaroClient /> dentro de app/layout.tsx
+ *   // app/layout.tsx
+ *   import { FaroClient } from './faro-client';
+ *   <body><FaroClient />{children}</body>
+ *
+ * Y opcionalmente envuelve secciones críticas con ErrorBoundary:
+ *
+ *   import { FaroErrorBoundary } from '@iaportafolio/nextjs/client';
+ *   <FaroErrorBoundary fallback={...}><Checkout /></FaroErrorBoundary>
  */
 
-import type { FaroOptions } from '@iaportafolio/node';
-
-let client: ReturnType<typeof newClient> | null = null;
-
-interface BrowserClient {
-  log(entry: { level?: string; message: string; attributes?: Record<string, unknown> }): void;
-  info(msg: string, attrs?: Record<string, unknown>): void;
-  warn(msg: string, attrs?: Record<string, unknown>): void;
-  error(msg: string, attrs?: Record<string, unknown>): void;
-  captureException(err: unknown, ctx?: { tags?: Record<string, string>; message?: string }): void;
-  flush(): Promise<void>;
-}
-
-function newClient(opts: FaroOptions): BrowserClient {
-  const endpoint = opts.endpoint.replace(/\/$/, '');
-  const queue: unknown[] = [];
-  const maxBatch = opts.maxBatchSize ?? 100;
-  let pendingTimer: ReturnType<typeof setTimeout> | null = null;
+import {
+  init as initBrowser,
+  type FaroBrowser,
+  type FaroBrowserOptions,
+} from '@iaportafolio/browser';
 
-  function scheduleFlush(): void {
-    if (pendingTimer) return;
-    pendingTimer = setTimeout(() => {
-      pendingTimer = null;
-      void flush();
-    }, opts.flushIntervalMs ?? 1500);
-  }
-
-  async function flush(): Promise<void> {
-    if (queue.length === 0) return;
-    const batch = queue.splice(0, maxBatch);
-    try {
-      // sendBeacon maneja `pagehide` mejor que fetch.
-      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;
-      if (ok) return;
-      const res = await fetch(`${endpoint}/api/v1/ingest/logs`, {
-        method: 'POST',
-        keepalive: true,
-        headers: {
-          'Authorization': `Bearer ${opts.token}`,
-          'Content-Type': 'application/json',
-        },
-        body,
-      });
-      if (!res.ok) {
-        // Re-encola en best-effort si no es un 4xx (ahí la request es irrecuperable).
-        if (res.status >= 500) queue.unshift(...batch);
-      }
-    } catch (_e) {
-      queue.unshift(...batch);
-    }
-  }
+export type {
+  FaroBrowserOptions,
+  UserContext,
+  Breadcrumb,
+  LogEntry,
+  Severity,
+  WireEvent,
+} from '@iaportafolio/browser';
 
-  function enqueue(level: string, message: string, attributes?: Record<string, unknown>): void {
-    const attrs: Record<string, string> = {};
-    if (opts.attributes) {
-      for (const [k, v] of Object.entries(opts.attributes)) attrs[k] = String(v);
-    }
-    if (opts.environment) attrs['deployment.environment'] = opts.environment;
-    if (opts.release) attrs['service.version'] = 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)) {
-        attrs[k] = typeof v === 'string' ? v : JSON.stringify(v);
-      }
-    }
-    queue.push({
-      level,
-      message,
-      timestamp: new Date().toISOString(),
-      attributes: attrs,
-    });
-    if (queue.length >= maxBatch) void flush();
-    else scheduleFlush();
-  }
+export {
+  log,
+  info,
+  warn,
+  error,
+  captureException,
+  setUser,
+  addBreadcrumb,
+  flush,
+  close,
+  getClient,
+} from '@iaportafolio/browser';
 
-  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?.message ?? `${e.name}: ${e.message}`, {
-        'exception.type': e.name,
-        'exception.message': e.message,
-        'exception.stacktrace': e.stack ?? '',
-        ...(ctx?.tags ?? {}),
-      });
-    },
-    flush,
-  };
-}
+export { FaroErrorBoundary } from '@iaportafolio/browser/react';
+export type { FaroErrorBoundaryProps } from '@iaportafolio/browser/react';
 
-export function initFaroClient(opts: FaroOptions): BrowserClient {
-  if (typeof window === 'undefined') {
-    // Render en servidor — devolvemos un no-op para que el mismo import funcione.
-    return {
-      log() {}, info() {}, warn() {}, error() {}, captureException() {}, flush: async () => undefined,
-    };
+/**
+ * Inicializa el SDK browser. Seguro de llamar en SSR — si `typeof window === 'undefined'`
+ * el SDK subyacente no hace nada. Llámalo desde `useEffect` en un componente 'use client'.
+ */
+export function initFaroClient(opts: FaroBrowserOptions): FaroBrowser {
+  // Auto-detect release desde env vars típicas de Vercel/Next si no se pasó explícita.
+  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 ||
+      undefined;
   }
-  client = newClient(opts);
-
-  // Captura errores no manejados en el navegador.
-  window.addEventListener('error', (ev) => {
-    client?.captureException(ev.error ?? ev.message, { tags: { origin: 'window.error' } });
-  });
-  window.addEventListener('unhandledrejection', (ev) => {
-    client?.captureException(ev.reason, { tags: { origin: 'unhandledrejection' } });
-  });
-  // Hace flush cuando la pestaña se oculta.
-  document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'hidden') void client?.flush();
-  });
-  window.addEventListener('pagehide', () => void client?.flush());
-
-  return client;
-}
-
-export function faroClient(): BrowserClient {
-  if (!client) throw new Error('Hay que llamar a initFaroClient() antes de usarlo');
-  return client;
+  return initBrowser({ ...opts, release });
 }

package/dist/chunk-TYH3TMKC.js

@@ -1,120 +0,0 @@
-// 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;
-      if (ok) return;
-      const res = await fetch(`${endpoint}/api/v1/ingest/logs`, {
-        method: "POST",
-        keepalive: true,
-        headers: {
-          "Authorization": `Bearer ${opts.token}`,
-          "Content-Type": "application/json"
-        },
-        body
-      });
-      if (!res.ok) {
-        if (res.status >= 500) queue.unshift(...batch);
-      }
-    } catch (_e) {
-      queue.unshift(...batch);
-    }
-  }
-  function enqueue(level, message, attributes) {
-    const attrs = {};
-    if (opts.attributes) {
-      for (const [k, v] of Object.entries(opts.attributes)) attrs[k] = String(v);
-    }
-    if (opts.environment) attrs["deployment.environment"] = opts.environment;
-    if (opts.release) attrs["service.version"] = 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)) {
-        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) ?? {}
-      });
-    },
-    flush
-  };
-}
-function initFaroClient(opts) {
-  if (typeof window === "undefined") {
-    return {
-      log() {
-      },
-      info() {
-      },
-      warn() {
-      },
-      error() {
-      },
-      captureException() {
-      },
-      flush: async () => void 0
-    };
-  }
-  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;
-}
-function faroClient() {
-  if (!client) throw new Error("Hay que llamar a initFaroClient() antes de usarlo");
-  return client;
-}
-
-export {
-  initFaroClient,
-  faroClient
-};