@iaportafolio/nextjs 0.1.0 → 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-LFDO56A5.js

@@ -0,0 +1,27 @@
+// src/server.ts
+import * as faro from "@iaportafolio/node";
+var installed = false;
+function registerFaro(opts) {
+  if (installed) return;
+  if (process.env.NEXT_RUNTIME && process.env.NEXT_RUNTIME !== "nodejs") {
+    return;
+  }
+  faro.init(opts);
+  installed = true;
+}
+function captureRequestError(err, request) {
+  if (!installed) return;
+  faro.captureException(err, {
+    tags: {
+      "http.path": request.path ?? "",
+      "http.method": request.method ?? "",
+      "next.router": request.routerKind ?? ""
+    }
+  });
+}
+
+export {
+  faro,
+  registerFaro,
+  captureRequestError
+};

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

@@ -0,0 +1,61 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client.ts
+var client_exports = {};
+__export(client_exports, {
+  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 import_browser = require("@iaportafolio/browser");
+var import_browser2 = require("@iaportafolio/browser");
+var import_react = require("@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 (0, import_browser.init)({ ...opts, release });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  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

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

package/dist/index.cjs

@@ -0,0 +1,101 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// 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,
+  flush: () => import_browser2.flush,
+  getClient: () => import_browser2.getClient,
+  info: () => import_browser2.info,
+  initFaroClient: () => initFaroClient,
+  log: () => import_browser2.log,
+  registerFaro: () => registerFaro,
+  setUser: () => import_browser2.setUser,
+  warn: () => import_browser2.warn
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/server.ts
+var faro = __toESM(require("@iaportafolio/node"), 1);
+var installed = false;
+function registerFaro(opts) {
+  if (installed) return;
+  if (process.env.NEXT_RUNTIME && process.env.NEXT_RUNTIME !== "nodejs") {
+    return;
+  }
+  faro.init(opts);
+  installed = true;
+}
+function captureRequestError(err, request) {
+  if (!installed) return;
+  faro.captureException(err, {
+    tags: {
+      "http.path": request.path ?? "",
+      "http.method": request.method ?? "",
+      "next.router": request.routerKind ?? ""
+    }
+  });
+}
+
+// src/client.ts
+var import_browser = require("@iaportafolio/browser");
+var import_browser2 = require("@iaportafolio/browser");
+var import_react = require("@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 (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,
+  flush,
+  getClient,
+  info,
+  initFaroClient,
+  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

@@ -0,0 +1,36 @@
+import {
+  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,
+  flush,
+  getClient,
+  info,
+  initFaroClient,
+  log,
+  registerFaro,
+  setUser,
+  warn
+};

package/dist/server.cjs

@@ -0,0 +1,63 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/server.ts
+var server_exports = {};
+__export(server_exports, {
+  captureRequestError: () => captureRequestError,
+  faro: () => faro,
+  registerFaro: () => registerFaro
+});
+module.exports = __toCommonJS(server_exports);
+var faro = __toESM(require("@iaportafolio/node"), 1);
+var installed = false;
+function registerFaro(opts) {
+  if (installed) return;
+  if (process.env.NEXT_RUNTIME && process.env.NEXT_RUNTIME !== "nodejs") {
+    return;
+  }
+  faro.init(opts);
+  installed = true;
+}
+function captureRequestError(err, request) {
+  if (!installed) return;
+  faro.captureException(err, {
+    tags: {
+      "http.path": request.path ?? "",
+      "http.method": request.method ?? "",
+      "next.router": request.routerKind ?? ""
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  captureRequestError,
+  faro,
+  registerFaro
+});

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/dist/server.js

@@ -0,0 +1,10 @@
+import {
+  captureRequestError,
+  faro,
+  registerFaro
+} from "./chunk-LFDO56A5.js";
+export {
+  captureRequestError,
+  faro,
+  registerFaro
+};

package/package.json

@@ -1,24 +1,60 @@
 {
   "name": "@iaportafolio/nextjs",
-  "version": "0.1.0",
-  "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",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js", "require": "./dist/index.cjs" },
-    "./client": { "types": "./dist/client.d.ts", "import": "./dist/client.js", "require": "./dist/client.cjs" },
-    "./server": { "types": "./dist/server.d.ts", "import": "./dist/server.js", "require": "./dist/server.cjs" }
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "require": "./dist/client.cjs"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IA-Portafolio/faro.git",
+    "directory": "sdks/nextjs"
   },
-  "files": ["dist", "src", "README.md"],
-  "repository": { "type": "git", "url": "git+https://github.com/IA-Portafolio/faro.git", "directory": "sdks/nextjs" },
   "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" },
-  "scripts": { "build": "tsup src/index.ts src/client.ts src/server.ts --format cjs,esm --dts --clean" },
-  "peerDependencies": { "@iaportafolio/node": "^0.1.0", "next": ">=13" },
-  "devDependencies": { "tsup": "^8.0.0", "typescript": "^5.4.0", "@types/node": "^20.0.0" }
+  "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",
+    "@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/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 });
 }