@error-explorer/react 1.1.1

package/dist/router.d.ts

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

package/dist/router.js

@@ -0,0 +1,98 @@
+// src/router.tsx
+import { useEffect, useRef } from "react";
+import { ErrorExplorer } from "@error-explorer/browser";
+import { jsx } from "react/jsx-runtime";
+var defaultOptions = {
+  trackNavigation: true,
+  trackParams: false,
+  trackQuery: false,
+  trackHash: false
+};
+function useRouterBreadcrumbs(location, options = {}) {
+  const opts = { ...defaultOptions, ...options };
+  const previousLocation = useRef(null);
+  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;
+    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;
+    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) => {
+    useEffect(() => {
+      if (options.trackNavigation !== false) {
+        let url = window.location.pathname;
+        if (options.trackQuery) {
+          url += window.location.search;
+        }
+        if (options.trackHash) {
+          url += window.location.hash;
+        }
+        ErrorExplorer.addBreadcrumb({
+          type: "navigation",
+          category: "navigation",
+          message: `Initial page: ${url}`,
+          level: "info",
+          data: {
+            to: url
+          }
+        });
+      }
+    }, []);
+    return /* @__PURE__ */ jsx(RouterComponent, { ...props });
+  };
+  Wrapped.displayName = `withRouterTracking(${RouterComponent.displayName || RouterComponent.name || "Router"})`;
+  return Wrapped;
+}
+export {
+  createNavigationListener,
+  useRouterBreadcrumbs,
+  withRouterTracking
+};
+//# sourceMappingURL=router.js.map

package/dist/router.js.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":";AAMA,SAAgB,WAAW,cAAc;AACzC,SAAS,qBAAqB;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,mBAAmB,OAAsB,IAAI;AAEnD,YAAU,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,kBAAc,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,kBAAc,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,cAAU,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,sBAAc,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,oBAAC,mBAAiB,GAAG,OAAO;AAAA,EACrC;AAEA,UAAQ,cAAc,sBAAsB,gBAAgB,eAAe,gBAAgB,QAAQ,QAAQ;AAE3G,SAAO;AACT;","names":[]}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@error-explorer/react",
+  "version": "1.1.1",
+  "description": "Error Explorer SDK for React - Automatic error tracking with React integration",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./router": {
+      "types": "./dist/router.d.ts",
+      "import": "./dist/router.js",
+      "require": "./dist/router.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-router-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@error-explorer/browser": "file:../../core/browser"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "happy-dom": "^12.10.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  },
+  "keywords": [
+    "error-explorer",
+    "react",
+    "error-tracking",
+    "error-monitoring",
+    "error-boundary",
+    "breadcrumbs",
+    "debugging"
+  ],
+  "author": "Error Explorer",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Error-Explorer/SDKs.git",
+    "directory": "frameworks/react"
+  },
+  "bugs": {
+    "url": "https://github.com/Error-Explorer/SDKs/issues"
+  },
+  "homepage": "https://github.com/Error-Explorer/SDKs/tree/main/frameworks/react#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}