npm - @iaportafolio/nextjs - Versions diffs - 0.1.1 → 0.3.0 - Mend

@iaportafolio/nextjs 0.1.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/src/client.ts CHANGED Viewed

@@ -1,14 +1,26 @@
 /**
  * Faro para Next.js — lado cliente (corre en el navegador).
  *
- * Uso:
+ * Punto de entrada público para el RUM en Next.js:
+ *  - captura de window.error / unhandledrejection
+ *  - Web Vitals (LCP/CLS/INP/FCP/TTFB)
+ *  - breadcrumbs de clicks y navegaciones (history.pushState/popstate)
+ *  - sendBeacon en pagehide / visibilitychange=hidden (no se pierden eventos)
+ *  - ErrorBoundary React (`<FaroErrorBoundary>`)
+ *  - auto-detección de release desde env vars típicas de Vercel/Next
+ *
+ * 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 +28,63 @@
  *         service:  'mi-next-app-web',
  *       });
  *     }, []);
+ *
+ *     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>
  */
-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;
-  function scheduleFlush(): void {
-    if (pendingTimer) return;
-    pendingTimer = setTimeout(() => {
-      pendingTimer = null;
-      void flush();
-    }, opts.flushIntervalMs ?? 1500);
-  }
+import {
+  init as initBrowser,
+  type FaroBrowser,
+  type FaroBrowserOptions,
+} from './browser-core';
-  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,
+  FaroBrowser,
+} from './browser-core';
-  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 './browser-core';
-  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 './browser-react';
+export type { FaroErrorBoundaryProps } from './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 RUM en el navegador. Seguro de llamar en SSR — si `typeof window === 'undefined'`
+ * el core no hace nada. Llámalo desde `useEffect` en un componente 'use client'.
+ */
+export function initFaroClient(opts: FaroBrowserOptions): FaroBrowser {
+  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 DELETED Viewed

@@ -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
-};