@grafana/faro-react 1.7.0 → 1.7.2

package/README.md

@@ -67,6 +67,26 @@ additional React specific functionality like router instrumentation, a custom Er
 
 ### Router v6 with Data Router
 
+```ts
+initializeFaro({
+  // ...
+
+  instrumentations: [
+    // Load the default Web instrumentations
+    ...getWebInstrumentations(),
+
+    new ReactIntegration({
+      router: {
+        version: ReactRouterVersion.V6_data_router,
+        dependencies: {
+          matchRoutes,
+        },
+      },
+    }),
+  ],
+});
+```
+
 Instrument the routes from a React data router (`BrowserRouter`, `HashRouter`, or `MemoryRouter`).
 
 In the file you create your data router, often the App.\* file pass your data router to the Faro-React
@@ -204,6 +224,28 @@ In case of an error it sends a Faro error event which contains the error message
 stack of the component which contains the exception, and the name of name of the error boundary
 if configured.
 
+```ts
+import { initializeFaro } from '@grafana/faro-react';
+
+initializeFaro({
+  // required: the URL of the Grafana collector
+  url: 'my/collector/url',
+
+  // required: the identification label of your application
+  app: {
+    name: 'my-react-app',
+  },
+
+  instrumentations: [
+    // Load the default Web instrumentations
+    ...getWebInstrumentations(),
+
+    // Must be initialized to get FaroErrorBoundary support
+    new ReactIntegration(),
+  ],
+});
+```
+
 ```tsx
 import { FaroErrorBoundary } from '@grafana/faro-react';
 
@@ -240,14 +282,6 @@ Lifecycle callbacks:
   object as a parameter
 - `onReset`: Executed when React calls resetErrorBoundary, with the Error object as a parameter
 
-```tsx
-// ...
-
-<FaroErrorBoundary>
-  <MyComponent />
-</FaroErrorBoundary>
-```
-
 ```tsx
 import { FaroErrorBoundary, PushErrorOptions } from '@grafana/faro-react';
 

package/dist/bundle/types/router/v6/types.d.ts

@@ -1,5 +1,20 @@
 import type { ReactElement, ReactNode } from 'react';
 import type { ReactRouterLocation } from '../types';
+interface IndexRouteObjectV6DataRouter {
+    caseSensitive?: boolean;
+    children?: undefined;
+    element?: React.ReactNode | null;
+    index: true;
+    path?: string;
+}
+export interface NonIndexRouteObjectV6DataRouter {
+    caseSensitive?: boolean;
+    children?: RouteObjectV6DataRouter[];
+    element?: React.ReactNode | null;
+    index?: false;
+    path?: string;
+}
+export type RouteObjectV6DataRouter = IndexRouteObjectV6DataRouter | NonIndexRouteObjectV6DataRouter;
 export interface ReactRouterV6BaseRouteObject {
     action?: (...args: any[]) => any;
     caseSensitive?: boolean;
@@ -31,7 +46,7 @@ export interface ReactRouterV6RouteMatch<ParamKey extends string = string> {
     pathnameBase: string;
     route: ReactRouterV6RouteObject;
 }
-export type ReactRouterV6CreateRoutesFromChildren = (children: ReactNode) => ReactRouterV6RouteObject[];
+export type ReactRouterV6CreateRoutesFromChildren = (children: ReactNode) => ReactRouterV6RouteObject[] | RouteObjectV6DataRouter[];
 export type ReactRouterV6MatchRoutes = (routes: ReactRouterV6RouteObject[], location: Partial<ReactRouterLocation> | string, basename?: string | undefined) => ReactRouterV6RouteMatch[] | null;
 export type ReactRouterV6RoutesShape = (props: ReactRouterV6RoutesProps) => ReactElement | null;
 export type ReactRouterV6UseLocation = () => ReactRouterLocation;
@@ -50,3 +65,4 @@ export type EventRouteTransitionAttributes = {
     fromRoute?: string;
     fromUrl?: string;
 };
+export {};

package/dist/bundle/types/router/v6/withFaroRouterInstrumentation.d.ts

@@ -1,12 +1,12 @@
 import { NavigationType, ReactRouterLocation } from '../types';
-import type { ReactRouterV6RouteObject } from './types';
+import type { RouteObjectV6DataRouter } from './types';
 interface RouterState {
     historyAction: NavigationType | any;
     location: ReactRouterLocation;
 }
 interface Router {
     state: RouterState;
-    routes: ReactRouterV6RouteObject[];
+    routes: RouteObjectV6DataRouter[];
     subscribe(fn: (state: RouterState) => void): () => void;
 }
 /**

package/dist/cjs/router/v6/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/router/v6/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport type { ReactRouterLocation } from '../types';\n\nexport interface ReactRouterV6BaseRouteObject {\n  action?: (...args: any[]) => any;\n  caseSensitive?: boolean;\n  hasErrorBoundary?: boolean;\n  handle?: any;\n  id?: string;\n  loader?: (...args: any[]) => any;\n  path?: string;\n  shouldRevalidate?: (...args: any[]) => any;\n}\n\nexport type ReactRouterV6RouteObject = ReactRouterV6BaseRouteObject &\n  (\n    | {\n        children?: undefined;\n        index: true;\n      }\n    | {\n        children?: ReactRouterV6RouteObject[];\n        index?: false;\n      }\n  );\n\nexport interface ReactRouterV6RoutesProps {\n  children?: ReactNode;\n  location?: Partial<ReactRouterLocation> | string;\n  routesComponent?: ReactRouterV6RoutesShape;\n}\n\nexport type ReactRouterV6Params<Key extends string = string> = {\n  readonly [key in Key]: string | undefined;\n};\n\nexport interface ReactRouterV6RouteMatch<ParamKey extends string = string> {\n  params: ReactRouterV6Params<ParamKey>;\n  pathname: string;\n  pathnameBase: string;\n  route: ReactRouterV6RouteObject;\n}\n\nexport type ReactRouterV6CreateRoutesFromChildren = (children: ReactNode) => ReactRouterV6RouteObject[];\n\nexport type ReactRouterV6MatchRoutes = (\n  routes: ReactRouterV6RouteObject[],\n  location: Partial<ReactRouterLocation> | string,\n  basename?: string | undefined\n) => ReactRouterV6RouteMatch[] | null;\n\nexport type ReactRouterV6RoutesShape = (props: ReactRouterV6RoutesProps) => ReactElement | null;\n\nexport type ReactRouterV6UseLocation = () => ReactRouterLocation;\n\nexport type ReactRouterV6UseNavigationType = () => 'POP' | 'PUSH' | 'REPLACE';\n\nexport interface ReactRouterV6Dependencies {\n  createRoutesFromChildren: ReactRouterV6CreateRoutesFromChildren;\n  matchRoutes: ReactRouterV6MatchRoutes;\n  Routes: ReactRouterV6RoutesShape;\n  useLocation: ReactRouterV6UseLocation;\n  useNavigationType: ReactRouterV6UseNavigationType;\n}\n\nexport interface ReactRouterV6DataRouterDependencies {\n  matchRoutes: ReactRouterV6MatchRoutes;\n}\n\nexport type EventRouteTransitionAttributes = {\n  fromRoute?: string;\n  fromUrl?: string;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/router/v6/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport type { ReactRouterLocation } from '../types';\n\ninterface IndexRouteObjectV6DataRouter {\n  caseSensitive?: boolean;\n  children?: undefined;\n  element?: React.ReactNode | null;\n  index: true;\n  path?: string;\n}\n\nexport interface NonIndexRouteObjectV6DataRouter {\n  caseSensitive?: boolean;\n  children?: RouteObjectV6DataRouter[];\n  element?: React.ReactNode | null;\n  index?: false;\n  path?: string;\n}\n\nexport type RouteObjectV6DataRouter = IndexRouteObjectV6DataRouter | NonIndexRouteObjectV6DataRouter;\n\nexport interface ReactRouterV6BaseRouteObject {\n  action?: (...args: any[]) => any;\n  caseSensitive?: boolean;\n  hasErrorBoundary?: boolean;\n  handle?: any;\n  id?: string;\n  loader?: (...args: any[]) => any;\n  path?: string;\n  shouldRevalidate?: (...args: any[]) => any;\n}\n\nexport type ReactRouterV6RouteObject = ReactRouterV6BaseRouteObject &\n  (\n    | {\n        children?: undefined;\n        index: true;\n      }\n    | {\n        children?: ReactRouterV6RouteObject[];\n        index?: false;\n      }\n  );\n\nexport interface ReactRouterV6RoutesProps {\n  children?: ReactNode;\n  location?: Partial<ReactRouterLocation> | string;\n  routesComponent?: ReactRouterV6RoutesShape;\n}\n\nexport type ReactRouterV6Params<Key extends string = string> = {\n  readonly [key in Key]: string | undefined;\n};\n\nexport interface ReactRouterV6RouteMatch<ParamKey extends string = string> {\n  params: ReactRouterV6Params<ParamKey>;\n  pathname: string;\n  pathnameBase: string;\n  route: ReactRouterV6RouteObject;\n}\n\nexport type ReactRouterV6CreateRoutesFromChildren = (\n  children: ReactNode\n) => ReactRouterV6RouteObject[] | RouteObjectV6DataRouter[];\n\nexport type ReactRouterV6MatchRoutes = (\n  routes: ReactRouterV6RouteObject[],\n  location: Partial<ReactRouterLocation> | string,\n  basename?: string | undefined\n) => ReactRouterV6RouteMatch[] | null;\n\nexport type ReactRouterV6RoutesShape = (props: ReactRouterV6RoutesProps) => ReactElement | null;\n\nexport type ReactRouterV6UseLocation = () => ReactRouterLocation;\n\nexport type ReactRouterV6UseNavigationType = () => 'POP' | 'PUSH' | 'REPLACE';\n\nexport interface ReactRouterV6Dependencies {\n  createRoutesFromChildren: ReactRouterV6CreateRoutesFromChildren;\n  matchRoutes: ReactRouterV6MatchRoutes;\n  Routes: ReactRouterV6RoutesShape;\n  useLocation: ReactRouterV6UseLocation;\n  useNavigationType: ReactRouterV6UseNavigationType;\n}\n\nexport interface ReactRouterV6DataRouterDependencies {\n  matchRoutes: ReactRouterV6MatchRoutes;\n}\n\nexport type EventRouteTransitionAttributes = {\n  fromRoute?: string;\n  fromUrl?: string;\n};\n"]}

package/dist/cjs/router/v6/withFaroRouterInstrumentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"withFaroRouterInstrumentation.js","sourceRoot":"","sources":["../../../../src/router/v6/withFaroRouterInstrumentation.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,sDAAyE;AAEzE,mDAAyC;AACzC,kCAA+D;AAE/D,2DAAqD;AAErD,iCAA+C;AAa/C;;GAEG;AACH,SAAgB,6BAA6B,CAA4B,MAAS;IAChF,IAAI,SAAS,GAAmC,EAAE,CAAC;IAEnD,MAAM,CAAC,SAAS,CAAC,UAAC,KAAK;;QACrB,IAAM,cAAc,GAAmB,KAAK,CAAC,aAAa,CAAC;QAC3D,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAChC,IAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAE7B,IAAI,kCAAa,IAAI,CAAC,cAAc,KAAK,sBAAc,CAAC,IAAI,IAAI,cAAc,KAAK,sBAAc,CAAC,GAAG,CAAC,EAAE;YACtG,IAAM,KAAK,GAAG,IAAA,4BAAoB,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;YACrD,IAAM,GAAG,GAAG,MAAA,2BAAY,CAAC,QAAQ,0CAAE,IAAI,CAAC;YAExC,kBAAG,CAAC,SAAS,CAAC,iCAAkB,aAC9B,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,MAAA,2BAAY,CAAC,QAAQ,0CAAE,IAAI,IAC/B,SAAS,EACZ,CAAC;YAEH,SAAS,GAAG;gBACV,SAAS,EAAE,KAAK;gBAChB,OAAO,EAAE,GAAG;aACb,CAAC;SACH;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC;AA1BD,sEA0BC","sourcesContent":["import { EVENT_ROUTE_CHANGE, globalObject } from '@grafana/faro-web-sdk';\n\nimport { api } from '../../dependencies';\nimport { NavigationType, ReactRouterLocation } from '../types';\n\nimport { isInitialized } from './routerDependencies';\nimport type { EventRouteTransitionAttributes, ReactRouterV6RouteObject } from './types';\nimport { getRouteFromLocation } from './utils';\n\ninterface RouterState {\n  historyAction: NavigationType | any;\n  location: ReactRouterLocation;\n}\n\ninterface Router {\n  state: RouterState;\n  routes: ReactRouterV6RouteObject[];\n  subscribe(fn: (state: RouterState) => void): () => void;\n}\n\n/**\n * To use with React Router 6.4 data APIs.\n */\nexport function withFaroRouterInstrumentation<R extends Router = Router>(router: R) {\n  let lastRoute: EventRouteTransitionAttributes = {};\n\n  router.subscribe((state) => {\n    const navigationType: NavigationType = state.historyAction;\n    const location = state.location;\n    const routes = router.routes;\n\n    if (isInitialized && (navigationType === NavigationType.Push || navigationType === NavigationType.Pop)) {\n      const route = getRouteFromLocation(routes, location);\n      const url = globalObject.location?.href;\n\n      api.pushEvent(EVENT_ROUTE_CHANGE, {\n        toRoute: route,\n        toUrl: globalObject.location?.href,\n        ...lastRoute,\n      });\n\n      lastRoute = {\n        fromRoute: route,\n        fromUrl: url,\n      };\n    }\n  });\n\n  return router;\n}\n"]}
+{"version":3,"file":"withFaroRouterInstrumentation.js","sourceRoot":"","sources":["../../../../src/router/v6/withFaroRouterInstrumentation.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,sDAAyE;AAEzE,mDAAyC;AACzC,kCAA+D;AAE/D,2DAAqD;AAErD,iCAA+C;AAa/C;;GAEG;AACH,SAAgB,6BAA6B,CAA4B,MAAS;IAChF,IAAI,SAAS,GAAmC,EAAE,CAAC;IAEnD,MAAM,CAAC,SAAS,CAAC,UAAC,KAAK;;QACrB,IAAM,cAAc,GAAmB,KAAK,CAAC,aAAa,CAAC;QAC3D,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAChC,IAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAE7B,IAAI,kCAAa,IAAI,CAAC,cAAc,KAAK,sBAAc,CAAC,IAAI,IAAI,cAAc,KAAK,sBAAc,CAAC,GAAG,CAAC,EAAE;YACtG,IAAM,KAAK,GAAG,IAAA,4BAAoB,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;YACrD,IAAM,GAAG,GAAG,MAAA,2BAAY,CAAC,QAAQ,0CAAE,IAAI,CAAC;YAExC,kBAAG,CAAC,SAAS,CAAC,iCAAkB,aAC9B,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,MAAA,2BAAY,CAAC,QAAQ,0CAAE,IAAI,IAC/B,SAAS,EACZ,CAAC;YAEH,SAAS,GAAG;gBACV,SAAS,EAAE,KAAK;gBAChB,OAAO,EAAE,GAAG;aACb,CAAC;SACH;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC;AA1BD,sEA0BC","sourcesContent":["import { EVENT_ROUTE_CHANGE, globalObject } from '@grafana/faro-web-sdk';\n\nimport { api } from '../../dependencies';\nimport { NavigationType, ReactRouterLocation } from '../types';\n\nimport { isInitialized } from './routerDependencies';\nimport type { EventRouteTransitionAttributes, RouteObjectV6DataRouter } from './types';\nimport { getRouteFromLocation } from './utils';\n\ninterface RouterState {\n  historyAction: NavigationType | any;\n  location: ReactRouterLocation;\n}\n\ninterface Router {\n  state: RouterState;\n  routes: RouteObjectV6DataRouter[];\n  subscribe(fn: (state: RouterState) => void): () => void;\n}\n\n/**\n * To use with React Router 6.4 data APIs.\n */\nexport function withFaroRouterInstrumentation<R extends Router = Router>(router: R) {\n  let lastRoute: EventRouteTransitionAttributes = {};\n\n  router.subscribe((state) => {\n    const navigationType: NavigationType = state.historyAction;\n    const location = state.location;\n    const routes = router.routes;\n\n    if (isInitialized && (navigationType === NavigationType.Push || navigationType === NavigationType.Pop)) {\n      const route = getRouteFromLocation(routes, location);\n      const url = globalObject.location?.href;\n\n      api.pushEvent(EVENT_ROUTE_CHANGE, {\n        toRoute: route,\n        toUrl: globalObject.location?.href,\n        ...lastRoute,\n      });\n\n      lastRoute = {\n        fromRoute: route,\n        fromUrl: url,\n      };\n    }\n  });\n\n  return router;\n}\n"]}

package/dist/esm/router/v6/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/router/v6/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport type { ReactRouterLocation } from '../types';\n\nexport interface ReactRouterV6BaseRouteObject {\n  action?: (...args: any[]) => any;\n  caseSensitive?: boolean;\n  hasErrorBoundary?: boolean;\n  handle?: any;\n  id?: string;\n  loader?: (...args: any[]) => any;\n  path?: string;\n  shouldRevalidate?: (...args: any[]) => any;\n}\n\nexport type ReactRouterV6RouteObject = ReactRouterV6BaseRouteObject &\n  (\n    | {\n        children?: undefined;\n        index: true;\n      }\n    | {\n        children?: ReactRouterV6RouteObject[];\n        index?: false;\n      }\n  );\n\nexport interface ReactRouterV6RoutesProps {\n  children?: ReactNode;\n  location?: Partial<ReactRouterLocation> | string;\n  routesComponent?: ReactRouterV6RoutesShape;\n}\n\nexport type ReactRouterV6Params<Key extends string = string> = {\n  readonly [key in Key]: string | undefined;\n};\n\nexport interface ReactRouterV6RouteMatch<ParamKey extends string = string> {\n  params: ReactRouterV6Params<ParamKey>;\n  pathname: string;\n  pathnameBase: string;\n  route: ReactRouterV6RouteObject;\n}\n\nexport type ReactRouterV6CreateRoutesFromChildren = (children: ReactNode) => ReactRouterV6RouteObject[];\n\nexport type ReactRouterV6MatchRoutes = (\n  routes: ReactRouterV6RouteObject[],\n  location: Partial<ReactRouterLocation> | string,\n  basename?: string | undefined\n) => ReactRouterV6RouteMatch[] | null;\n\nexport type ReactRouterV6RoutesShape = (props: ReactRouterV6RoutesProps) => ReactElement | null;\n\nexport type ReactRouterV6UseLocation = () => ReactRouterLocation;\n\nexport type ReactRouterV6UseNavigationType = () => 'POP' | 'PUSH' | 'REPLACE';\n\nexport interface ReactRouterV6Dependencies {\n  createRoutesFromChildren: ReactRouterV6CreateRoutesFromChildren;\n  matchRoutes: ReactRouterV6MatchRoutes;\n  Routes: ReactRouterV6RoutesShape;\n  useLocation: ReactRouterV6UseLocation;\n  useNavigationType: ReactRouterV6UseNavigationType;\n}\n\nexport interface ReactRouterV6DataRouterDependencies {\n  matchRoutes: ReactRouterV6MatchRoutes;\n}\n\nexport type EventRouteTransitionAttributes = {\n  fromRoute?: string;\n  fromUrl?: string;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/router/v6/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport type { ReactRouterLocation } from '../types';\n\ninterface IndexRouteObjectV6DataRouter {\n  caseSensitive?: boolean;\n  children?: undefined;\n  element?: React.ReactNode | null;\n  index: true;\n  path?: string;\n}\n\nexport interface NonIndexRouteObjectV6DataRouter {\n  caseSensitive?: boolean;\n  children?: RouteObjectV6DataRouter[];\n  element?: React.ReactNode | null;\n  index?: false;\n  path?: string;\n}\n\nexport type RouteObjectV6DataRouter = IndexRouteObjectV6DataRouter | NonIndexRouteObjectV6DataRouter;\n\nexport interface ReactRouterV6BaseRouteObject {\n  action?: (...args: any[]) => any;\n  caseSensitive?: boolean;\n  hasErrorBoundary?: boolean;\n  handle?: any;\n  id?: string;\n  loader?: (...args: any[]) => any;\n  path?: string;\n  shouldRevalidate?: (...args: any[]) => any;\n}\n\nexport type ReactRouterV6RouteObject = ReactRouterV6BaseRouteObject &\n  (\n    | {\n        children?: undefined;\n        index: true;\n      }\n    | {\n        children?: ReactRouterV6RouteObject[];\n        index?: false;\n      }\n  );\n\nexport interface ReactRouterV6RoutesProps {\n  children?: ReactNode;\n  location?: Partial<ReactRouterLocation> | string;\n  routesComponent?: ReactRouterV6RoutesShape;\n}\n\nexport type ReactRouterV6Params<Key extends string = string> = {\n  readonly [key in Key]: string | undefined;\n};\n\nexport interface ReactRouterV6RouteMatch<ParamKey extends string = string> {\n  params: ReactRouterV6Params<ParamKey>;\n  pathname: string;\n  pathnameBase: string;\n  route: ReactRouterV6RouteObject;\n}\n\nexport type ReactRouterV6CreateRoutesFromChildren = (\n  children: ReactNode\n) => ReactRouterV6RouteObject[] | RouteObjectV6DataRouter[];\n\nexport type ReactRouterV6MatchRoutes = (\n  routes: ReactRouterV6RouteObject[],\n  location: Partial<ReactRouterLocation> | string,\n  basename?: string | undefined\n) => ReactRouterV6RouteMatch[] | null;\n\nexport type ReactRouterV6RoutesShape = (props: ReactRouterV6RoutesProps) => ReactElement | null;\n\nexport type ReactRouterV6UseLocation = () => ReactRouterLocation;\n\nexport type ReactRouterV6UseNavigationType = () => 'POP' | 'PUSH' | 'REPLACE';\n\nexport interface ReactRouterV6Dependencies {\n  createRoutesFromChildren: ReactRouterV6CreateRoutesFromChildren;\n  matchRoutes: ReactRouterV6MatchRoutes;\n  Routes: ReactRouterV6RoutesShape;\n  useLocation: ReactRouterV6UseLocation;\n  useNavigationType: ReactRouterV6UseNavigationType;\n}\n\nexport interface ReactRouterV6DataRouterDependencies {\n  matchRoutes: ReactRouterV6MatchRoutes;\n}\n\nexport type EventRouteTransitionAttributes = {\n  fromRoute?: string;\n  fromUrl?: string;\n};\n"]}

package/dist/esm/router/v6/withFaroRouterInstrumentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"withFaroRouterInstrumentation.js","sourceRoot":"","sources":["../../../../src/router/v6/withFaroRouterInstrumentation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,cAAc,EAAuB,MAAM,UAAU,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAa/C;;GAEG;AACH,MAAM,UAAU,6BAA6B,CAA4B,MAAS;IAChF,IAAI,SAAS,GAAmC,EAAE,CAAC;IAEnD,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;;QACzB,MAAM,cAAc,GAAmB,KAAK,CAAC,aAAa,CAAC;QAC3D,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAE7B,IAAI,aAAa,IAAI,CAAC,cAAc,KAAK,cAAc,CAAC,IAAI,IAAI,cAAc,KAAK,cAAc,CAAC,GAAG,CAAC,EAAE;YACtG,MAAM,KAAK,GAAG,oBAAoB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;YACrD,MAAM,GAAG,GAAG,MAAA,YAAY,CAAC,QAAQ,0CAAE,IAAI,CAAC;YAExC,GAAG,CAAC,SAAS,CAAC,kBAAkB,kBAC9B,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,MAAA,YAAY,CAAC,QAAQ,0CAAE,IAAI,IAC/B,SAAS,EACZ,CAAC;YAEH,SAAS,GAAG;gBACV,SAAS,EAAE,KAAK;gBAChB,OAAO,EAAE,GAAG;aACb,CAAC;SACH;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["import { EVENT_ROUTE_CHANGE, globalObject } from '@grafana/faro-web-sdk';\n\nimport { api } from '../../dependencies';\nimport { NavigationType, ReactRouterLocation } from '../types';\n\nimport { isInitialized } from './routerDependencies';\nimport type { EventRouteTransitionAttributes, ReactRouterV6RouteObject } from './types';\nimport { getRouteFromLocation } from './utils';\n\ninterface RouterState {\n  historyAction: NavigationType | any;\n  location: ReactRouterLocation;\n}\n\ninterface Router {\n  state: RouterState;\n  routes: ReactRouterV6RouteObject[];\n  subscribe(fn: (state: RouterState) => void): () => void;\n}\n\n/**\n * To use with React Router 6.4 data APIs.\n */\nexport function withFaroRouterInstrumentation<R extends Router = Router>(router: R) {\n  let lastRoute: EventRouteTransitionAttributes = {};\n\n  router.subscribe((state) => {\n    const navigationType: NavigationType = state.historyAction;\n    const location = state.location;\n    const routes = router.routes;\n\n    if (isInitialized && (navigationType === NavigationType.Push || navigationType === NavigationType.Pop)) {\n      const route = getRouteFromLocation(routes, location);\n      const url = globalObject.location?.href;\n\n      api.pushEvent(EVENT_ROUTE_CHANGE, {\n        toRoute: route,\n        toUrl: globalObject.location?.href,\n        ...lastRoute,\n      });\n\n      lastRoute = {\n        fromRoute: route,\n        fromUrl: url,\n      };\n    }\n  });\n\n  return router;\n}\n"]}
+{"version":3,"file":"withFaroRouterInstrumentation.js","sourceRoot":"","sources":["../../../../src/router/v6/withFaroRouterInstrumentation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,cAAc,EAAuB,MAAM,UAAU,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAa/C;;GAEG;AACH,MAAM,UAAU,6BAA6B,CAA4B,MAAS;IAChF,IAAI,SAAS,GAAmC,EAAE,CAAC;IAEnD,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;;QACzB,MAAM,cAAc,GAAmB,KAAK,CAAC,aAAa,CAAC;QAC3D,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAE7B,IAAI,aAAa,IAAI,CAAC,cAAc,KAAK,cAAc,CAAC,IAAI,IAAI,cAAc,KAAK,cAAc,CAAC,GAAG,CAAC,EAAE;YACtG,MAAM,KAAK,GAAG,oBAAoB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;YACrD,MAAM,GAAG,GAAG,MAAA,YAAY,CAAC,QAAQ,0CAAE,IAAI,CAAC;YAExC,GAAG,CAAC,SAAS,CAAC,kBAAkB,kBAC9B,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,MAAA,YAAY,CAAC,QAAQ,0CAAE,IAAI,IAC/B,SAAS,EACZ,CAAC;YAEH,SAAS,GAAG;gBACV,SAAS,EAAE,KAAK;gBAChB,OAAO,EAAE,GAAG;aACb,CAAC;SACH;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["import { EVENT_ROUTE_CHANGE, globalObject } from '@grafana/faro-web-sdk';\n\nimport { api } from '../../dependencies';\nimport { NavigationType, ReactRouterLocation } from '../types';\n\nimport { isInitialized } from './routerDependencies';\nimport type { EventRouteTransitionAttributes, RouteObjectV6DataRouter } from './types';\nimport { getRouteFromLocation } from './utils';\n\ninterface RouterState {\n  historyAction: NavigationType | any;\n  location: ReactRouterLocation;\n}\n\ninterface Router {\n  state: RouterState;\n  routes: RouteObjectV6DataRouter[];\n  subscribe(fn: (state: RouterState) => void): () => void;\n}\n\n/**\n * To use with React Router 6.4 data APIs.\n */\nexport function withFaroRouterInstrumentation<R extends Router = Router>(router: R) {\n  let lastRoute: EventRouteTransitionAttributes = {};\n\n  router.subscribe((state) => {\n    const navigationType: NavigationType = state.historyAction;\n    const location = state.location;\n    const routes = router.routes;\n\n    if (isInitialized && (navigationType === NavigationType.Push || navigationType === NavigationType.Pop)) {\n      const route = getRouteFromLocation(routes, location);\n      const url = globalObject.location?.href;\n\n      api.pushEvent(EVENT_ROUTE_CHANGE, {\n        toRoute: route,\n        toUrl: globalObject.location?.href,\n        ...lastRoute,\n      });\n\n      lastRoute = {\n        fromRoute: route,\n        fromUrl: url,\n      };\n    }\n  });\n\n  return router;\n}\n"]}

package/dist/types/router/v6/types.d.ts

@@ -1,5 +1,20 @@
 import type { ReactElement, ReactNode } from 'react';
 import type { ReactRouterLocation } from '../types';
+interface IndexRouteObjectV6DataRouter {
+    caseSensitive?: boolean;
+    children?: undefined;
+    element?: React.ReactNode | null;
+    index: true;
+    path?: string;
+}
+export interface NonIndexRouteObjectV6DataRouter {
+    caseSensitive?: boolean;
+    children?: RouteObjectV6DataRouter[];
+    element?: React.ReactNode | null;
+    index?: false;
+    path?: string;
+}
+export type RouteObjectV6DataRouter = IndexRouteObjectV6DataRouter | NonIndexRouteObjectV6DataRouter;
 export interface ReactRouterV6BaseRouteObject {
     action?: (...args: any[]) => any;
     caseSensitive?: boolean;
@@ -31,7 +46,7 @@ export interface ReactRouterV6RouteMatch<ParamKey extends string = string> {
     pathnameBase: string;
     route: ReactRouterV6RouteObject;
 }
-export type ReactRouterV6CreateRoutesFromChildren = (children: ReactNode) => ReactRouterV6RouteObject[];
+export type ReactRouterV6CreateRoutesFromChildren = (children: ReactNode) => ReactRouterV6RouteObject[] | RouteObjectV6DataRouter[];
 export type ReactRouterV6MatchRoutes = (routes: ReactRouterV6RouteObject[], location: Partial<ReactRouterLocation> | string, basename?: string | undefined) => ReactRouterV6RouteMatch[] | null;
 export type ReactRouterV6RoutesShape = (props: ReactRouterV6RoutesProps) => ReactElement | null;
 export type ReactRouterV6UseLocation = () => ReactRouterLocation;
@@ -50,3 +65,4 @@ export type EventRouteTransitionAttributes = {
     fromRoute?: string;
     fromUrl?: string;
 };
+export {};

package/dist/types/router/v6/withFaroRouterInstrumentation.d.ts

@@ -1,12 +1,12 @@
 import { NavigationType, ReactRouterLocation } from '../types';
-import type { ReactRouterV6RouteObject } from './types';
+import type { RouteObjectV6DataRouter } from './types';
 interface RouterState {
     historyAction: NavigationType | any;
     location: ReactRouterLocation;
 }
 interface Router {
     state: RouterState;
-    routes: ReactRouterV6RouteObject[];
+    routes: RouteObjectV6DataRouter[];
     subscribe(fn: (state: RouterState) => void): () => void;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/faro-react",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "Faro package that enables easier integration in projects built with React.",
   "keywords": [
     "observability",
@@ -52,8 +52,8 @@
     "quality:circular-deps": "madge --circular ."
   },
   "dependencies": {
-    "@grafana/faro-web-sdk": "^1.7.0",
-    "@grafana/faro-web-tracing": "^1.7.0",
+    "@grafana/faro-web-sdk": "^1.7.2",
+    "@grafana/faro-web-tracing": "^1.7.2",
     "hoist-non-react-statics": "^3.3.2"
   },
   "devDependencies": {
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b06dd9c3b974d3d9103f7a045d1e86207ba007d0"
+  "gitHead": "1561e10c2a8e46fd765589d7aaf38e68731edd23"
 }