@drakkar.software/sunglasses-react 0.11.0 → 0.12.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import React from 'react';
 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';
+export { AutoCaptureErrorsOptions, CaptureExceptionOptions, ConsentStatus, ConsoleCaptureOptions, GlobalErrorInfo, GlobalErrorListener, ISunglassesClient, ScreenTrackingOptions, SunglassesConfig, SunglassesCore, SunglassesEvent, captureException, patchConsole, publishGlobalError, subscribeGlobalError } from '@drakkar.software/sunglasses-core';
 
 interface SunglassesProviderProps {
     /** An initialized ISunglassesClient (from SunglassesCore.create()). */
@@ -13,9 +13,10 @@ interface SunglassesProviderProps {
      *
      * - `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.
+     * - An options object additionally lets you toggle `globalHandlers` and
+     *   `unhandledRejections`, opt into `console` capture (`console.error` /
+     *   `console.warn`), plus configure truncation / stack inclusion / ignore
+     *   patterns.
      *
      * Default: off.
      */
@@ -162,4 +163,49 @@ interface SunglassesErrorBoundaryProps {
  */
 declare function SunglassesErrorBoundary(props: SunglassesErrorBoundaryProps): React.ReactElement;
 
-export { SunglassesErrorBoundary, type SunglassesErrorBoundaryProps, SunglassesProvider, type SunglassesProviderProps, captureUtmParams, useCapture, useConsentStatus, useScreenTracking, useSunglasses };
+interface SunglassesGlobalErrorBoundaryProps {
+    /**
+     * 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;
+    /**
+     * Also render the fallback for non-fatal global errors (e.g. `ErrorUtils`
+     * errors reported as non-fatal). Default: `false`.
+     */
+    includeNonFatalGlobalErrors?: boolean;
+    /**
+     * Also render the fallback for unhandled promise rejections. Off by default
+     * because many apps prefer to surface rejections as toasts or inline errors
+     * rather than as a full-screen fallback. Default: `false`.
+     */
+    includeUnhandledRejections?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * A superset of `SunglassesErrorBoundary` that renders a fallback UI for fatal
+ * non-render errors (uncaught errors and, optionally, unhandled rejections) in
+ * addition to the render-phase errors a normal error boundary catches.
+ *
+ * Render-phase errors are captured here as `$error` events
+ * (`$error_handled: true`). Global errors are captured by the provider's
+ * `autoCaptureErrors` handlers and merely surfaced here as a fallback — so the
+ * global fallback requires `autoCaptureErrors` to be enabled on the
+ * `<SunglassesProvider>`. No event is captured twice.
+ *
+ * @example
+ * ```tsx
+ * <SunglassesProvider client={client} autoCaptureErrors>
+ *   <SunglassesGlobalErrorBoundary fallback={<ErrorScreen />}>
+ *     <App />
+ *   </SunglassesGlobalErrorBoundary>
+ * </SunglassesProvider>
+ * ```
+ */
+declare function SunglassesGlobalErrorBoundary(props: SunglassesGlobalErrorBoundaryProps): React.ReactElement;
+
+export { SunglassesErrorBoundary, type SunglassesErrorBoundaryProps, SunglassesGlobalErrorBoundary, type SunglassesGlobalErrorBoundaryProps, SunglassesProvider, type SunglassesProviderProps, captureUtmParams, useCapture, useConsentStatus, useScreenTracking, useSunglasses };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 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';
+export { AutoCaptureErrorsOptions, CaptureExceptionOptions, ConsentStatus, ConsoleCaptureOptions, GlobalErrorInfo, GlobalErrorListener, ISunglassesClient, ScreenTrackingOptions, SunglassesConfig, SunglassesCore, SunglassesEvent, captureException, patchConsole, publishGlobalError, subscribeGlobalError } from '@drakkar.software/sunglasses-core';
 
 interface SunglassesProviderProps {
     /** An initialized ISunglassesClient (from SunglassesCore.create()). */
@@ -13,9 +13,10 @@ interface SunglassesProviderProps {
      *
      * - `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.
+     * - An options object additionally lets you toggle `globalHandlers` and
+     *   `unhandledRejections`, opt into `console` capture (`console.error` /
+     *   `console.warn`), plus configure truncation / stack inclusion / ignore
+     *   patterns.
      *
      * Default: off.
      */
@@ -162,4 +163,49 @@ interface SunglassesErrorBoundaryProps {
  */
 declare function SunglassesErrorBoundary(props: SunglassesErrorBoundaryProps): React.ReactElement;
 
-export { SunglassesErrorBoundary, type SunglassesErrorBoundaryProps, SunglassesProvider, type SunglassesProviderProps, captureUtmParams, useCapture, useConsentStatus, useScreenTracking, useSunglasses };
+interface SunglassesGlobalErrorBoundaryProps {
+    /**
+     * 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;
+    /**
+     * Also render the fallback for non-fatal global errors (e.g. `ErrorUtils`
+     * errors reported as non-fatal). Default: `false`.
+     */
+    includeNonFatalGlobalErrors?: boolean;
+    /**
+     * Also render the fallback for unhandled promise rejections. Off by default
+     * because many apps prefer to surface rejections as toasts or inline errors
+     * rather than as a full-screen fallback. Default: `false`.
+     */
+    includeUnhandledRejections?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * A superset of `SunglassesErrorBoundary` that renders a fallback UI for fatal
+ * non-render errors (uncaught errors and, optionally, unhandled rejections) in
+ * addition to the render-phase errors a normal error boundary catches.
+ *
+ * Render-phase errors are captured here as `$error` events
+ * (`$error_handled: true`). Global errors are captured by the provider's
+ * `autoCaptureErrors` handlers and merely surfaced here as a fallback — so the
+ * global fallback requires `autoCaptureErrors` to be enabled on the
+ * `<SunglassesProvider>`. No event is captured twice.
+ *
+ * @example
+ * ```tsx
+ * <SunglassesProvider client={client} autoCaptureErrors>
+ *   <SunglassesGlobalErrorBoundary fallback={<ErrorScreen />}>
+ *     <App />
+ *   </SunglassesGlobalErrorBoundary>
+ * </SunglassesProvider>
+ * ```
+ */
+declare function SunglassesGlobalErrorBoundary(props: SunglassesGlobalErrorBoundaryProps): React.ReactElement;
+
+export { SunglassesErrorBoundary, type SunglassesErrorBoundaryProps, SunglassesGlobalErrorBoundary, type SunglassesGlobalErrorBoundaryProps, SunglassesProvider, type SunglassesProviderProps, captureUtmParams, useCapture, useConsentStatus, useScreenTracking, useSunglasses };

package/dist/index.js

@@ -30,12 +30,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  SunglassesCore: () => import_sunglasses_core3.SunglassesCore,
+  SunglassesCore: () => import_sunglasses_core4.SunglassesCore,
   SunglassesErrorBoundary: () => SunglassesErrorBoundary,
+  SunglassesGlobalErrorBoundary: () => SunglassesGlobalErrorBoundary,
   SunglassesProvider: () => SunglassesProvider,
-  captureException: () => import_sunglasses_core3.captureException,
+  captureException: () => import_sunglasses_core4.captureException,
   captureUtmParams: () => captureUtmParams,
-  patchConsole: () => import_sunglasses_core3.patchConsole,
+  patchConsole: () => import_sunglasses_core4.patchConsole,
+  publishGlobalError: () => import_sunglasses_core4.publishGlobalError,
+  subscribeGlobalError: () => import_sunglasses_core4.subscribeGlobalError,
   useCapture: () => useCapture,
   useConsentStatus: () => useConsentStatus,
   useScreenTracking: () => useScreenTracking,
@@ -135,19 +138,24 @@ function SunglassesProvider({
     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 (typeof window !== "undefined") {
+      if (options.globalHandlers !== false) {
+        const onError = (event) => {
+          const error = event.error ?? event.message;
+          (0, import_sunglasses_core.captureException)(client, error, { handled: false, ...options });
+          (0, import_sunglasses_core.publishGlobalError)({ error, fatal: true, kind: "error" });
+        };
+        window.addEventListener("error", onError);
+        cleanups.push(() => window.removeEventListener("error", onError));
+      }
+      if (options.unhandledRejections !== false) {
+        const onRejection = (event) => {
+          (0, import_sunglasses_core.captureException)(client, event.reason, { handled: false, ...options });
+          (0, import_sunglasses_core.publishGlobalError)({ error: event.reason, fatal: false, kind: "rejection" });
+        };
+        window.addEventListener("unhandledrejection", onRejection);
+        cleanups.push(() => window.removeEventListener("unhandledrejection", onRejection));
+      }
     }
     if (options.console) {
       const consoleOptions = typeof options.console === "object" ? options.console : {};
@@ -250,16 +258,68 @@ function SunglassesErrorBoundary(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorBoundaryInner, { ...props, client });
 }
 
-// src/index.ts
+// src/SunglassesGlobalErrorBoundary.tsx
+var import_react6 = __toESM(require("react"));
 var import_sunglasses_core3 = require("@drakkar.software/sunglasses-core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var GlobalErrorBoundaryInner = class extends import_react6.default.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidMount() {
+    this.unsubscribe = (0, import_sunglasses_core3.subscribeGlobalError)((info) => this.handleGlobalError(info));
+  }
+  componentWillUnmount() {
+    this.unsubscribe?.();
+  }
+  componentDidCatch(error) {
+    const { client, config } = this.props;
+    (0, import_sunglasses_core3.captureException)(client, error, { handled: true, ...config });
+  }
+  /**
+   * React to a global error published by the provider's auto-capture handlers.
+   * The provider already captured it, so we only decide whether to show the
+   * fallback — we never re-capture here.
+   */
+  handleGlobalError(info) {
+    if (this.state.hasError) return;
+    const { includeNonFatalGlobalErrors, includeUnhandledRejections } = this.props;
+    const shouldShow = info.kind === "rejection" ? includeUnhandledRejections === true : info.fatal || includeNonFatalGlobalErrors === true;
+    if (shouldShow) this.setState({ hasError: true });
+  }
+  render() {
+    if (this.state.hasError) return this.props.fallback ?? null;
+    return this.props.children;
+  }
+};
+function SunglassesGlobalErrorBoundary(props) {
+  const contextClient = (0, import_react6.useContext)(SunglassesContext);
+  const client = props.client ?? contextClient;
+  if (client === null) {
+    throw new Error(
+      "[SunGlasses] <SunglassesGlobalErrorBoundary> must be inside a <SunglassesProvider> or receive a `client` prop."
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlobalErrorBoundaryInner, { ...props, client });
+}
+
+// src/index.ts
+var import_sunglasses_core4 = require("@drakkar.software/sunglasses-core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SunglassesCore,
   SunglassesErrorBoundary,
+  SunglassesGlobalErrorBoundary,
   SunglassesProvider,
   captureException,
   captureUtmParams,
   patchConsole,
+  publishGlobalError,
+  subscribeGlobalError,
   useCapture,
   useConsentStatus,
   useScreenTracking,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/SunglassesProvider.tsx
 import { useEffect as useEffect2 } from "react";
-import { captureException, patchConsole } from "@drakkar.software/sunglasses-core";
+import { captureException, patchConsole, publishGlobalError } from "@drakkar.software/sunglasses-core";
 
 // src/context.ts
 import { createContext, useContext } from "react";
@@ -90,19 +90,24 @@ function SunglassesProvider({
     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 (typeof window !== "undefined") {
+      if (options.globalHandlers !== false) {
+        const onError = (event) => {
+          const error = event.error ?? event.message;
+          captureException(client, error, { handled: false, ...options });
+          publishGlobalError({ error, fatal: true, kind: "error" });
+        };
+        window.addEventListener("error", onError);
+        cleanups.push(() => window.removeEventListener("error", onError));
+      }
+      if (options.unhandledRejections !== false) {
+        const onRejection = (event) => {
+          captureException(client, event.reason, { handled: false, ...options });
+          publishGlobalError({ error: event.reason, fatal: false, kind: "rejection" });
+        };
+        window.addEventListener("unhandledrejection", onRejection);
+        cleanups.push(() => window.removeEventListener("unhandledrejection", onRejection));
+      }
     }
     if (options.console) {
       const consoleOptions = typeof options.console === "object" ? options.console : {};
@@ -205,15 +210,73 @@ function SunglassesErrorBoundary(props) {
   return /* @__PURE__ */ jsx2(ErrorBoundaryInner, { ...props, client });
 }
 
+// src/SunglassesGlobalErrorBoundary.tsx
+import React3, { useContext as useContext3 } from "react";
+import { captureException as captureException3, subscribeGlobalError } from "@drakkar.software/sunglasses-core";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var GlobalErrorBoundaryInner = class extends React3.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidMount() {
+    this.unsubscribe = subscribeGlobalError((info) => this.handleGlobalError(info));
+  }
+  componentWillUnmount() {
+    this.unsubscribe?.();
+  }
+  componentDidCatch(error) {
+    const { client, config } = this.props;
+    captureException3(client, error, { handled: true, ...config });
+  }
+  /**
+   * React to a global error published by the provider's auto-capture handlers.
+   * The provider already captured it, so we only decide whether to show the
+   * fallback — we never re-capture here.
+   */
+  handleGlobalError(info) {
+    if (this.state.hasError) return;
+    const { includeNonFatalGlobalErrors, includeUnhandledRejections } = this.props;
+    const shouldShow = info.kind === "rejection" ? includeUnhandledRejections === true : info.fatal || includeNonFatalGlobalErrors === true;
+    if (shouldShow) this.setState({ hasError: true });
+  }
+  render() {
+    if (this.state.hasError) return this.props.fallback ?? null;
+    return this.props.children;
+  }
+};
+function SunglassesGlobalErrorBoundary(props) {
+  const contextClient = useContext3(SunglassesContext);
+  const client = props.client ?? contextClient;
+  if (client === null) {
+    throw new Error(
+      "[SunGlasses] <SunglassesGlobalErrorBoundary> must be inside a <SunglassesProvider> or receive a `client` prop."
+    );
+  }
+  return /* @__PURE__ */ jsx3(GlobalErrorBoundaryInner, { ...props, client });
+}
+
 // src/index.ts
-import { SunglassesCore, captureException as captureException3, patchConsole as patchConsole2 } from "@drakkar.software/sunglasses-core";
+import {
+  SunglassesCore,
+  captureException as captureException4,
+  patchConsole as patchConsole2,
+  publishGlobalError as publishGlobalError2,
+  subscribeGlobalError as subscribeGlobalError2
+} from "@drakkar.software/sunglasses-core";
 export {
   SunglassesCore,
   SunglassesErrorBoundary,
+  SunglassesGlobalErrorBoundary,
   SunglassesProvider,
-  captureException3 as captureException,
+  captureException4 as captureException,
   captureUtmParams,
   patchConsole2 as patchConsole,
+  publishGlobalError2 as publishGlobalError,
+  subscribeGlobalError2 as subscribeGlobalError,
   useCapture,
   useConsentStatus,
   useScreenTracking,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drakkar.software/sunglasses-react",
-  "version": "0.11.0",
+  "version": "0.12.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.11.0"
+    "@drakkar.software/sunglasses-core": "0.12.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0"