@error-explorer/react 1.1.1

package/dist/index.js

@@ -0,0 +1,376 @@
+// src/context.tsx
+import { createContext, useEffect, useState, useMemo } from "react";
+import { ErrorExplorer } from "@error-explorer/browser";
+import { jsx } from "react/jsx-runtime";
+var ErrorExplorerContext = createContext(null);
+function ErrorExplorerProvider({
+  options,
+  children
+}) {
+  const [isInitialized, setIsInitialized] = useState(false);
+  useEffect(() => {
+    if (!ErrorExplorer.isInitialized()) {
+      ErrorExplorer.init(options);
+      setIsInitialized(true);
+    } else {
+      setIsInitialized(true);
+    }
+    return () => {
+    };
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      isInitialized,
+      captureException: (error, context) => ErrorExplorer.captureException(error, context),
+      captureMessage: (message, level) => ErrorExplorer.captureMessage(message, level),
+      addBreadcrumb: (breadcrumb) => ErrorExplorer.addBreadcrumb(breadcrumb),
+      setUser: (user) => ErrorExplorer.setUser(user),
+      clearUser: () => ErrorExplorer.clearUser(),
+      setTag: (key, value) => ErrorExplorer.setTag(key, value),
+      setTags: (tags) => ErrorExplorer.setTags(tags),
+      setExtra: (extra) => ErrorExplorer.setExtra(extra),
+      setContext: (name, context) => ErrorExplorer.setContext(name, context),
+      flush: (timeout) => ErrorExplorer.flush(timeout),
+      close: (timeout) => ErrorExplorer.close(timeout)
+    }),
+    [isInitialized]
+  );
+  return /* @__PURE__ */ jsx(ErrorExplorerContext.Provider, { value: contextValue, children });
+}
+function initErrorExplorer(options) {
+  if (!ErrorExplorer.isInitialized()) {
+    ErrorExplorer.init(options);
+  }
+}
+
+// src/ErrorBoundary.tsx
+import React2, { Component } from "react";
+import { ErrorExplorer as ErrorExplorer2 } from "@error-explorer/browser";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DefaultFallback = ({ error, resetErrorBoundary }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    role: "alert",
+    style: {
+      padding: "20px",
+      border: "1px solid #f5c6cb",
+      borderRadius: "4px",
+      backgroundColor: "#f8d7da",
+      color: "#721c24"
+    },
+    children: [
+      /* @__PURE__ */ jsx2("h2", { style: { margin: "0 0 10px 0" }, children: "Something went wrong" }),
+      /* @__PURE__ */ jsx2("pre", { style: {
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        backgroundColor: "rgba(0,0,0,0.1)",
+        padding: "10px",
+        borderRadius: "4px",
+        fontSize: "14px"
+      }, children: error.message }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: resetErrorBoundary,
+          style: {
+            marginTop: "10px",
+            padding: "8px 16px",
+            backgroundColor: "#721c24",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer"
+          },
+          children: "Try again"
+        }
+      )
+    ]
+  }
+);
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.reset = () => {
+      const { onReset } = this.props;
+      this.setState({
+        hasError: false,
+        error: null,
+        errorInfo: null
+      });
+      if (onReset) {
+        onReset();
+      }
+    };
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ errorInfo });
+    const { capture = true, tags = {}, context = {}, onError } = this.props;
+    if (onError) {
+      onError(error, errorInfo);
+    }
+    if (capture) {
+      ErrorExplorer2.captureException(error, {
+        tags: {
+          "react.errorBoundary": "true",
+          ...tags
+        },
+        extra: {
+          componentStack: errorInfo.componentStack,
+          ...context
+        }
+      });
+    }
+  }
+  componentDidUpdate(prevProps) {
+    const { resetKeys } = this.props;
+    const { hasError } = this.state;
+    if (hasError && resetKeys && prevProps.resetKeys) {
+      const hasResetKeyChanged = resetKeys.some(
+        (key, index) => key !== prevProps.resetKeys?.[index]
+      );
+      if (hasResetKeyChanged) {
+        this.reset();
+      }
+    }
+  }
+  render() {
+    const { hasError, error, errorInfo } = this.state;
+    const { children, fallback } = this.props;
+    if (hasError && error) {
+      const fallbackProps = {
+        error,
+        errorInfo,
+        resetErrorBoundary: this.reset
+      };
+      if (typeof fallback === "function") {
+        return fallback(fallbackProps);
+      }
+      if (fallback) {
+        return fallback;
+      }
+      return /* @__PURE__ */ jsx2(DefaultFallback, { ...fallbackProps });
+    }
+    return children;
+  }
+};
+ErrorBoundary.defaultProps = {
+  capture: true,
+  tags: {},
+  context: {}
+};
+function withErrorBoundary(Component2, options = {}) {
+  const { fallback, onError, capture = true, tags = {}, context = {} } = options;
+  const Wrapped = (props) => /* @__PURE__ */ jsx2(
+    ErrorBoundary,
+    {
+      fallback,
+      onError,
+      capture,
+      tags,
+      context,
+      children: /* @__PURE__ */ jsx2(Component2, { ...props })
+    }
+  );
+  const displayName = Component2.displayName || Component2.name || "Component";
+  Wrapped.displayName = `withErrorBoundary(${displayName})`;
+  return Wrapped;
+}
+function useErrorBoundary() {
+  const [error, setError] = React2.useState(null);
+  if (error) {
+    throw error;
+  }
+  return {
+    /**
+     * Trigger the nearest error boundary with the given error
+     */
+    showBoundary: (err) => setError(err),
+    /**
+     * Reset the error state
+     */
+    resetBoundary: () => setError(null)
+  };
+}
+
+// src/hooks.ts
+import { useContext, useEffect as useEffect2, useCallback, useRef } from "react";
+import { ErrorExplorer as ErrorExplorer3 } from "@error-explorer/browser";
+function useErrorExplorer() {
+  const contextValue = useContext(ErrorExplorerContext);
+  if (contextValue?.isInitialized) {
+    return contextValue;
+  }
+  return {
+    isInitialized: ErrorExplorer3.isInitialized(),
+    captureException: (error, context) => ErrorExplorer3.captureException(error, context),
+    captureMessage: (message, level) => ErrorExplorer3.captureMessage(message, level),
+    addBreadcrumb: (breadcrumb) => ErrorExplorer3.addBreadcrumb(breadcrumb),
+    setUser: (user) => ErrorExplorer3.setUser(user),
+    clearUser: () => ErrorExplorer3.clearUser(),
+    setTag: (key, value) => ErrorExplorer3.setTag(key, value),
+    setTags: (tags) => ErrorExplorer3.setTags(tags),
+    setExtra: (extra) => ErrorExplorer3.setExtra(extra),
+    setContext: (name, context) => ErrorExplorer3.setContext(name, context),
+    flush: (timeout) => ErrorExplorer3.flush(timeout),
+    close: (timeout) => ErrorExplorer3.close(timeout)
+  };
+}
+function useErrorHandler(defaultContext) {
+  const { captureException } = useErrorExplorer();
+  const handleError = useCallback(
+    (error, context) => {
+      const err = error instanceof Error ? error : new Error(String(error));
+      captureException(err, {
+        ...defaultContext,
+        ...context,
+        tags: {
+          ...defaultContext?.tags,
+          ...context?.tags
+        },
+        extra: {
+          ...defaultContext?.extra,
+          ...context?.extra
+        }
+      });
+      return err;
+    },
+    [captureException, defaultContext]
+  );
+  const wrapAsync = useCallback(
+    (fn, context) => {
+      return async (...args) => {
+        try {
+          return await fn(...args);
+        } catch (error) {
+          handleError(error, context);
+          return void 0;
+        }
+      };
+    },
+    [handleError]
+  );
+  const tryCatch = useCallback(
+    (fn, context) => {
+      try {
+        return fn();
+      } catch (error) {
+        handleError(error, context);
+        return void 0;
+      }
+    },
+    [handleError]
+  );
+  return {
+    handleError,
+    wrapAsync,
+    tryCatch
+  };
+}
+function useUserContext(user) {
+  const { setUser, clearUser } = useErrorExplorer();
+  const previousUser = useRef(null);
+  useEffect2(() => {
+    if (JSON.stringify(user) !== JSON.stringify(previousUser.current)) {
+      if (user) {
+        setUser(user);
+      } else {
+        clearUser();
+      }
+      previousUser.current = user;
+    }
+  }, [user, setUser, clearUser]);
+  useEffect2(() => {
+    return () => {
+      clearUser();
+    };
+  }, [clearUser]);
+  return { setUser, clearUser };
+}
+function useActionTracker(componentName) {
+  const { addBreadcrumb } = useErrorExplorer();
+  const trackAction = useCallback(
+    (action, data) => {
+      addBreadcrumb({
+        type: "user-action",
+        category: "action",
+        message: action,
+        level: "info",
+        data: {
+          component: componentName,
+          ...data
+        }
+      });
+    },
+    [addBreadcrumb, componentName]
+  );
+  const trackInteraction = useCallback(
+    (element, action, data) => {
+      addBreadcrumb({
+        type: "user-action",
+        category: `ui.${action}`,
+        message: `${action} on ${element}`,
+        level: "info",
+        data: {
+          component: componentName,
+          element,
+          ...data
+        }
+      });
+    },
+    [addBreadcrumb, componentName]
+  );
+  return {
+    trackAction,
+    trackInteraction
+  };
+}
+function useComponentBreadcrumbs(componentName) {
+  const { addBreadcrumb } = useErrorExplorer();
+  useEffect2(() => {
+    addBreadcrumb({
+      type: "debug",
+      category: "react.lifecycle",
+      message: `${componentName} mounted`,
+      level: "debug"
+    });
+    return () => {
+      addBreadcrumb({
+        type: "debug",
+        category: "react.lifecycle",
+        message: `${componentName} unmounted`,
+        level: "debug"
+      });
+    };
+  }, [componentName, addBreadcrumb]);
+}
+
+// src/index.ts
+import { ErrorExplorer as ErrorExplorer4 } from "@error-explorer/browser";
+var src_default = ErrorExplorerProvider;
+export {
+  ErrorBoundary,
+  ErrorExplorer4 as ErrorExplorer,
+  ErrorExplorerContext,
+  ErrorExplorerProvider,
+  src_default as default,
+  initErrorExplorer,
+  useActionTracker,
+  useComponentBreadcrumbs,
+  useErrorBoundary,
+  useErrorExplorer,
+  useErrorHandler,
+  useUserContext,
+  withErrorBoundary
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.tsx","../src/ErrorBoundary.tsx","../src/hooks.ts","../src/index.ts"],"sourcesContent":["/**\n * React Context Provider for Error Explorer\n */\n\nimport React, { createContext, useEffect, useState, useMemo, type ReactNode } from 'react';\nimport { ErrorExplorer } from '@error-explorer/browser';\nimport type { Breadcrumb, CaptureContext, UserContext } from '@error-explorer/browser';\nimport type { ReactErrorExplorerOptions, ErrorExplorerContextValue } from './types';\n\n/**\n * React Context for Error Explorer\n */\nexport const ErrorExplorerContext = createContext<ErrorExplorerContextValue | null>(null);\n\n/**\n * Error Explorer Provider Component\n *\n * Initializes the Error Explorer SDK and provides context to child components.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <ErrorExplorerProvider\n *       options={{\n *         token: 'ee_your_token',\n *         project: 'my-react-app',\n *         environment: 'production',\n *       }}\n *     >\n *       <MainContent />\n *     </ErrorExplorerProvider>\n *   );\n * }\n * ```\n */\nexport function ErrorExplorerProvider({\n  options,\n  children,\n}: {\n  options: ReactErrorExplorerOptions;\n  children: ReactNode;\n}) {\n  const [isInitialized, setIsInitialized] = useState(false);\n\n  // Initialize on mount\n  useEffect(() => {\n    if (!ErrorExplorer.isInitialized()) {\n      ErrorExplorer.init(options);\n      setIsInitialized(true);\n    } else {\n      setIsInitialized(true);\n    }\n\n    // Cleanup on unmount\n    return () => {\n      // Don't close on unmount as other components might still need it\n      // ErrorExplorer.close();\n    };\n  }, []); // Only run once on mount\n\n  // Create stable context value\n  const contextValue = useMemo<ErrorExplorerContextValue>(\n    () => ({\n      isInitialized,\n      captureException: (error: Error, context?: CaptureContext) =>\n        ErrorExplorer.captureException(error, context),\n      captureMessage: (message: string, level?: 'debug' | 'info' | 'warning' | 'error' | 'critical') =>\n        ErrorExplorer.captureMessage(message, level),\n      addBreadcrumb: (breadcrumb: Breadcrumb) => ErrorExplorer.addBreadcrumb(breadcrumb),\n      setUser: (user: UserContext) => ErrorExplorer.setUser(user),\n      clearUser: () => ErrorExplorer.clearUser(),\n      setTag: (key: string, value: string) => ErrorExplorer.setTag(key, value),\n      setTags: (tags: Record<string, string>) => ErrorExplorer.setTags(tags),\n      setExtra: (extra: Record<string, unknown>) => ErrorExplorer.setExtra(extra),\n      setContext: (name: string, context: Record<string, unknown>) =>\n        ErrorExplorer.setContext(name, context),\n      flush: (timeout?: number) => ErrorExplorer.flush(timeout),\n      close: (timeout?: number) => ErrorExplorer.close(timeout),\n    }),\n    [isInitialized]\n  );\n\n  return (\n    <ErrorExplorerContext.Provider value={contextValue}>\n      {children}\n    </ErrorExplorerContext.Provider>\n  );\n}\n\n/**\n * Initialize Error Explorer directly (without provider)\n *\n * Use this if you don't need the React Context and just want to initialize\n * the SDK globally.\n *\n * @example\n * ```tsx\n * // In your entry file (main.tsx)\n * import { initErrorExplorer } from '@error-explorer/react';\n *\n * initErrorExplorer({\n *   token: 'ee_your_token',\n *   project: 'my-react-app',\n *   environment: 'production',\n * });\n *\n * ReactDOM.createRoot(root).render(<App />);\n * ```\n */\nexport function initErrorExplorer(options: ReactErrorExplorerOptions): void {\n  if (!ErrorExplorer.isInitialized()) {\n    ErrorExplorer.init(options);\n  }\n}\n","/**\n * ErrorBoundary component for React\n * Catches errors in child components and reports them to Error Explorer\n */\n\nimport React, { Component, type ReactNode, type ComponentType } from 'react';\nimport { ErrorExplorer } from '@error-explorer/browser';\nimport type {\n  ErrorBoundaryProps,\n  ErrorBoundaryState,\n  FallbackProps,\n  WithErrorBoundaryOptions,\n} from './types';\n\n/**\n * Default fallback component\n */\nconst DefaultFallback: React.FC<FallbackProps> = ({ error, resetErrorBoundary }) => (\n  <div\n    role=\"alert\"\n    style={{\n      padding: '20px',\n      border: '1px solid #f5c6cb',\n      borderRadius: '4px',\n      backgroundColor: '#f8d7da',\n      color: '#721c24',\n    }}\n  >\n    <h2 style={{ margin: '0 0 10px 0' }}>Something went wrong</h2>\n    <pre style={{\n      whiteSpace: 'pre-wrap',\n      wordBreak: 'break-word',\n      backgroundColor: 'rgba(0,0,0,0.1)',\n      padding: '10px',\n      borderRadius: '4px',\n      fontSize: '14px',\n    }}>\n      {error.message}\n    </pre>\n    <button\n      onClick={resetErrorBoundary}\n      style={{\n        marginTop: '10px',\n        padding: '8px 16px',\n        backgroundColor: '#721c24',\n        color: 'white',\n        border: 'none',\n        borderRadius: '4px',\n        cursor: 'pointer',\n      }}\n    >\n      Try again\n    </button>\n  </div>\n);\n\n/**\n * ErrorBoundary class component\n *\n * React Error Boundaries must be class components - there's no hook equivalent.\n *\n * @example\n * ```tsx\n * <ErrorBoundary fallback={<ErrorFallback />}>\n *   <MyComponent />\n * </ErrorBoundary>\n * ```\n *\n * @example\n * With render prop fallback:\n * ```tsx\n * <ErrorBoundary\n *   fallback={({ error, resetErrorBoundary }) => (\n *     <div>\n *       <p>Error: {error.message}</p>\n *       <button onClick={resetErrorBoundary}>Retry</button>\n *     </div>\n *   )}\n * >\n *   <MyComponent />\n * </ErrorBoundary>\n * ```\n */\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  static defaultProps = {\n    capture: true,\n    tags: {},\n    context: {},\n  };\n\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = {\n      hasError: false,\n      error: null,\n      errorInfo: null,\n    };\n  }\n\n  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {\n    return {\n      hasError: true,\n      error,\n    };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n    this.setState({ errorInfo });\n\n    const { capture = true, tags = {}, context = {}, onError } = this.props;\n\n    // Call user's error handler\n    if (onError) {\n      onError(error, errorInfo);\n    }\n\n    // Capture to Error Explorer\n    if (capture) {\n      ErrorExplorer.captureException(error, {\n        tags: {\n          'react.errorBoundary': 'true',\n          ...tags,\n        },\n        extra: {\n          componentStack: errorInfo.componentStack,\n          ...context,\n        },\n      });\n    }\n  }\n\n  componentDidUpdate(prevProps: ErrorBoundaryProps): void {\n    const { resetKeys } = this.props;\n    const { hasError } = this.state;\n\n    // Reset if resetKeys changed\n    if (hasError && resetKeys && prevProps.resetKeys) {\n      const hasResetKeyChanged = resetKeys.some(\n        (key, index) => key !== prevProps.resetKeys?.[index]\n      );\n\n      if (hasResetKeyChanged) {\n        this.reset();\n      }\n    }\n  }\n\n  reset = (): void => {\n    const { onReset } = this.props;\n\n    this.setState({\n      hasError: false,\n      error: null,\n      errorInfo: null,\n    });\n\n    if (onReset) {\n      onReset();\n    }\n  };\n\n  render(): ReactNode {\n    const { hasError, error, errorInfo } = this.state;\n    const { children, fallback } = this.props;\n\n    if (hasError && error) {\n      const fallbackProps: FallbackProps = {\n        error,\n        errorInfo,\n        resetErrorBoundary: this.reset,\n      };\n\n      // Render function fallback\n      if (typeof fallback === 'function') {\n        return fallback(fallbackProps);\n      }\n\n      // Static fallback\n      if (fallback) {\n        return fallback;\n      }\n\n      // Default fallback\n      return <DefaultFallback {...fallbackProps} />;\n    }\n\n    return children;\n  }\n}\n\n/**\n * Higher-order component to wrap a component with ErrorBoundary\n *\n * @example\n * ```tsx\n * const SafeComponent = withErrorBoundary(MyComponent, {\n *   fallback: <ErrorFallback />,\n *   onError: (error) => console.error(error),\n * });\n * ```\n */\nexport function withErrorBoundary<P extends object>(\n  Component: ComponentType<P>,\n  options: WithErrorBoundaryOptions = {}\n): ComponentType<P> {\n  const { fallback, onError, capture = true, tags = {}, context = {} } = options;\n\n  const Wrapped: React.FC<P> = (props) => (\n    <ErrorBoundary\n      fallback={fallback}\n      onError={onError}\n      capture={capture}\n      tags={tags}\n      context={context}\n    >\n      <Component {...props} />\n    </ErrorBoundary>\n  );\n\n  // Preserve display name for debugging\n  const displayName = Component.displayName || Component.name || 'Component';\n  Wrapped.displayName = `withErrorBoundary(${displayName})`;\n\n  return Wrapped;\n}\n\n/**\n * useErrorBoundary hook for functional components\n *\n * Note: This doesn't create an error boundary - those must be class components.\n * Instead, this provides a way to show/trigger the nearest error boundary.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { showBoundary } = useErrorBoundary();\n *\n *   const handleClick = async () => {\n *     try {\n *       await riskyOperation();\n *     } catch (error) {\n *       showBoundary(error);\n *     }\n *   };\n * }\n * ```\n */\nexport function useErrorBoundary() {\n  const [error, setError] = React.useState<Error | null>(null);\n\n  // If there's an error, throw it to be caught by the nearest error boundary\n  if (error) {\n    throw error;\n  }\n\n  return {\n    /**\n     * Trigger the nearest error boundary with the given error\n     */\n    showBoundary: (err: Error) => setError(err),\n\n    /**\n     * Reset the error state\n     */\n    resetBoundary: () => setError(null),\n  };\n}\n","/**\n * React Hooks for Error Explorer\n */\n\nimport { useContext, useEffect, useCallback, useRef } from 'react';\nimport { ErrorExplorer } from '@error-explorer/browser';\nimport type { Breadcrumb, CaptureContext, UserContext } from '@error-explorer/browser';\nimport { ErrorExplorerContext } from './context';\n\n/**\n * Use Error Explorer instance\n *\n * Returns the Error Explorer SDK methods for capturing errors and managing context.\n *\n * @example\n * ```tsx\n * const { captureException, addBreadcrumb, setUser } = useErrorExplorer();\n *\n * try {\n *   await riskyOperation();\n * } catch (error) {\n *   captureException(error);\n * }\n * ```\n */\nexport function useErrorExplorer() {\n  // Try to get from context first (if using provider)\n  const contextValue = useContext(ErrorExplorerContext);\n\n  // If context is available and initialized, use it\n  if (contextValue?.isInitialized) {\n    return contextValue;\n  }\n\n  // Fall back to singleton\n  return {\n    isInitialized: ErrorExplorer.isInitialized(),\n    captureException: (error: Error, context?: CaptureContext) =>\n      ErrorExplorer.captureException(error, context),\n    captureMessage: (message: string, level?: 'debug' | 'info' | 'warning' | 'error' | 'critical') =>\n      ErrorExplorer.captureMessage(message, level),\n    addBreadcrumb: (breadcrumb: Breadcrumb) => ErrorExplorer.addBreadcrumb(breadcrumb),\n    setUser: (user: UserContext) => ErrorExplorer.setUser(user),\n    clearUser: () => ErrorExplorer.clearUser(),\n    setTag: (key: string, value: string) => ErrorExplorer.setTag(key, value),\n    setTags: (tags: Record<string, string>) => ErrorExplorer.setTags(tags),\n    setExtra: (extra: Record<string, unknown>) => ErrorExplorer.setExtra(extra),\n    setContext: (name: string, context: Record<string, unknown>) =>\n      ErrorExplorer.setContext(name, context),\n    flush: (timeout?: number) => ErrorExplorer.flush(timeout),\n    close: (timeout?: number) => ErrorExplorer.close(timeout),\n  };\n}\n\n/**\n * Error handler hook for async operations\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { handleError, wrapAsync } = useErrorHandler();\n *\n *   // Option 1: Wrap async function\n *   const safeSubmit = wrapAsync(async () => {\n *     await api.submit(data);\n *   });\n *\n *   // Option 2: Manual handling\n *   const handleClick = async () => {\n *     try {\n *       await riskyOperation();\n *     } catch (error) {\n *       handleError(error, { tags: { operation: 'risky' } });\n *     }\n *   };\n * }\n * ```\n */\nexport function useErrorHandler(defaultContext?: CaptureContext) {\n  const { captureException } = useErrorExplorer();\n\n  /**\n   * Handle an error with optional context\n   */\n  const handleError = useCallback(\n    (error: unknown, context?: CaptureContext): Error => {\n      const err = error instanceof Error ? error : new Error(String(error));\n\n      captureException(err, {\n        ...defaultContext,\n        ...context,\n        tags: {\n          ...defaultContext?.tags,\n          ...context?.tags,\n        },\n        extra: {\n          ...defaultContext?.extra,\n          ...context?.extra,\n        },\n      });\n\n      return err;\n    },\n    [captureException, defaultContext]\n  );\n\n  /**\n   * Wrap an async function with error handling\n   */\n  const wrapAsync = useCallback(\n    <T extends (...args: any[]) => Promise<any>>(\n      fn: T,\n      context?: CaptureContext\n    ): ((...args: Parameters<T>) => Promise<Awaited<ReturnType<T>> | undefined>) => {\n      return async (...args: Parameters<T>) => {\n        try {\n          return await fn(...args);\n        } catch (error) {\n          handleError(error, context);\n          return undefined;\n        }\n      };\n    },\n    [handleError]\n  );\n\n  /**\n   * Create a try-catch wrapper that captures errors\n   */\n  const tryCatch = useCallback(\n    <T>(fn: () => T, context?: CaptureContext): T | undefined => {\n      try {\n        return fn();\n      } catch (error) {\n        handleError(error, context);\n        return undefined;\n      }\n    },\n    [handleError]\n  );\n\n  return {\n    handleError,\n    wrapAsync,\n    tryCatch,\n  };\n}\n\n/**\n * User context hook\n *\n * Sets the user context and cleans up on unmount.\n *\n * @example\n * ```tsx\n * function App() {\n *   const user = useCurrentUser();\n *\n *   useUserContext(user ? {\n *     id: user.id,\n *     email: user.email,\n *     name: user.name,\n *   } : null);\n *\n *   return <MainContent />;\n * }\n * ```\n */\nexport function useUserContext(user: UserContext | null) {\n  const { setUser, clearUser } = useErrorExplorer();\n  const previousUser = useRef<UserContext | null>(null);\n\n  useEffect(() => {\n    // Only update if user changed\n    if (JSON.stringify(user) !== JSON.stringify(previousUser.current)) {\n      if (user) {\n        setUser(user);\n      } else {\n        clearUser();\n      }\n      previousUser.current = user;\n    }\n  }, [user, setUser, clearUser]);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      clearUser();\n    };\n  }, [clearUser]);\n\n  return { setUser, clearUser };\n}\n\n/**\n * Action tracker hook for user interactions\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { trackAction, trackInteraction } = useActionTracker();\n *\n *   const handleSubmit = () => {\n *     trackAction('form_submitted', { formId: 'contact' });\n *     // ... actual submit logic\n *   };\n *\n *   return (\n *     <button\n *       onClick={() => {\n *         trackInteraction('submit-button', 'click');\n *         handleSubmit();\n *       }}\n *     >\n *       Submit\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useActionTracker(componentName?: string) {\n  const { addBreadcrumb } = useErrorExplorer();\n\n  /**\n   * Track a user action\n   */\n  const trackAction = useCallback(\n    (action: string, data?: Record<string, unknown>) => {\n      addBreadcrumb({\n        type: 'user-action',\n        category: 'action',\n        message: action,\n        level: 'info',\n        data: {\n          component: componentName,\n          ...data,\n        },\n      });\n    },\n    [addBreadcrumb, componentName]\n  );\n\n  /**\n   * Track a UI interaction\n   */\n  const trackInteraction = useCallback(\n    (\n      element: string,\n      action: 'click' | 'input' | 'focus' | 'blur' | 'submit',\n      data?: Record<string, unknown>\n    ) => {\n      addBreadcrumb({\n        type: 'user-action',\n        category: `ui.${action}`,\n        message: `${action} on ${element}`,\n        level: 'info',\n        data: {\n          component: componentName,\n          element,\n          ...data,\n        },\n      });\n    },\n    [addBreadcrumb, componentName]\n  );\n\n  return {\n    trackAction,\n    trackInteraction,\n  };\n}\n\n/**\n * Component lifecycle tracking hook\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   useComponentBreadcrumbs('MyComponent');\n *\n *   return <div>...</div>;\n * }\n * ```\n */\nexport function useComponentBreadcrumbs(componentName: string) {\n  const { addBreadcrumb } = useErrorExplorer();\n\n  useEffect(() => {\n    addBreadcrumb({\n      type: 'debug',\n      category: 'react.lifecycle',\n      message: `${componentName} mounted`,\n      level: 'debug',\n    });\n\n    return () => {\n      addBreadcrumb({\n        type: 'debug',\n        category: 'react.lifecycle',\n        message: `${componentName} unmounted`,\n        level: 'debug',\n      });\n    };\n  }, [componentName, addBreadcrumb]);\n}\n","/**\n * @error-explorer/react\n * Error Explorer SDK for React - Automatic error tracking with React integration\n */\n\n// Import for default export\nimport { ErrorExplorerProvider as Provider } from './context';\n\n// Provider and initialization\nexport { ErrorExplorerProvider, ErrorExplorerContext, initErrorExplorer } from './context';\n\n// Error Boundary\nexport { ErrorBoundary, withErrorBoundary, useErrorBoundary } from './ErrorBoundary';\n\n// Hooks\nexport {\n  useErrorExplorer,\n  useErrorHandler,\n  useUserContext,\n  useActionTracker,\n  useComponentBreadcrumbs,\n} from './hooks';\n\n// Types\nexport type {\n  ReactErrorExplorerOptions,\n  ReactComponentContext,\n  ErrorBoundaryProps,\n  ErrorBoundaryState,\n  FallbackProps,\n  ErrorExplorerProviderProps,\n  ErrorExplorerContextValue,\n  WithErrorBoundaryOptions,\n  InitOptions,\n  UserContext,\n  Breadcrumb,\n  CaptureContext,\n} from './types';\n\n// Re-export ErrorExplorer for direct access\nexport { ErrorExplorer } from '@error-explorer/browser';\n\n// Default export is the provider for convenience\nexport default Provider;\n"],"mappings":"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","names":["React","ErrorExplorer","jsx","Component","useEffect","ErrorExplorer","ErrorExplorer","useEffect","ErrorExplorer"]}

package/dist/router.cjs

@@ -0,0 +1,125 @@
+"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/router.tsx
+var router_exports = {};
+__export(router_exports, {
+  createNavigationListener: () => createNavigationListener,
+  useRouterBreadcrumbs: () => useRouterBreadcrumbs,
+  withRouterTracking: () => withRouterTracking
+});
+module.exports = __toCommonJS(router_exports);
+var import_react = require("react");
+var import_browser = require("@error-explorer/browser");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultOptions = {
+  trackNavigation: true,
+  trackParams: false,
+  trackQuery: false,
+  trackHash: false
+};
+function useRouterBreadcrumbs(location, options = {}) {
+  const opts = { ...defaultOptions, ...options };
+  const previousLocation = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!opts.trackNavigation) return;
+    let url = location.pathname;
+    if (opts.trackQuery && location.search) {
+      url += location.search;
+    }
+    if (opts.trackHash && location.hash) {
+      url += location.hash;
+    }
+    if (previousLocation.current === url) return;
+    const from = previousLocation.current;
+    previousLocation.current = url;
+    import_browser.ErrorExplorer.addBreadcrumb({
+      type: "navigation",
+      category: "navigation",
+      message: from ? `Navigated to ${url}` : `Initial page: ${url}`,
+      level: "info",
+      data: {
+        from: from || void 0,
+        to: url
+      }
+    });
+  }, [location.pathname, location.search, location.hash, opts]);
+}
+function createNavigationListener(router, options = {}) {
+  const opts = { ...defaultOptions, ...options };
+  let previousPath = null;
+  return router.subscribe((state) => {
+    if (!opts.trackNavigation) return;
+    const { pathname, search, hash } = state.location;
+    let url = pathname;
+    if (opts.trackQuery && search) {
+      url += search;
+    }
+    if (opts.trackHash && hash) {
+      url += hash;
+    }
+    if (previousPath === url) return;
+    const from = previousPath;
+    previousPath = url;
+    import_browser.ErrorExplorer.addBreadcrumb({
+      type: "navigation",
+      category: "navigation",
+      message: from ? `Navigated to ${url}` : `Initial page: ${url}`,
+      level: "info",
+      data: {
+        from: from || void 0,
+        to: url
+      }
+    });
+  });
+}
+function withRouterTracking(RouterComponent, options = {}) {
+  const Wrapped = (props) => {
+    (0, import_react.useEffect)(() => {
+      if (options.trackNavigation !== false) {
+        let url = window.location.pathname;
+        if (options.trackQuery) {
+          url += window.location.search;
+        }
+        if (options.trackHash) {
+          url += window.location.hash;
+        }
+        import_browser.ErrorExplorer.addBreadcrumb({
+          type: "navigation",
+          category: "navigation",
+          message: `Initial page: ${url}`,
+          level: "info",
+          data: {
+            to: url
+          }
+        });
+      }
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterComponent, { ...props });
+  };
+  Wrapped.displayName = `withRouterTracking(${RouterComponent.displayName || RouterComponent.name || "Router"})`;
+  return Wrapped;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createNavigationListener,
+  useRouterBreadcrumbs,
+  withRouterTracking
+});
+//# sourceMappingURL=router.cjs.map

package/dist/router.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/router.tsx"],"sourcesContent":["/**\n * React Router integration for Error Explorer\n *\n * Tracks navigation events as breadcrumbs.\n */\n\nimport React, { useEffect, useRef } from 'react';\nimport { ErrorExplorer } from '@error-explorer/browser';\n\n/**\n * Router integration options\n */\nexport interface RouterIntegrationOptions {\n  /**\n   * Track navigation events as breadcrumbs\n   * @default true\n   */\n  trackNavigation?: boolean;\n\n  /**\n   * Include URL parameters in breadcrumbs\n   * @default false (for privacy)\n   */\n  trackParams?: boolean;\n\n  /**\n   * Include query string in breadcrumbs\n   * @default false (for privacy)\n   */\n  trackQuery?: boolean;\n\n  /**\n   * Include hash in breadcrumbs\n   * @default false\n   */\n  trackHash?: boolean;\n}\n\nconst defaultOptions: Required<RouterIntegrationOptions> = {\n  trackNavigation: true,\n  trackParams: false,\n  trackQuery: false,\n  trackHash: false,\n};\n\n/**\n * Hook to track React Router navigation\n *\n * Compatible with React Router v6+\n *\n * @example\n * ```tsx\n * import { useLocation } from 'react-router-dom';\n * import { useRouterBreadcrumbs } from '@error-explorer/react/router';\n *\n * function App() {\n *   const location = useLocation();\n *   useRouterBreadcrumbs(location);\n *\n *   return <Routes>...</Routes>;\n * }\n * ```\n */\nexport function useRouterBreadcrumbs(\n  location: { pathname: string; search?: string; hash?: string },\n  options: RouterIntegrationOptions = {}\n) {\n  const opts = { ...defaultOptions, ...options };\n  const previousLocation = useRef<string | null>(null);\n\n  useEffect(() => {\n    if (!opts.trackNavigation) return;\n\n    // Build the URL to track\n    let url = location.pathname;\n    if (opts.trackQuery && location.search) {\n      url += location.search;\n    }\n    if (opts.trackHash && location.hash) {\n      url += location.hash;\n    }\n\n    // Skip if same as previous\n    if (previousLocation.current === url) return;\n\n    const from = previousLocation.current;\n    previousLocation.current = url;\n\n    // Add breadcrumb\n    ErrorExplorer.addBreadcrumb({\n      type: 'navigation',\n      category: 'navigation',\n      message: from ? `Navigated to ${url}` : `Initial page: ${url}`,\n      level: 'info',\n      data: {\n        from: from || undefined,\n        to: url,\n      },\n    });\n  }, [location.pathname, location.search, location.hash, opts]);\n}\n\n/**\n * Create a navigation listener for React Router\n *\n * Use this with the router's subscribe/listen functionality.\n *\n * @example\n * ```tsx\n * import { createBrowserRouter } from 'react-router-dom';\n * import { createNavigationListener } from '@error-explorer/react/router';\n *\n * const router = createBrowserRouter([...routes]);\n * const unsubscribe = createNavigationListener(router);\n *\n * // Cleanup when needed\n * // unsubscribe();\n * ```\n */\nexport function createNavigationListener(\n  router: { subscribe: (callback: (state: { location: { pathname: string; search: string; hash: string } }) => void) => () => void },\n  options: RouterIntegrationOptions = {}\n): () => void {\n  const opts = { ...defaultOptions, ...options };\n  let previousPath: string | null = null;\n\n  return router.subscribe((state) => {\n    if (!opts.trackNavigation) return;\n\n    const { pathname, search, hash } = state.location;\n\n    // Build the URL to track\n    let url = pathname;\n    if (opts.trackQuery && search) {\n      url += search;\n    }\n    if (opts.trackHash && hash) {\n      url += hash;\n    }\n\n    // Skip if same as previous\n    if (previousPath === url) return;\n\n    const from = previousPath;\n    previousPath = url;\n\n    ErrorExplorer.addBreadcrumb({\n      type: 'navigation',\n      category: 'navigation',\n      message: from ? `Navigated to ${url}` : `Initial page: ${url}`,\n      level: 'info',\n      data: {\n        from: from || undefined,\n        to: url,\n      },\n    });\n  });\n}\n\n/**\n * Higher-order component to wrap router with breadcrumb tracking\n *\n * @example\n * ```tsx\n * import { BrowserRouter } from 'react-router-dom';\n * import { withRouterTracking } from '@error-explorer/react/router';\n *\n * const TrackedRouter = withRouterTracking(BrowserRouter);\n *\n * function App() {\n *   return (\n *     <TrackedRouter>\n *       <Routes>...</Routes>\n *     </TrackedRouter>\n *   );\n * }\n * ```\n */\nexport function withRouterTracking<P extends object>(\n  RouterComponent: React.ComponentType<P>,\n  options: RouterIntegrationOptions = {}\n): React.FC<P & { children?: React.ReactNode }> {\n  const Wrapped: React.FC<P & { children?: React.ReactNode }> = (props) => {\n    // Track initial page load\n    useEffect(() => {\n      if (options.trackNavigation !== false) {\n        let url = window.location.pathname;\n        if (options.trackQuery) {\n          url += window.location.search;\n        }\n        if (options.trackHash) {\n          url += window.location.hash;\n        }\n\n        ErrorExplorer.addBreadcrumb({\n          type: 'navigation',\n          category: 'navigation',\n          message: `Initial page: ${url}`,\n          level: 'info',\n          data: {\n            to: url,\n          },\n        });\n      }\n    }, []);\n\n    return <RouterComponent {...props} />;\n  };\n\n  Wrapped.displayName = `withRouterTracking(${RouterComponent.displayName || RouterComponent.name || 'Router'})`;\n\n  return Wrapped;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,mBAAyC;AACzC,qBAA8B;AAuMnB;AAxKX,IAAM,iBAAqD;AAAA,EACzD,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,WAAW;AACb;AAoBO,SAAS,qBACd,UACA,UAAoC,CAAC,GACrC;AACA,QAAM,OAAO,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAC7C,QAAM,uBAAmB,qBAAsB,IAAI;AAEnD,8BAAU,MAAM;AACd,QAAI,CAAC,KAAK,gBAAiB;AAG3B,QAAI,MAAM,SAAS;AACnB,QAAI,KAAK,cAAc,SAAS,QAAQ;AACtC,aAAO,SAAS;AAAA,IAClB;AACA,QAAI,KAAK,aAAa,SAAS,MAAM;AACnC,aAAO,SAAS;AAAA,IAClB;AAGA,QAAI,iBAAiB,YAAY,IAAK;AAEtC,UAAM,OAAO,iBAAiB;AAC9B,qBAAiB,UAAU;AAG3B,iCAAc,cAAc;AAAA,MAC1B,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS,OAAO,gBAAgB,GAAG,KAAK,iBAAiB,GAAG;AAAA,MAC5D,OAAO;AAAA,MACP,MAAM;AAAA,QACJ,MAAM,QAAQ;AAAA,QACd,IAAI;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,UAAU,SAAS,QAAQ,SAAS,MAAM,IAAI,CAAC;AAC9D;AAmBO,SAAS,yBACd,QACA,UAAoC,CAAC,GACzB;AACZ,QAAM,OAAO,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAC7C,MAAI,eAA8B;AAElC,SAAO,OAAO,UAAU,CAAC,UAAU;AACjC,QAAI,CAAC,KAAK,gBAAiB;AAE3B,UAAM,EAAE,UAAU,QAAQ,KAAK,IAAI,MAAM;AAGzC,QAAI,MAAM;AACV,QAAI,KAAK,cAAc,QAAQ;AAC7B,aAAO;AAAA,IACT;AACA,QAAI,KAAK,aAAa,MAAM;AAC1B,aAAO;AAAA,IACT;AAGA,QAAI,iBAAiB,IAAK;AAE1B,UAAM,OAAO;AACb,mBAAe;AAEf,iCAAc,cAAc;AAAA,MAC1B,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS,OAAO,gBAAgB,GAAG,KAAK,iBAAiB,GAAG;AAAA,MAC5D,OAAO;AAAA,MACP,MAAM;AAAA,QACJ,MAAM,QAAQ;AAAA,QACd,IAAI;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAqBO,SAAS,mBACd,iBACA,UAAoC,CAAC,GACS;AAC9C,QAAM,UAAwD,CAAC,UAAU;AAEvE,gCAAU,MAAM;AACd,UAAI,QAAQ,oBAAoB,OAAO;AACrC,YAAI,MAAM,OAAO,SAAS;AAC1B,YAAI,QAAQ,YAAY;AACtB,iBAAO,OAAO,SAAS;AAAA,QACzB;AACA,YAAI,QAAQ,WAAW;AACrB,iBAAO,OAAO,SAAS;AAAA,QACzB;AAEA,qCAAc,cAAc;AAAA,UAC1B,MAAM;AAAA,UACN,UAAU;AAAA,UACV,SAAS,iBAAiB,GAAG;AAAA,UAC7B,OAAO;AAAA,UACP,MAAM;AAAA,YACJ,IAAI;AAAA,UACN;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,WAAO,4CAAC,mBAAiB,GAAG,OAAO;AAAA,EACrC;AAEA,UAAQ,cAAc,sBAAsB,gBAAgB,eAAe,gBAAgB,QAAQ,QAAQ;AAE3G,SAAO;AACT;","names":[]}

package/dist/router.d.cts

@@ -0,0 +1,106 @@
+import React from 'react';
+
+/**
+ * React Router integration for Error Explorer
+ *
+ * Tracks navigation events as breadcrumbs.
+ */
+
+/**
+ * Router integration options
+ */
+interface RouterIntegrationOptions {
+    /**
+     * Track navigation events as breadcrumbs
+     * @default true
+     */
+    trackNavigation?: boolean;
+    /**
+     * Include URL parameters in breadcrumbs
+     * @default false (for privacy)
+     */
+    trackParams?: boolean;
+    /**
+     * Include query string in breadcrumbs
+     * @default false (for privacy)
+     */
+    trackQuery?: boolean;
+    /**
+     * Include hash in breadcrumbs
+     * @default false
+     */
+    trackHash?: boolean;
+}
+/**
+ * Hook to track React Router navigation
+ *
+ * Compatible with React Router v6+
+ *
+ * @example
+ * ```tsx
+ * import { useLocation } from 'react-router-dom';
+ * import { useRouterBreadcrumbs } from '@error-explorer/react/router';
+ *
+ * function App() {
+ *   const location = useLocation();
+ *   useRouterBreadcrumbs(location);
+ *
+ *   return <Routes>...</Routes>;
+ * }
+ * ```
+ */
+declare function useRouterBreadcrumbs(location: {
+    pathname: string;
+    search?: string;
+    hash?: string;
+}, options?: RouterIntegrationOptions): void;
+/**
+ * Create a navigation listener for React Router
+ *
+ * Use this with the router's subscribe/listen functionality.
+ *
+ * @example
+ * ```tsx
+ * import { createBrowserRouter } from 'react-router-dom';
+ * import { createNavigationListener } from '@error-explorer/react/router';
+ *
+ * const router = createBrowserRouter([...routes]);
+ * const unsubscribe = createNavigationListener(router);
+ *
+ * // Cleanup when needed
+ * // unsubscribe();
+ * ```
+ */
+declare function createNavigationListener(router: {
+    subscribe: (callback: (state: {
+        location: {
+            pathname: string;
+            search: string;
+            hash: string;
+        };
+    }) => void) => () => void;
+}, options?: RouterIntegrationOptions): () => void;
+/**
+ * Higher-order component to wrap router with breadcrumb tracking
+ *
+ * @example
+ * ```tsx
+ * import { BrowserRouter } from 'react-router-dom';
+ * import { withRouterTracking } from '@error-explorer/react/router';
+ *
+ * const TrackedRouter = withRouterTracking(BrowserRouter);
+ *
+ * function App() {
+ *   return (
+ *     <TrackedRouter>
+ *       <Routes>...</Routes>
+ *     </TrackedRouter>
+ *   );
+ * }
+ * ```
+ */
+declare function withRouterTracking<P extends object>(RouterComponent: React.ComponentType<P>, options?: RouterIntegrationOptions): React.FC<P & {
+    children?: React.ReactNode;
+}>;
+
+export { type RouterIntegrationOptions, createNavigationListener, useRouterBreadcrumbs, withRouterTracking };