@zauru-sdk/components 6.4.0 → 6.5.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.4.0...@zauru-sdk/components@6.5.0) (2026-09-16)
+
+
+### Features
+
+* extraer CloudWatch y observabilidad de Remix al SDK ([425af0d](https://github.com/intuitiva/zauru-typescript-sdk/commit/425af0dcd1955d2739204b3f69f9d77090553141))
+
+
+
+
+
 # [6.4.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.3.2...@zauru-sdk/components@6.4.0) (2026-09-16)
 
 

package/dist/Containers/BodyContainer.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
 type Props = {
     children: React.ReactNode;
+    appVersion?: string;
+    /** Default true. Captures window.onerror / unhandledrejection. */
+    reportClientErrors?: boolean;
 };
 export declare const BodyContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Layouts/errorLayout/index.d.ts

@@ -1,8 +1,10 @@
-export declare const ErrorLayout: ({ from, isRootLevel, error: parentError, onError, }: {
+export declare const ErrorLayout: ({ from, isRootLevel, error: parentError, onError, reportErrors, }: {
     from?: string;
     isRootLevel?: boolean;
     error?: Error;
     onError?: (error: Error, meta: {
         from?: string;
     }) => void;
+    /** Default true. POSTs to `/api/client-errors` unless `onError` is passed. */
+    reportErrors?: boolean;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/Containers/BodyContainer.js

@@ -1,5 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useZauruClientErrorReporting } from "../observability/useZauruClientErrorReporting.js";
 export const BodyContainer = (props) => {
-    const { children } = props;
+    const { children, appVersion, reportClientErrors = true } = props;
+    useZauruClientErrorReporting({
+        appVersion,
+        enabled: reportClientErrors,
+    });
     return _jsx("body", { className: "flex flex-col min-h-screen m-0", children: children });
 };

package/dist/esm/Layouts/errorLayout/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isRouteErrorResponse, Links, Meta, Scripts, useRouteError, Link, } from "@remix-run/react";
 import { useEffect, useState } from "react";
-export const ErrorLayout = ({ from, isRootLevel = true, error: parentError, onError, }) => {
+import { sendClientError } from "../../observability/sendClientError.js";
+export const ErrorLayout = ({ from, isRootLevel = true, error: parentError, onError, reportErrors = true, }) => {
     try {
         const error = useRouteError();
         const [showDetails, setShowDetails] = useState(!!parentError);
@@ -10,7 +11,25 @@ export const ErrorLayout = ({ from, isRootLevel = true, error: parentError, onEr
             if (reportable instanceof Error) {
                 onError?.(reportable, { from });
             }
-        }, [error, parentError, from, onError]);
+            if (!reportErrors || onError)
+                return;
+            if (reportable instanceof Error) {
+                sendClientError({
+                    message: reportable.message,
+                    stack: reportable.stack,
+                    source: "errorBoundary",
+                    url: from,
+                });
+                return;
+            }
+            if (isRouteErrorResponse(error)) {
+                sendClientError({
+                    message: `Error en request: ${error.status}: ${error.statusText}`,
+                    source: "errorBoundary",
+                    url: from,
+                });
+            }
+        }, [error, parentError, from, onError, reportErrors]);
         const baseError = (_jsxs("div", { className: "min-h-screen flex flex-col items-center justify-center p-4", children: [_jsx("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), _jsx("h1", { className: "text-5xl font-extrabold text-red-500 mb-6", children: "\u00A1Ups!" }), _jsxs("div", { className: "w-full max-w-2xl flex flex-col items-center", children: [_jsx("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: isRouteErrorResponse(error)
                                 ? `Error en request: ${error.status}: ${error.statusText} - PATH: ${error.data.path} - MESSAGE: ${error.data.message}`
                                 : error instanceof Error

package/dist/esm/index.js

@@ -26,3 +26,4 @@ export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";
 export * from "./Routes/index.js";
 export * from "./SidePanel/index.js";
+export * from "./observability/index.js";

package/dist/esm/observability/ZauruObservability.js

@@ -0,0 +1,9 @@
+import { useZauruClientErrorReporting } from "./useZauruClientErrorReporting.js";
+/**
+ * Optional drop-in for apps that do not use `BodyContainer`.
+ * `BodyContainer` already installs the same listeners.
+ */
+export function ZauruObservability(options) {
+    useZauruClientErrorReporting(options);
+    return null;
+}

package/dist/esm/observability/index.js

@@ -0,0 +1,3 @@
+export * from "./sendClientError.js";
+export * from "./useZauruClientErrorReporting.js";
+export * from "./ZauruObservability.js";

package/dist/esm/observability/sendClientError.js

@@ -0,0 +1,48 @@
+/**
+ * Client helper to report errors to `/api/client-errors`, which forwards
+ * them to CloudWatch Logs (with host logs as fallback).
+ *
+ * `keepalive: true` keeps the request alive if the page unloads right after.
+ */
+const ENDPOINT = "/api/client-errors";
+let lastReportedKey = "";
+let defaultAppVersion;
+export function setClientErrorAppVersion(version) {
+    defaultAppVersion = version;
+}
+/**
+ * Sends a client error to the server. Best-effort: never throws.
+ * Deduplicates identical consecutive reports so re-renders of the same
+ * error do not flood CloudWatch.
+ */
+export function sendClientError(payload) {
+    if (typeof window === "undefined")
+        return;
+    const body = {
+        message: payload.message,
+        stack: payload.stack,
+        source: payload.source ?? "unknown",
+        url: payload.url ?? window.location.href,
+        userAgent: payload.userAgent ?? navigator.userAgent,
+        appVersion: payload.appVersion ?? defaultAppVersion,
+        timestamp: payload.timestamp ?? Date.now(),
+    };
+    const dedupKey = `${body.source}|${body.message}|${body.url}`;
+    if (dedupKey === lastReportedKey)
+        return;
+    lastReportedKey = dedupKey;
+    try {
+        fetch(ENDPOINT, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(body),
+            keepalive: true,
+            credentials: "same-origin",
+        }).catch(() => {
+            // Silent: reporting must not break UX.
+        });
+    }
+    catch {
+        // Silent.
+    }
+}

package/dist/esm/observability/useZauruClientErrorReporting.js

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import { sendClientError, setClientErrorAppVersion, } from "./sendClientError.js";
+/**
+ * Captures `window.onerror` and `unhandledrejection` and POSTs them to
+ * `/api/client-errors`. Used by `BodyContainer` by default.
+ */
+export function useZauruClientErrorReporting(options) {
+    const enabled = options?.enabled !== false;
+    const appVersion = options?.appVersion;
+    useEffect(() => {
+        if (!enabled || typeof window === "undefined")
+            return;
+        if (appVersion)
+            setClientErrorAppVersion(appVersion);
+        const onError = (event) => {
+            sendClientError({
+                message: event.message || "Error no capturado (window.onerror)",
+                stack: event.error instanceof Error ? event.error.stack : undefined,
+                source: "window.onerror",
+            });
+        };
+        const onRejection = (event) => {
+            const reason = event.reason;
+            sendClientError({
+                message: reason instanceof Error
+                    ? reason.message
+                    : typeof reason === "string"
+                        ? reason
+                        : "Promesa rechazada no manejada",
+                stack: reason instanceof Error ? reason.stack : undefined,
+                source: "unhandledrejection",
+            });
+        };
+        window.addEventListener("error", onError);
+        window.addEventListener("unhandledrejection", onRejection);
+        return () => {
+            window.removeEventListener("error", onError);
+            window.removeEventListener("unhandledrejection", onRejection);
+        };
+    }, [enabled, appVersion]);
+}

package/dist/index.d.ts

@@ -26,3 +26,4 @@ export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";
 export * from "./Routes/index.js";
 export * from "./SidePanel/index.js";
+export * from "./observability/index.js";

package/dist/observability/ZauruObservability.d.ts

@@ -0,0 +1,6 @@
+import type { ZauruClientErrorReportingOptions } from "./useZauruClientErrorReporting.js";
+/**
+ * Optional drop-in for apps that do not use `BodyContainer`.
+ * `BodyContainer` already installs the same listeners.
+ */
+export declare function ZauruObservability(options: ZauruClientErrorReportingOptions): null;

package/dist/observability/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./sendClientError.js";
+export * from "./useZauruClientErrorReporting.js";
+export * from "./ZauruObservability.js";

package/dist/observability/sendClientError.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Client helper to report errors to `/api/client-errors`, which forwards
+ * them to CloudWatch Logs (with host logs as fallback).
+ *
+ * `keepalive: true` keeps the request alive if the page unloads right after.
+ */
+export interface ClientErrorPayload {
+    message: string;
+    stack?: string;
+    /** Sub-origin: errorBoundary, window.onerror, unhandledrejection. */
+    source?: string;
+    url?: string;
+    userAgent?: string;
+    appVersion?: string;
+    timestamp?: number;
+    [key: string]: unknown;
+}
+export declare function setClientErrorAppVersion(version?: string): void;
+/**
+ * Sends a client error to the server. Best-effort: never throws.
+ * Deduplicates identical consecutive reports so re-renders of the same
+ * error do not flood CloudWatch.
+ */
+export declare function sendClientError(payload: ClientErrorPayload): void;

package/dist/observability/useZauruClientErrorReporting.d.ts

@@ -0,0 +1,9 @@
+export type ZauruClientErrorReportingOptions = {
+    appVersion?: string;
+    enabled?: boolean;
+};
+/**
+ * Captures `window.onerror` and `unhandledrejection` and POSTs them to
+ * `/api/client-errors`. Used by `BodyContainer` by default.
+ */
+export declare function useZauruClientErrorReporting(options?: ZauruClientErrorReportingOptions): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -49,7 +49,7 @@
     "@zauru-sdk/icons": "^6.0.0",
     "@zauru-sdk/redux": "^6.5.9",
     "@zauru-sdk/types": "^6.16.0",
-    "@zauru-sdk/utils": "^6.15.0",
+    "@zauru-sdk/utils": "^6.16.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "7ccc6b0a3d1c426f8b62579a64a0bb0be73d2fcd"
+  "gitHead": "41f536143a03ddca17bbf467c027ef0179493479"
 }

package/src/Containers/BodyContainer.tsx

@@ -1,10 +1,18 @@
 import React from "react";
+import { useZauruClientErrorReporting } from "../observability/useZauruClientErrorReporting.js";
 
 type Props = {
   children: React.ReactNode;
+  appVersion?: string;
+  /** Default true. Captures window.onerror / unhandledrejection. */
+  reportClientErrors?: boolean;
 };
 
 export const BodyContainer = (props: Props) => {
-  const { children } = props;
+  const { children, appVersion, reportClientErrors = true } = props;
+  useZauruClientErrorReporting({
+    appVersion,
+    enabled: reportClientErrors,
+  });
   return <body className="flex flex-col min-h-screen m-0">{children}</body>;
 };

package/src/Layouts/errorLayout/index.tsx

@@ -7,17 +7,21 @@ import {
   Link,
 } from "@remix-run/react";
 import { useEffect, useState } from "react";
+import { sendClientError } from "../../observability/sendClientError.js";
 
 export const ErrorLayout = ({
   from,
   isRootLevel = true,
   error: parentError,
   onError,
+  reportErrors = true,
 }: {
   from?: string;
   isRootLevel?: boolean;
   error?: Error;
   onError?: (error: Error, meta: { from?: string }) => void;
+  /** Default true. POSTs to `/api/client-errors` unless `onError` is passed. */
+  reportErrors?: boolean;
 }) => {
   try {
     const error = useRouteError();
@@ -28,7 +32,24 @@ export const ErrorLayout = ({
       if (reportable instanceof Error) {
         onError?.(reportable, { from });
       }
-    }, [error, parentError, from, onError]);
+      if (!reportErrors || onError) return;
+      if (reportable instanceof Error) {
+        sendClientError({
+          message: reportable.message,
+          stack: reportable.stack,
+          source: "errorBoundary",
+          url: from,
+        });
+        return;
+      }
+      if (isRouteErrorResponse(error)) {
+        sendClientError({
+          message: `Error en request: ${error.status}: ${error.statusText}`,
+          source: "errorBoundary",
+          url: from,
+        });
+      }
+    }, [error, parentError, from, onError, reportErrors]);
 
     const baseError = (
       <div className="min-h-screen flex flex-col items-center justify-center p-4">

package/src/index.ts

@@ -26,3 +26,4 @@ export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";
 export * from "./Routes/index.js";
 export * from "./SidePanel/index.js";
+export * from "./observability/index.js";

package/src/observability/ZauruObservability.tsx

@@ -0,0 +1,11 @@
+import { useZauruClientErrorReporting } from "./useZauruClientErrorReporting.js";
+import type { ZauruClientErrorReportingOptions } from "./useZauruClientErrorReporting.js";
+
+/**
+ * Optional drop-in for apps that do not use `BodyContainer`.
+ * `BodyContainer` already installs the same listeners.
+ */
+export function ZauruObservability(options: ZauruClientErrorReportingOptions) {
+  useZauruClientErrorReporting(options);
+  return null;
+}

package/src/observability/index.ts

@@ -0,0 +1,3 @@
+export * from "./sendClientError.js";
+export * from "./useZauruClientErrorReporting.js";
+export * from "./ZauruObservability.js";

package/src/observability/sendClientError.ts

@@ -0,0 +1,64 @@
+/**
+ * Client helper to report errors to `/api/client-errors`, which forwards
+ * them to CloudWatch Logs (with host logs as fallback).
+ *
+ * `keepalive: true` keeps the request alive if the page unloads right after.
+ */
+
+export interface ClientErrorPayload {
+  message: string;
+  stack?: string;
+  /** Sub-origin: errorBoundary, window.onerror, unhandledrejection. */
+  source?: string;
+  url?: string;
+  userAgent?: string;
+  appVersion?: string;
+  timestamp?: number;
+  [key: string]: unknown;
+}
+
+const ENDPOINT = "/api/client-errors";
+
+let lastReportedKey = "";
+let defaultAppVersion: string | undefined;
+
+export function setClientErrorAppVersion(version?: string): void {
+  defaultAppVersion = version;
+}
+
+/**
+ * Sends a client error to the server. Best-effort: never throws.
+ * Deduplicates identical consecutive reports so re-renders of the same
+ * error do not flood CloudWatch.
+ */
+export function sendClientError(payload: ClientErrorPayload): void {
+  if (typeof window === "undefined") return;
+
+  const body = {
+    message: payload.message,
+    stack: payload.stack,
+    source: payload.source ?? "unknown",
+    url: payload.url ?? window.location.href,
+    userAgent: payload.userAgent ?? navigator.userAgent,
+    appVersion: payload.appVersion ?? defaultAppVersion,
+    timestamp: payload.timestamp ?? Date.now(),
+  };
+
+  const dedupKey = `${body.source}|${body.message}|${body.url}`;
+  if (dedupKey === lastReportedKey) return;
+  lastReportedKey = dedupKey;
+
+  try {
+    fetch(ENDPOINT, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+      keepalive: true,
+      credentials: "same-origin",
+    }).catch(() => {
+      // Silent: reporting must not break UX.
+    });
+  } catch {
+    // Silent.
+  }
+}

package/src/observability/useZauruClientErrorReporting.ts

@@ -0,0 +1,56 @@
+import { useEffect } from "react";
+import {
+  sendClientError,
+  setClientErrorAppVersion,
+} from "./sendClientError.js";
+
+export type ZauruClientErrorReportingOptions = {
+  appVersion?: string;
+  enabled?: boolean;
+};
+
+/**
+ * Captures `window.onerror` and `unhandledrejection` and POSTs them to
+ * `/api/client-errors`. Used by `BodyContainer` by default.
+ */
+export function useZauruClientErrorReporting(
+  options?: ZauruClientErrorReportingOptions,
+): void {
+  const enabled = options?.enabled !== false;
+  const appVersion = options?.appVersion;
+
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+
+    if (appVersion) setClientErrorAppVersion(appVersion);
+
+    const onError = (event: ErrorEvent) => {
+      sendClientError({
+        message: event.message || "Error no capturado (window.onerror)",
+        stack: event.error instanceof Error ? event.error.stack : undefined,
+        source: "window.onerror",
+      });
+    };
+
+    const onRejection = (event: PromiseRejectionEvent) => {
+      const reason = event.reason;
+      sendClientError({
+        message:
+          reason instanceof Error
+            ? reason.message
+            : typeof reason === "string"
+              ? reason
+              : "Promesa rechazada no manejada",
+        stack: reason instanceof Error ? reason.stack : undefined,
+        source: "unhandledrejection",
+      });
+    };
+
+    window.addEventListener("error", onError);
+    window.addEventListener("unhandledrejection", onRejection);
+    return () => {
+      window.removeEventListener("error", onError);
+      window.removeEventListener("unhandledrejection", onRejection);
+    };
+  }, [enabled, appVersion]);
+}