@drakkar.software/sunglasses-react 0.8.0 → 0.11.0

package/dist/index.d.mts

@@ -1,12 +1,25 @@
 import React from 'react';
-import { ISunglassesClient, ScreenTrackingOptions, ConsentStatus } from '@drakkar.software/sunglasses-core';
-export { ConsentStatus, ISunglassesClient, ScreenTrackingOptions, SunglassesConfig, SunglassesCore, SunglassesEvent } from '@drakkar.software/sunglasses-core';
+import { ISunglassesClient, ScreenTrackingOptions, AutoCaptureErrorsOptions, ConsentStatus, CaptureExceptionOptions } from '@drakkar.software/sunglasses-core';
+export { AutoCaptureErrorsOptions, CaptureExceptionOptions, ConsentStatus, ConsoleCaptureOptions, ISunglassesClient, ScreenTrackingOptions, SunglassesConfig, SunglassesCore, SunglassesEvent, captureException, patchConsole } from '@drakkar.software/sunglasses-core';
 
 interface SunglassesProviderProps {
     /** An initialized ISunglassesClient (from SunglassesCore.create()). */
     client: ISunglassesClient;
     /** Optional screen tracking configuration. */
     screenTracking?: ScreenTrackingOptions;
+    /**
+     * Automatically capture unhandled errors as `$error` events
+     * (`$error_handled: false`).
+     *
+     * - `true` installs the global handlers for `window` `'error'` and
+     *   `'unhandledrejection'`.
+     * - An options object additionally lets you toggle `globalHandlers` and opt
+     *   into `console` capture (`console.error` / `console.warn`), plus configure
+     *   truncation / stack inclusion / ignore patterns.
+     *
+     * Default: off.
+     */
+    autoCaptureErrors?: boolean | AutoCaptureErrorsOptions;
     children: React.ReactNode;
 }
 /**
@@ -28,7 +41,7 @@ interface SunglassesProviderProps {
  * }
  * ```
  */
-declare function SunglassesProvider({ client, screenTracking, children, }: SunglassesProviderProps): React.ReactElement;
+declare function SunglassesProvider({ client, screenTracking, autoCaptureErrors, children, }: SunglassesProviderProps): React.ReactElement;
 
 /**
  * Read UTM attribution parameters from the current URL and register them as
@@ -119,4 +132,34 @@ declare function useCapture(): (eventName: string, properties?: Record<string, u
  */
 declare function useConsentStatus(): ConsentStatus;
 
-export { SunglassesProvider, type SunglassesProviderProps, captureUtmParams, useCapture, useConsentStatus, useScreenTracking, useSunglasses };
+interface SunglassesErrorBoundaryProps {
+    /**
+     * SunGlasses client. Optional — defaults to the client provided by the
+     * nearest `<SunglassesProvider>`.
+     */
+    client?: ISunglassesClient;
+    /** Rendered when an error is caught. Defaults to rendering nothing. */
+    fallback?: React.ReactNode;
+    /** Error capture configuration forwarded to `captureException`. */
+    config?: CaptureExceptionOptions;
+    children: React.ReactNode;
+}
+/**
+ * React error boundary that captures render-phase errors as SunGlasses
+ * `$error` events (`$error_handled: true`).
+ *
+ * The client is read from the nearest `<SunglassesProvider>` by default; pass
+ * an explicit `client` prop to override (e.g. when used outside the provider).
+ *
+ * @example
+ * ```tsx
+ * <SunglassesProvider client={client}>
+ *   <SunglassesErrorBoundary fallback={<ErrorPage />}>
+ *     <App />
+ *   </SunglassesErrorBoundary>
+ * </SunglassesProvider>
+ * ```
+ */
+declare function SunglassesErrorBoundary(props: SunglassesErrorBoundaryProps): React.ReactElement;
+
+export { SunglassesErrorBoundary, type SunglassesErrorBoundaryProps, SunglassesProvider, type SunglassesProviderProps, captureUtmParams, useCapture, useConsentStatus, useScreenTracking, useSunglasses };

package/dist/index.d.ts

@@ -1,12 +1,25 @@
 import React from 'react';
-import { ISunglassesClient, ScreenTrackingOptions, ConsentStatus } from '@drakkar.software/sunglasses-core';
-export { ConsentStatus, ISunglassesClient, ScreenTrackingOptions, SunglassesConfig, SunglassesCore, SunglassesEvent } from '@drakkar.software/sunglasses-core';
+import { ISunglassesClient, ScreenTrackingOptions, AutoCaptureErrorsOptions, ConsentStatus, CaptureExceptionOptions } from '@drakkar.software/sunglasses-core';
+export { AutoCaptureErrorsOptions, CaptureExceptionOptions, ConsentStatus, ConsoleCaptureOptions, ISunglassesClient, ScreenTrackingOptions, SunglassesConfig, SunglassesCore, SunglassesEvent, captureException, patchConsole } from '@drakkar.software/sunglasses-core';
 
 interface SunglassesProviderProps {
     /** An initialized ISunglassesClient (from SunglassesCore.create()). */
     client: ISunglassesClient;
     /** Optional screen tracking configuration. */
     screenTracking?: ScreenTrackingOptions;
+    /**
+     * Automatically capture unhandled errors as `$error` events
+     * (`$error_handled: false`).
+     *
+     * - `true` installs the global handlers for `window` `'error'` and
+     *   `'unhandledrejection'`.
+     * - An options object additionally lets you toggle `globalHandlers` and opt
+     *   into `console` capture (`console.error` / `console.warn`), plus configure
+     *   truncation / stack inclusion / ignore patterns.
+     *
+     * Default: off.
+     */
+    autoCaptureErrors?: boolean | AutoCaptureErrorsOptions;
     children: React.ReactNode;
 }
 /**
@@ -28,7 +41,7 @@ interface SunglassesProviderProps {
  * }
  * ```
  */
-declare function SunglassesProvider({ client, screenTracking, children, }: SunglassesProviderProps): React.ReactElement;
+declare function SunglassesProvider({ client, screenTracking, autoCaptureErrors, children, }: SunglassesProviderProps): React.ReactElement;
 
 /**
  * Read UTM attribution parameters from the current URL and register them as
@@ -119,4 +132,34 @@ declare function useCapture(): (eventName: string, properties?: Record<string, u
  */
 declare function useConsentStatus(): ConsentStatus;
 
-export { SunglassesProvider, type SunglassesProviderProps, captureUtmParams, useCapture, useConsentStatus, useScreenTracking, useSunglasses };
+interface SunglassesErrorBoundaryProps {
+    /**
+     * SunGlasses client. Optional — defaults to the client provided by the
+     * nearest `<SunglassesProvider>`.
+     */
+    client?: ISunglassesClient;
+    /** Rendered when an error is caught. Defaults to rendering nothing. */
+    fallback?: React.ReactNode;
+    /** Error capture configuration forwarded to `captureException`. */
+    config?: CaptureExceptionOptions;
+    children: React.ReactNode;
+}
+/**
+ * React error boundary that captures render-phase errors as SunGlasses
+ * `$error` events (`$error_handled: true`).
+ *
+ * The client is read from the nearest `<SunglassesProvider>` by default; pass
+ * an explicit `client` prop to override (e.g. when used outside the provider).
+ *
+ * @example
+ * ```tsx
+ * <SunglassesProvider client={client}>
+ *   <SunglassesErrorBoundary fallback={<ErrorPage />}>
+ *     <App />
+ *   </SunglassesErrorBoundary>
+ * </SunglassesProvider>
+ * ```
+ */
+declare function SunglassesErrorBoundary(props: SunglassesErrorBoundaryProps): React.ReactElement;
+
+export { SunglassesErrorBoundary, type SunglassesErrorBoundaryProps, SunglassesProvider, type SunglassesProviderProps, captureUtmParams, useCapture, useConsentStatus, useScreenTracking, useSunglasses };

package/dist/index.js

@@ -1,7 +1,9 @@
 "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)
@@ -15,14 +17,25 @@ var __copyProps = (to, from, except, desc) => {
   }
   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, {
-  SunglassesCore: () => import_sunglasses_core.SunglassesCore,
+  SunglassesCore: () => import_sunglasses_core3.SunglassesCore,
+  SunglassesErrorBoundary: () => SunglassesErrorBoundary,
   SunglassesProvider: () => SunglassesProvider,
+  captureException: () => import_sunglasses_core3.captureException,
   captureUtmParams: () => captureUtmParams,
+  patchConsole: () => import_sunglasses_core3.patchConsole,
   useCapture: () => useCapture,
   useConsentStatus: () => useConsentStatus,
   useScreenTracking: () => useScreenTracking,
@@ -32,6 +45,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/SunglassesProvider.tsx
 var import_react3 = require("react");
+var import_sunglasses_core = require("@drakkar.software/sunglasses-core");
 
 // src/context.ts
 var import_react = require("react");
@@ -108,6 +122,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function SunglassesProvider({
   client,
   screenTracking,
+  autoCaptureErrors,
   children
 }) {
   (0, import_react3.useEffect)(() => {
@@ -116,6 +131,32 @@ function SunglassesProvider({
       });
     };
   }, [client]);
+  (0, import_react3.useEffect)(() => {
+    if (!autoCaptureErrors) return;
+    const options = typeof autoCaptureErrors === "object" ? autoCaptureErrors : {};
+    const cleanups = [];
+    if (options.globalHandlers !== false && typeof window !== "undefined") {
+      const onError = (event) => {
+        (0, import_sunglasses_core.captureException)(client, event.error ?? event.message, { handled: false, ...options });
+      };
+      const onRejection = (event) => {
+        (0, import_sunglasses_core.captureException)(client, event.reason, { handled: false, ...options });
+      };
+      window.addEventListener("error", onError);
+      window.addEventListener("unhandledrejection", onRejection);
+      cleanups.push(() => {
+        window.removeEventListener("error", onError);
+        window.removeEventListener("unhandledrejection", onRejection);
+      });
+    }
+    if (options.console) {
+      const consoleOptions = typeof options.console === "object" ? options.console : {};
+      cleanups.push((0, import_sunglasses_core.patchConsole)(client, consoleOptions));
+    }
+    return () => {
+      for (const cleanup of cleanups) cleanup();
+    };
+  }, [client, autoCaptureErrors]);
   (0, import_react3.useEffect)(() => {
     if (typeof document === "undefined") return;
     const handleVisibilityChange = () => {
@@ -177,13 +218,48 @@ function useConsentStatus() {
   return client.getConsentStatus();
 }
 
+// src/SunglassesErrorBoundary.tsx
+var import_react5 = __toESM(require("react"));
+var import_sunglasses_core2 = require("@drakkar.software/sunglasses-core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ErrorBoundaryInner = class extends import_react5.default.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error) {
+    const { client, config } = this.props;
+    (0, import_sunglasses_core2.captureException)(client, error, { handled: true, ...config });
+  }
+  render() {
+    if (this.state.hasError) return this.props.fallback ?? null;
+    return this.props.children;
+  }
+};
+function SunglassesErrorBoundary(props) {
+  const contextClient = (0, import_react5.useContext)(SunglassesContext);
+  const client = props.client ?? contextClient;
+  if (client === null) {
+    throw new Error(
+      "[SunGlasses] <SunglassesErrorBoundary> must be inside a <SunglassesProvider> or receive a `client` prop."
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorBoundaryInner, { ...props, client });
+}
+
 // src/index.ts
-var import_sunglasses_core = require("@drakkar.software/sunglasses-core");
+var import_sunglasses_core3 = require("@drakkar.software/sunglasses-core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SunglassesCore,
+  SunglassesErrorBoundary,
   SunglassesProvider,
+  captureException,
   captureUtmParams,
+  patchConsole,
   useCapture,
   useConsentStatus,
   useScreenTracking,

package/dist/index.mjs

@@ -1,5 +1,6 @@
 // src/SunglassesProvider.tsx
 import { useEffect as useEffect2 } from "react";
+import { captureException, patchConsole } from "@drakkar.software/sunglasses-core";
 
 // src/context.ts
 import { createContext, useContext } from "react";
@@ -76,6 +77,7 @@ import { jsx } from "react/jsx-runtime";
 function SunglassesProvider({
   client,
   screenTracking,
+  autoCaptureErrors,
   children
 }) {
   useEffect2(() => {
@@ -84,6 +86,32 @@ function SunglassesProvider({
       });
     };
   }, [client]);
+  useEffect2(() => {
+    if (!autoCaptureErrors) return;
+    const options = typeof autoCaptureErrors === "object" ? autoCaptureErrors : {};
+    const cleanups = [];
+    if (options.globalHandlers !== false && typeof window !== "undefined") {
+      const onError = (event) => {
+        captureException(client, event.error ?? event.message, { handled: false, ...options });
+      };
+      const onRejection = (event) => {
+        captureException(client, event.reason, { handled: false, ...options });
+      };
+      window.addEventListener("error", onError);
+      window.addEventListener("unhandledrejection", onRejection);
+      cleanups.push(() => {
+        window.removeEventListener("error", onError);
+        window.removeEventListener("unhandledrejection", onRejection);
+      });
+    }
+    if (options.console) {
+      const consoleOptions = typeof options.console === "object" ? options.console : {};
+      cleanups.push(patchConsole(client, consoleOptions));
+    }
+    return () => {
+      for (const cleanup of cleanups) cleanup();
+    };
+  }, [client, autoCaptureErrors]);
   useEffect2(() => {
     if (typeof document === "undefined") return;
     const handleVisibilityChange = () => {
@@ -145,12 +173,47 @@ function useConsentStatus() {
   return client.getConsentStatus();
 }
 
+// src/SunglassesErrorBoundary.tsx
+import React2, { useContext as useContext2 } from "react";
+import { captureException as captureException2 } from "@drakkar.software/sunglasses-core";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ErrorBoundaryInner = class extends React2.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error) {
+    const { client, config } = this.props;
+    captureException2(client, error, { handled: true, ...config });
+  }
+  render() {
+    if (this.state.hasError) return this.props.fallback ?? null;
+    return this.props.children;
+  }
+};
+function SunglassesErrorBoundary(props) {
+  const contextClient = useContext2(SunglassesContext);
+  const client = props.client ?? contextClient;
+  if (client === null) {
+    throw new Error(
+      "[SunGlasses] <SunglassesErrorBoundary> must be inside a <SunglassesProvider> or receive a `client` prop."
+    );
+  }
+  return /* @__PURE__ */ jsx2(ErrorBoundaryInner, { ...props, client });
+}
+
 // src/index.ts
-import { SunglassesCore } from "@drakkar.software/sunglasses-core";
+import { SunglassesCore, captureException as captureException3, patchConsole as patchConsole2 } from "@drakkar.software/sunglasses-core";
 export {
   SunglassesCore,
+  SunglassesErrorBoundary,
   SunglassesProvider,
+  captureException3 as captureException,
   captureUtmParams,
+  patchConsole2 as patchConsole,
   useCapture,
   useConsentStatus,
   useScreenTracking,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drakkar.software/sunglasses-react",
-  "version": "0.8.0",
+  "version": "0.11.0",
   "description": "React (web) provider and hooks for SunGlasses event tracking",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -16,7 +16,7 @@
     "dist"
   ],
   "dependencies": {
-    "@drakkar.software/sunglasses-core": "0.8.0"
+    "@drakkar.software/sunglasses-core": "0.11.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0"