@lookiero/checkout 0.6.0-beta.39 → 0.6.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/infrastructure/ui/Root.d.ts +1 -3
  2. package/dist/infrastructure/ui/Root.js +10 -4
  3. package/dist/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.js +1 -1
  4. package/dist/infrastructure/ui/routing/Routing.d.ts +3 -11
  5. package/dist/infrastructure/ui/routing/Routing.js +6 -21
  6. package/dist/infrastructure/ui/views/App.js +10 -4
  7. package/dist/shared/logging/SentryLogger.d.ts +4 -8
  8. package/dist/shared/logging/SentryLogger.js +30 -102
  9. package/package.json +3 -2
  10. package/dist/shared/logging/SentryDependencies.d.ts +0 -13
  11. package/dist/shared/logging/SentryDependencies.js +0 -18
  12. package/dist/shared/logging/SentryDependencies.native.d.ts +0 -9
  13. package/dist/shared/logging/SentryDependencies.native.js +0 -20
  14. package/dist/shared/logging/location.d.ts +0 -3
  15. package/dist/shared/logging/location.js +0 -5
  16. package/dist/shared/logging/matchRoutes.d.ts +0 -3
  17. package/dist/shared/logging/matchRoutes.js +0 -7
  18. package/dist/shared/logging/reactRouterV6Instrumentation/normalizedNameAndMatchForLocation.d.ts +0 -12
  19. package/dist/shared/logging/reactRouterV6Instrumentation/normalizedNameAndMatchForLocation.js +0 -34
  20. package/dist/shared/logging/reactRouterV6Instrumentation/reactRouterV6Instrumentation.native.d.ts +0 -29
  21. package/dist/shared/logging/reactRouterV6Instrumentation/reactRouterV6Instrumentation.native.js +0 -134
  22. package/dist/shared/logging/reactRouterV6Instrumentation/transactionContext.d.ts +0 -22
  23. package/dist/shared/logging/reactRouterV6Instrumentation/transactionContext.js +0 -15
  24. package/dist/shared/logging/reactRouterV6Instrumentation/types.d.ts +0 -9
  25. package/dist/shared/logging/reactRouterV6Instrumentation/types.js +0 -1
  26. package/dist/shared/logging/reactRouterV6Instrumentation.native.d.ts +0 -27
  27. package/dist/shared/logging/reactRouterV6Instrumentation.native.js +0 -115
  28. package/dist/shared/logging/types.d.ts +0 -20
  29. package/dist/shared/logging/types.js +0 -1
@@ -1,7 +1,6 @@
1
1
  import { I18n } from "@lookiero/i18n-react";
2
2
  import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
3
3
  import { ComponentType } from "react";
4
- import { useRoutes as reactRouterUseRoutes } from "react-router-native";
5
4
  import { Customer } from "../../projection/shared/customer";
6
5
  import { SentryLoggerFunctionArgs } from "../../shared/logging/SentryLogger";
7
6
  import { Menu, TabBar } from "./views/navigation/Navigation";
@@ -9,7 +8,7 @@ interface RootFunctionArgs {
9
8
  readonly Messaging: MessagingRoot;
10
9
  readonly I18n: I18n;
11
10
  readonly development?: boolean;
12
- readonly sentry: SentryLoggerFunctionArgs;
11
+ readonly sentry?: SentryLoggerFunctionArgs;
13
12
  readonly getAuthToken: () => Promise<string>;
14
13
  }
15
14
  interface RootFunction {
@@ -23,7 +22,6 @@ interface RootProps {
23
22
  readonly tabBar: TabBar;
24
23
  readonly onNotAccessible: () => void;
25
24
  readonly useRedirect: () => Record<string, string>;
26
- readonly useRoutes: typeof reactRouterUseRoutes;
27
25
  }
28
26
  declare const root: RootFunction;
29
27
  export type { RootProps };
@@ -1,15 +1,21 @@
1
1
  import React, { useCallback } from "react";
2
2
  import { Platform } from "react-native";
3
- import { useRoutes as reactRouterUseRoutes } from "react-router-native";
4
3
  import { sentryLogger } from "../../shared/logging/SentryLogger";
5
4
  import { Routing } from "./routing/Routing";
6
5
  const root = ({ Messaging, I18n, getAuthToken, development, sentry }) => {
7
6
  // eslint-disable-next-line react/display-name, react/prop-types
8
- const Root = ({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
7
+ const Root = ({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect }) => {
9
8
  const handleOnI18nError = useCallback(() => void 0, []);
10
9
  return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
11
- React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, locale: locale, menu: menu, tabBar: tabBar, useRedirect: useRedirect, useRoutes: useRoutes, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
10
+ React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, locale: locale, menu: menu, tabBar: tabBar, useRedirect: useRedirect, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
12
11
  };
13
- return sentryLogger(sentry)(Root);
12
+ return sentry
13
+ ? sentryLogger({
14
+ publicKey: sentry.publicKey,
15
+ environment: sentry.environment,
16
+ release: sentry.release,
17
+ project: sentry.project,
18
+ })(Root)
19
+ : Root;
14
20
  };
15
21
  export { root };
@@ -11,7 +11,7 @@ const CheckoutAccessibilityMiddleware = ({ customerId, onNotAccessible, loader =
11
11
  if (notAccessible) {
12
12
  onNotAccessibleRef.current();
13
13
  }
14
- }, [notAccessible]);
14
+ }, [notAccessible, onNotAccessible]);
15
15
  return accessible === undefined && [QueryStatus.IDLE, QueryStatus.LOADING].includes(status)
16
16
  ? loader
17
17
  : accessible
@@ -1,6 +1,5 @@
1
1
  import { I18n } from "@lookiero/i18n-react";
2
- import React from "react";
3
- import { useRoutes as reactRouterUseRoutes } from "react-router-native";
2
+ import { FC } from "react";
4
3
  import { Customer } from "../../../projection/shared/customer";
5
4
  import { Menu, TabBar } from "../views/navigation/Navigation";
6
5
  interface RoutingProps {
@@ -14,13 +13,6 @@ interface RoutingProps {
14
13
  readonly onNotAccessible: () => void;
15
14
  readonly onI18nError?: (err: Error) => void;
16
15
  readonly useRedirect: () => Record<string, string>;
17
- readonly useRoutes: typeof reactRouterUseRoutes;
18
16
  }
19
- /**
20
- * Provided useRoutes is not stable (when integrated with Sentry) as it's rendering a different component tree.
21
- *
22
- * https://github.com/getsentry/sentry-javascript/blob/master/packages/react/src/reactrouterv6.tsx#L221
23
- * (SentryRoutes is a new component after each re-render)
24
- */
25
- declare const MemoizedRouting: React.NamedExoticComponent<RoutingProps>;
26
- export { MemoizedRouting as Routing };
17
+ declare const Routing: FC<RoutingProps>;
18
+ export { Routing };
@@ -1,5 +1,5 @@
1
- import React, { lazy, memo, Suspense } from "react";
2
- import { Navigate, Outlet, useRoutes as reactRouterUseRoutes } from "react-router-native";
1
+ import React, { lazy, Suspense } from "react";
2
+ import { Navigate, Outlet, useRoutes } from "react-router-native";
3
3
  import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
4
4
  import { App } from "../views/App";
5
5
  import { CheckoutPaymentModal } from "../views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal";
@@ -12,10 +12,9 @@ const Item = lazy(() => import("../views/item/Item").then((module) => ({ default
12
12
  const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
13
13
  const Checkout = lazy(() => import("../views/checkout/Checkout").then((module) => ({ default: module.Checkout })));
14
14
  const Feedback = lazy(() => import("../views/feedback/Feedback").then((module) => ({ default: module.Feedback })));
15
- const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
16
- return useRoutes([
15
+ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, }) => {
16
+ const routes = useRoutes([
17
17
  {
18
- id: "root",
19
18
  path: "",
20
19
  element: (React.createElement(BasePathProvider, { basePath: basePath },
21
20
  React.createElement(CheckoutAccessibilityMiddleware, { customerId: customer?.customerId, onNotAccessible: onNotAccessible },
@@ -25,63 +24,49 @@ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthT
25
24
  React.createElement(Outlet, null))))))),
26
25
  children: [
27
26
  {
28
- id: Routes.INTRO,
29
27
  path: Routes.INTRO,
30
28
  element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
31
29
  React.createElement(Intro, { customerId: customer?.customerId }))),
32
30
  },
33
31
  {
34
- id: Routes.ITEM,
35
32
  path: Routes.ITEM,
36
33
  element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
37
34
  React.createElement(Item, { country: customer?.country, customerId: customer?.customerId }))),
38
35
  },
39
36
  {
40
- id: Routes.ITEM_DETAIL,
41
37
  path: Routes.ITEM_DETAIL,
42
38
  element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
43
39
  React.createElement(Item, { country: customer?.country, customerId: customer?.customerId }))),
44
40
  },
45
41
  {
46
- id: Routes.SUMMARY,
47
42
  path: Routes.SUMMARY,
48
43
  element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
49
44
  React.createElement(Summary, { country: customer?.country, customerId: customer?.customerId }))),
50
45
  },
51
46
  {
52
- id: Routes.CHECKOUT,
53
47
  path: Routes.CHECKOUT,
54
48
  element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
55
49
  React.createElement(Checkout, { country: customer?.country, customerId: customer?.customerId, useRedirect: useRedirect },
56
50
  React.createElement(Outlet, null)))),
57
51
  children: [
58
52
  {
59
- id: Routes.CHECKOUT_PAYMENT,
60
53
  path: Routes.CHECKOUT_PAYMENT,
61
54
  element: React.createElement(CheckoutPaymentModal, { customerId: customer?.customerId, getAuthToken: getAuthToken }),
62
55
  },
63
56
  ],
64
57
  },
65
58
  {
66
- id: Routes.FEEDBACK,
67
59
  path: Routes.FEEDBACK,
68
60
  element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
69
61
  React.createElement(Feedback, { customerId: customer?.customerId }))),
70
62
  },
71
63
  {
72
- id: "not-found-home-redirect",
73
64
  path: "*",
74
65
  element: React.createElement(Navigate, { to: `${Routes.HOME}`, replace: true }),
75
66
  },
76
67
  ],
77
68
  },
78
69
  ]);
70
+ return routes;
79
71
  };
80
- /**
81
- * Provided useRoutes is not stable (when integrated with Sentry) as it's rendering a different component tree.
82
- *
83
- * https://github.com/getsentry/sentry-javascript/blob/master/packages/react/src/reactrouterv6.tsx#L221
84
- * (SentryRoutes is a new component after each re-render)
85
- */
86
- const MemoizedRouting = memo(Routing);
87
- export { MemoizedRouting as Routing };
72
+ export { Routing };
@@ -4,8 +4,14 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
4
4
  import { Notifications } from "../../../shared/notifications/infrastructure/ui/views/Notifications";
5
5
  import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
6
6
  import { Navigation } from "./navigation/Navigation";
7
- const App = ({ customerId, menu, tabBar, children }) => (React.createElement(SafeAreaProvider, null,
8
- React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID }),
9
- React.createElement(Navigation, { customerId: customerId, menu: menu, tabBar: tabBar },
10
- React.createElement(PortalProvider, null, children))));
7
+ const a = true;
8
+ const App = ({ customerId, menu, tabBar, children }) => {
9
+ if (a) {
10
+ throw new Error("This is my first Sentry error");
11
+ }
12
+ return (React.createElement(SafeAreaProvider, null,
13
+ React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID }),
14
+ React.createElement(Navigation, { customerId: customerId, menu: menu, tabBar: tabBar },
15
+ React.createElement(PortalProvider, null, children))));
16
+ };
11
17
  export { App };
@@ -1,19 +1,15 @@
1
+ import "@sentry/tracing";
1
2
  import { ComponentType } from "react";
2
3
  import { Platform } from "react-native";
3
4
  interface SentryLoggerFunctionArgs {
4
5
  readonly publicKey: string;
5
- readonly environment: `${typeof Platform.OS}-${"DEV" | "PROD" | "EXPO"}`;
6
+ readonly environment: `${typeof Platform.OS}-${"DEV" | "PROD"}`;
6
7
  readonly release: string;
7
8
  readonly project: string;
8
9
  }
9
- interface SentryLoggerHOCProps {
10
- readonly customer: {
11
- readonly customerId: string;
12
- } | undefined;
13
- }
14
10
  interface SentryLoggerFunction {
15
- (args: SentryLoggerFunctionArgs): <P extends SentryLoggerHOCProps>(Component: ComponentType<P>) => ComponentType<P & JSX.IntrinsicAttributes>;
11
+ (args: SentryLoggerFunctionArgs): <P>(Component: ComponentType<P>) => ComponentType<P & JSX.IntrinsicAttributes>;
16
12
  }
17
13
  declare const sentryLogger: SentryLoggerFunction;
18
- export type { SentryLoggerFunctionArgs, SentryLoggerHOCProps };
14
+ export type { SentryLoggerFunctionArgs };
19
15
  export { sentryLogger };
@@ -1,113 +1,41 @@
1
- import { defaultStackParser } from "@sentry/browser";
2
1
  import { makeMain } from "@sentry/core";
2
+ import * as Sentry from "@sentry/react-native";
3
+ import "@sentry/tracing";
3
4
  import React, { useEffect } from "react";
4
5
  import { Platform } from "react-native";
5
- import { useRoutes as reactRouterUseRoutes } from "react-router-native";
6
- import { Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes, } from "./SentryDependencies";
7
- // This configuration is obtained from
8
- // https://docs.sentry.io/clients/javascript/tips/#decluttering-sentry
9
- const IGNORED_ERRORS = [
10
- // Random plugins/extensions
11
- "top.GLOBALS",
12
- // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
13
- "originalCreateNotification",
14
- "canvas.contentDocument",
15
- "MyApp_RemoveAllHighlights",
16
- "http://tt.epicplay.com",
17
- "Can't find variable: ZiteReader",
18
- "jigsaw is not defined",
19
- "ComboSearch is not defined",
20
- "http://loading.retry.widdit.com/",
21
- "atomicFindClose",
22
- // Facebook borked
23
- "fb_xd_fragment",
24
- // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to reduce this. (thanks @acdha)
25
- // See http://stackoverflow.com/questions/4113268/how-to-stop-javascript-injection-from-vodafone-proxy
26
- "bmi_SafeAddOnload",
27
- "EBCallBackMessageReceived",
28
- // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
29
- "conduitPage",
30
- // Generic error code from errors outside the security sandbox
31
- // You can delete this if using raven.js > 1.0, which ignores these automatically.
32
- "Script error.",
33
- // Avast extension error
34
- "_avast_submit",
35
- ];
36
- const DENIED_URLS = [
37
- // Google Adsense
38
- /pagead\/js/i,
39
- // Facebook flakiness
40
- /graph\.facebook\.com/i,
41
- // Facebook blocked
42
- /connect\.facebook\.net\/en_US\/all\.js/i,
43
- // Woopra flakiness
44
- /eatdifferent\.com\.woopra-ns\.com/i,
45
- /static\.woopra\.com\/js\/woopra\.js/i,
46
- // Chrome extensions
47
- /extensions\//i,
48
- /^chrome:\/\//i,
49
- // Other plugins
50
- /127\.0\.0\.1:4001\/isrunning/i,
51
- /webappstoolbarba\.texthelp\.com\//i,
52
- /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
53
- ];
54
6
  const sentryLogger = ({ publicKey, environment, release, project }) => {
55
- let globalHub;
56
- let currentHub;
57
- const initHub = () => {
58
- const client = new Client({
59
- environment,
60
- release,
61
- dsn: `https://${publicKey}@o179049.ingest.sentry.io/${project}`,
62
- integrations: integrations(),
63
- tracesSampleRate: 1.0,
64
- debug: true,
65
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
66
- // @ts-ignore
67
- enableNative: Platform.OS !== "web",
68
- autoInitializeNativeSdk: Platform.OS !== "web",
69
- stackParser: defaultStackParser,
70
- transport,
71
- ignoreErrors: IGNORED_ERRORS,
72
- denyUrls: DENIED_URLS,
73
- });
74
- return new Hub(client);
7
+ let mainHub;
8
+ /**
9
+ * TS complains about not providing 'transport' and 'stackParser' implementations
10
+ * although 'ReactNativeClient' defaults to its own implementation for those options.
11
+ */
12
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
13
+ // @ts-ignore
14
+ const client = new Sentry.ReactNativeClient({
15
+ environment,
16
+ release,
17
+ dsn: `https://${publicKey}@o179049.ingest.sentry.io/${project}`,
18
+ integrations: [new Sentry.ReactNativeTracing()],
19
+ tracesSampleRate: 1.0,
20
+ debug: true,
21
+ enableNative: Platform.OS !== "web",
22
+ });
23
+ const hub = new Sentry.Hub(client);
24
+ hub.bindClient(client);
25
+ const switchMainHub = () => {
26
+ mainHub = makeMain(hub);
75
27
  };
76
- const onMount = (customerId) => {
77
- if (!currentHub) {
78
- currentHub = initHub();
79
- currentHub.setUser({ id: customerId });
80
- currentHub.startSession();
81
- }
82
- if (!globalHub) {
83
- globalHub = makeMain(currentHub);
84
- }
28
+ const revertMainHub = () => {
29
+ makeMain(mainHub);
85
30
  };
86
- const onUnMount = () => {
87
- if (currentHub) {
88
- currentHub.setUser(null);
89
- currentHub.endSession();
90
- currentHub = null;
91
- }
92
- if (globalHub) {
93
- makeMain(globalHub);
94
- globalHub = null;
95
- }
96
- };
97
- const useRoutes = wrapUseRoutes(reactRouterUseRoutes);
98
31
  return (Component) => {
99
- const WrappedComponent = wrapComponent(Component);
100
- const SentryLogger = (props) => {
101
- const { customer } = props;
102
- useEffect(() => {
103
- onMount(customer?.customerId);
104
- return onUnMount;
105
- // eslint-disable-next-line react-hooks/exhaustive-deps
106
- }, []);
107
- return (React.createElement(ErrorBoundary, null,
108
- React.createElement(WrappedComponent, { ...props, useRoutes: useRoutes })));
32
+ switchMainHub();
33
+ const WrappedComponent = Sentry.wrap(Component);
34
+ // eslint-disable-next-line react/display-name
35
+ return (props) => {
36
+ useEffect(() => revertMainHub, []);
37
+ return React.createElement(WrappedComponent, { ...props });
109
38
  };
110
- return SentryLogger;
111
39
  };
112
40
  };
113
41
  export { sentryLogger };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lookiero/checkout",
3
- "version": "0.6.0-beta.39",
3
+ "version": "0.6.0-beta.4",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [
@@ -33,7 +33,6 @@
33
33
  "@lookiero/messaging": "^8.0.0",
34
34
  "@lookiero/messaging-react": "^8.0.0",
35
35
  "@react-spring/native": "^9.5.5",
36
- "@sentry/react-native": "^4.13.0",
37
36
  "inline-style-prefixer": "6.0.1",
38
37
  "react-native-safe-area-context": "^4.4.1",
39
38
  "react-native-svg": "^12.1.1",
@@ -48,6 +47,7 @@
48
47
  "@lookiero/event": "^0.3",
49
48
  "@lookiero/locale": "^0.3",
50
49
  "@lookiero/payments-front": "^0.16.5",
50
+ "@sentry/react-native": "^3.2.13",
51
51
  "apollo-boost": "0.4.4",
52
52
  "graphql": "16.6.0",
53
53
  "graphql-tag": "2.12.6",
@@ -80,6 +80,7 @@
80
80
  "@types/react-dom": "~18.0.0",
81
81
  "@types/react-native": "~0.69.1",
82
82
  "@types/uuid": "^9.0.0",
83
+ "@sentry/react-native": "^3.2.13",
83
84
  "apollo-boost": "0.4.4",
84
85
  "eslint": "^8.24.0",
85
86
  "eslint-config-prettier": "^8.5.0",
@@ -1,13 +0,0 @@
1
- import { matchRoutes as reactRouterMatchRoutes } from "@remix-run/router";
2
- import { BrowserClient, Hub } from "@sentry/browser";
3
- import { ErrorBoundary } from "@sentry/react";
4
- import { ReactNativeTransportOptions } from "@sentry/react-native/dist/js/options";
5
- import { Transport } from "@sentry/types";
6
- import { Integrations, WrapComponent, WrapUseRoutes } from "./types";
7
- declare const transport: (options: ReactNativeTransportOptions) => Transport;
8
- declare const matchRoutes: typeof reactRouterMatchRoutes;
9
- export { matchRoutes };
10
- declare const integrations: Integrations;
11
- declare const wrapComponent: WrapComponent;
12
- declare const wrapUseRoutes: WrapUseRoutes;
13
- export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };
@@ -1,18 +0,0 @@
1
- import { matchRoutes as reactRouterMatchRoutes } from "@remix-run/router";
2
- import { BrowserClient, Hub, makeFetchTransport, defaultIntegrations } from "@sentry/browser";
3
- import { ErrorBoundary } from "@sentry/react";
4
- import { reactRouterV6Instrumentation } from "@sentry/react";
5
- import { wrapUseRoutes as reactRouterV6WrapUseRoutes } from "@sentry/react";
6
- import { BrowserTracing } from "@sentry/tracing";
7
- import { useEffect } from "react";
8
- import { createRoutesFromChildren, useLocation, useNavigationType } from "react-router-native";
9
- import { stripFirstSlugFromLocation } from "./location";
10
- const transport = (options, nativeFetch) => makeFetchTransport(options, nativeFetch);
11
- // Remove the location's first path ("/checkout"). Otherwise it won't match the proper route.
12
- const matchRoutes = (routes, locationArg) => reactRouterMatchRoutes(routes, stripFirstSlugFromLocation(locationArg));
13
- export { matchRoutes };
14
- const routingInstrumentation = reactRouterV6Instrumentation(useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes);
15
- const integrations = () => [...defaultIntegrations, new BrowserTracing({ routingInstrumentation })];
16
- const wrapComponent = (Component) => Component;
17
- const wrapUseRoutes = reactRouterV6WrapUseRoutes;
18
- export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };
@@ -1,9 +0,0 @@
1
- import { ReactNativeClient, Hub, ErrorBoundary } from "@sentry/react-native";
2
- import { ReactNativeTransportOptions } from "@sentry/react-native/dist/js/options";
3
- import { Transport } from "@sentry/types";
4
- import { Integrations, WrapComponent, WrapUseRoutes } from "./types";
5
- declare const transport: (options: ReactNativeTransportOptions) => Transport;
6
- declare const integrations: Integrations;
7
- declare const wrapComponent: WrapComponent;
8
- declare const wrapUseRoutes: WrapUseRoutes;
9
- export { ReactNativeClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };
@@ -1,20 +0,0 @@
1
- import { makeFetchTransport } from "@sentry/browser";
2
- import { ReactNativeClient, Hub, ErrorBoundary, wrap as sentryWrap, ReactNativeTracing } from "@sentry/react-native";
3
- import { makeReactNativeTransport } from "@sentry/react-native/dist/js/transports/native";
4
- import { NATIVE } from "@sentry/react-native/dist/js/wrapper";
5
- import { useEffect } from "react";
6
- import { matchRoutes, useLocation } from "react-router-native";
7
- import { ReactRouterV6Instrumentation } from "./reactRouterV6Instrumentation/reactRouterV6Instrumentation.native";
8
- const transport = (options, nativeFetch) => {
9
- console.log("NATIVE.isNativeTransportAvailable()", NATIVE.isNativeTransportAvailable(), options, nativeFetch);
10
- console.log(makeReactNativeTransport(options));
11
- console.log(makeFetchTransport(options, nativeFetch));
12
- return NATIVE.isNativeTransportAvailable()
13
- ? makeReactNativeTransport(options)
14
- : makeFetchTransport(options, nativeFetch);
15
- };
16
- const routingInstrumentation = new ReactRouterV6Instrumentation(useEffect, useLocation, matchRoutes);
17
- const integrations = () => [new ReactNativeTracing({ routingInstrumentation })];
18
- const wrapComponent = (Component) => sentryWrap(Component);
19
- const wrapUseRoutes = routingInstrumentation.wrapUseRoutes.bind(routingInstrumentation);
20
- export { ReactNativeClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };
@@ -1,3 +0,0 @@
1
- import { Location } from "./types";
2
- declare const stripFirstSlugFromLocation: (locationArg: string | Location) => Location;
3
- export { stripFirstSlugFromLocation };
@@ -1,5 +0,0 @@
1
- // Remove the location's first path ("/checkout"). Otherwise it won't match the proper route.
2
- const stripFirstSlugFromLocation = (locationArg) => ({
3
- pathname: (typeof locationArg === "string" ? locationArg : locationArg?.pathname || "").replace(/^\/\w+/, ""),
4
- });
5
- export { stripFirstSlugFromLocation };
@@ -1,3 +0,0 @@
1
- import { matchRoutes as reactRouterMatchRoutes } from "@remix-run/router";
2
- declare const matchRoutes: typeof reactRouterMatchRoutes;
3
- export { matchRoutes };
@@ -1,7 +0,0 @@
1
- import { matchRoutes as reactRouterMatchRoutes } from "@remix-run/router";
2
- const matchRoutes = (routes, locationArg) => {
3
- // Remove the location's first path ("/checkout"). Otherwise it won't match the proper route.
4
- const location = (typeof locationArg === "string" ? locationArg : locationArg?.pathname || "").replace(/^\/\w+/, "");
5
- return reactRouterMatchRoutes(routes, location);
6
- };
7
- export { matchRoutes };
@@ -1,12 +0,0 @@
1
- import { RouteMatch, RouteObject } from "react-router-native";
2
- import { Location } from "../types";
3
- interface NormalizedNameAndMatchForLocationFunctionArgs {
4
- readonly routes: RouteObject[];
5
- readonly location: Location;
6
- readonly branches: RouteMatch[];
7
- }
8
- interface NormalizedNameAndMatchForLocationFunction {
9
- (args: NormalizedNameAndMatchForLocationFunctionArgs): [string, RouteMatch | null];
10
- }
11
- declare const normalizedNameAndMatchForLocation: NormalizedNameAndMatchForLocationFunction;
12
- export { normalizedNameAndMatchForLocation };
@@ -1,34 +0,0 @@
1
- import { getNumberOfUrlSegments } from "@sentry/utils";
2
- const normalizedNameAndMatchForLocation = ({ routes, location, branches, }) => {
3
- if (!routes || routes.length === 0) {
4
- return [location.pathname, null];
5
- }
6
- let pathBuilder = "";
7
- if (branches) {
8
- // eslint-disable-next-line @typescript-eslint/prefer-for-of
9
- for (let x = 0; x < branches.length; x++) {
10
- const branch = branches[x];
11
- const route = branch.route;
12
- if (route) {
13
- // Early return if index route
14
- if (route.index) {
15
- return [branch.pathname, branch];
16
- }
17
- const path = route.path;
18
- if (path) {
19
- const newPath = path[0] === "/" || pathBuilder[pathBuilder.length - 1] === "/" ? path : `/${path}`;
20
- pathBuilder += newPath;
21
- if (branch.pathname === location.pathname) {
22
- if (getNumberOfUrlSegments(pathBuilder) !== getNumberOfUrlSegments(branch.pathname) &&
23
- pathBuilder.slice(-2) !== "/*") {
24
- return [newPath, branch];
25
- }
26
- return [pathBuilder, branch];
27
- }
28
- }
29
- }
30
- }
31
- }
32
- return [location.pathname, null];
33
- };
34
- export { normalizedNameAndMatchForLocation };
@@ -1,29 +0,0 @@
1
- import { RoutingInstrumentation } from "@sentry/react-native";
2
- import { OnConfirmRoute, TransactionCreator } from "@sentry/react-native/dist/js/tracing/routingInstrumentation";
3
- import { BeforeNavigate } from "@sentry/react-native/dist/js/tracing/types";
4
- import { MatchRoutes, UseEffect, UseLocation, WrapUseRoutes } from "../types";
5
- /**
6
- * This instrumentation has been built taking as an example the actual
7
- * ReactNavigationV4Instrumentation implementation as suggested in the documentation.
8
- *
9
- * (https://docs.sentry.io/platforms/react-native/performance/instrumentation/automatic-instrumentation/#custom-instrumentation)
10
- * (https://github.com/getsentry/sentry-react-native/blob/211ec081b6bf8d7d29541afe9d800040f61e3c4e/src/js/tracing/reactnavigationv4.ts)
11
- */
12
- declare class ReactRouterV6Instrumentation extends RoutingInstrumentation {
13
- static instrumentationName: string;
14
- private useEffect;
15
- private useLocation;
16
- private matchRoutes;
17
- private prevRoute?;
18
- private recentRouteKeys;
19
- private latestTransaction?;
20
- private readonly maxRecentRouteLen;
21
- constructor(useEffect: UseEffect, useLocation: UseLocation, matchRoutes: MatchRoutes);
22
- registerRoutingInstrumentation(listener: TransactionCreator, beforeNavigate: BeforeNavigate, onConfirmRoute: OnConfirmRoute): void;
23
- private onRouteChange;
24
- private currentRouteFromLocation;
25
- private pushRecentRouteKey;
26
- private onBeforeNavigateNotSampled;
27
- wrapUseRoutes: WrapUseRoutes;
28
- }
29
- export { ReactRouterV6Instrumentation };
@@ -1,134 +0,0 @@
1
- /* eslint-disable @typescript-eslint/ban-ts-comment */
2
- import { RoutingInstrumentation } from "@sentry/react-native";
3
- import { logger } from "@sentry/utils";
4
- import React from "react";
5
- import { stripFirstSlugFromLocation } from "../location";
6
- import { normalizedNameAndMatchForLocation } from "./normalizedNameAndMatchForLocation";
7
- import { transactionContext } from "./transactionContext";
8
- /**
9
- * This instrumentation has been built taking as an example the actual
10
- * ReactNavigationV4Instrumentation implementation as suggested in the documentation.
11
- *
12
- * (https://docs.sentry.io/platforms/react-native/performance/instrumentation/automatic-instrumentation/#custom-instrumentation)
13
- * (https://github.com/getsentry/sentry-react-native/blob/211ec081b6bf8d7d29541afe9d800040f61e3c4e/src/js/tracing/reactnavigationv4.ts)
14
- */
15
- class ReactRouterV6Instrumentation extends RoutingInstrumentation {
16
- static instrumentationName = "react-router-v6";
17
- useEffect;
18
- useLocation;
19
- matchRoutes;
20
- prevRoute;
21
- recentRouteKeys = [];
22
- latestTransaction;
23
- maxRecentRouteLen = 200;
24
- constructor(useEffect, useLocation, matchRoutes) {
25
- super();
26
- this.useEffect = useEffect;
27
- this.useLocation = useLocation;
28
- this.matchRoutes = matchRoutes;
29
- }
30
- registerRoutingInstrumentation(listener, beforeNavigate, onConfirmRoute) {
31
- super.registerRoutingInstrumentation(listener, beforeNavigate, onConfirmRoute);
32
- this.latestTransaction = this.onRouteWillChange(INITIAL_TRANSACTION_CONTEXT);
33
- }
34
- onRouteChange(location, routes, updateLatestTransaction = false) {
35
- const currentRoute = this.currentRouteFromLocation(location, routes);
36
- if (!currentRoute || (this.prevRoute && currentRoute.key === this.prevRoute.key)) {
37
- return;
38
- }
39
- const originalContext = transactionContext({
40
- instrumentationName: ReactRouterV6Instrumentation.instrumentationName,
41
- route: currentRoute,
42
- previousRoute: this.prevRoute,
43
- });
44
- let finalContext = this._beforeNavigate?.(originalContext);
45
- if (!finalContext) {
46
- logger.error(`[ReactRouterV6Instrumentation] beforeNavigate returned ${finalContext}, return context.sampled = false to not send transaction.`);
47
- finalContext = { ...originalContext, sampled: false };
48
- }
49
- if (finalContext.sampled === false) {
50
- this.onBeforeNavigateNotSampled(finalContext.name);
51
- }
52
- if (updateLatestTransaction && this.latestTransaction) {
53
- this.latestTransaction.updateWithContext(finalContext);
54
- }
55
- else {
56
- this.latestTransaction = this.onRouteWillChange(finalContext);
57
- }
58
- this.pushRecentRouteKey(currentRoute.key);
59
- this.prevRoute = currentRoute;
60
- }
61
- currentRouteFromLocation(location, routes) {
62
- const normalizedLocation = stripFirstSlugFromLocation(location);
63
- const branches = this.matchRoutes(routes, normalizedLocation);
64
- if (!branches) {
65
- return null;
66
- }
67
- const [normalizedName, match] = normalizedNameAndMatchForLocation({
68
- location: normalizedLocation,
69
- routes,
70
- branches,
71
- });
72
- if (!match) {
73
- return {
74
- name: normalizedName,
75
- key: normalizedName,
76
- params: {},
77
- hasBeenSeen: this.recentRouteKeys.includes(normalizedName),
78
- };
79
- }
80
- return {
81
- name: match.route.path,
82
- key: normalizedName,
83
- params: match.params,
84
- hasBeenSeen: this.recentRouteKeys.includes(normalizedName),
85
- };
86
- }
87
- pushRecentRouteKey(key) {
88
- this.recentRouteKeys.push(key);
89
- if (this.recentRouteKeys.length > this.maxRecentRouteLen) {
90
- this.recentRouteKeys = this.recentRouteKeys.slice(this.recentRouteKeys.length - this.maxRecentRouteLen);
91
- }
92
- }
93
- onBeforeNavigateNotSampled(transactionName) {
94
- logger.log(`[ReactRouterV6Instrumentation] Will not send transaction "${transactionName}" due to beforeNavigate.`);
95
- }
96
- wrapUseRoutes = (origUseRoutes) => {
97
- if (!this.useEffect || !this.useLocation || !this.matchRoutes) {
98
- __DEBUG_BUILD__ &&
99
- logger.warn("ReactRouterV6Instrumentation was unable to wrap `useRoutes` because of one or more missing parameters.");
100
- return origUseRoutes;
101
- }
102
- let isMountRenderPass = true;
103
- const useRoutes = (routes, locationArg) => {
104
- const SentryRoutes = () => {
105
- const Routes = origUseRoutes(routes, locationArg);
106
- const location = this.useLocation();
107
- const stableLocationParam = typeof locationArg === "string" || (locationArg && locationArg.pathname)
108
- ? locationArg
109
- : location;
110
- this.useEffect(() => {
111
- const normalizedLocation = typeof stableLocationParam === "string" ? { pathname: stableLocationParam } : stableLocationParam;
112
- if (isMountRenderPass) {
113
- this.onRouteChange(normalizedLocation, routes, true);
114
- isMountRenderPass = false;
115
- }
116
- else {
117
- this.onRouteChange(normalizedLocation, routes);
118
- }
119
- }, [stableLocationParam]);
120
- return Routes;
121
- };
122
- return React.createElement(SentryRoutes, null);
123
- };
124
- return useRoutes;
125
- };
126
- }
127
- const INITIAL_TRANSACTION_CONTEXT = {
128
- name: "App Launch",
129
- op: "navigation",
130
- tags: {
131
- ["routing.instrumentation"]: ReactRouterV6Instrumentation.instrumentationName,
132
- },
133
- };
134
- export { ReactRouterV6Instrumentation };
@@ -1,22 +0,0 @@
1
- import { TransactionContext } from "@sentry/types";
2
- import { NavigationCurrentRoute, NavigationRoute } from "./types";
3
- interface NavigationTransactionContext extends TransactionContext {
4
- readonly tags: {
5
- readonly ["routing.instrumentation"]: string;
6
- readonly ["routing.route.name"]: string;
7
- };
8
- readonly data: {
9
- readonly route: NavigationCurrentRoute;
10
- readonly previousRoute: NavigationRoute | null;
11
- };
12
- }
13
- interface TransactionContextFunctionArgs {
14
- readonly instrumentationName: string;
15
- readonly route: NavigationCurrentRoute;
16
- readonly previousRoute?: NavigationRoute;
17
- }
18
- interface TransactionContextFunction {
19
- (args: TransactionContextFunctionArgs): NavigationTransactionContext;
20
- }
21
- declare const transactionContext: TransactionContextFunction;
22
- export { transactionContext };
@@ -1,15 +0,0 @@
1
- const transactionContext = ({ instrumentationName, route, previousRoute = null, }) => {
2
- return {
3
- name: route.name,
4
- op: "navigation",
5
- tags: {
6
- ["routing.instrumentation"]: instrumentationName,
7
- ["routing.route.name"]: route.name,
8
- },
9
- data: {
10
- route,
11
- previousRoute,
12
- },
13
- };
14
- };
15
- export { transactionContext };
@@ -1,9 +0,0 @@
1
- interface NavigationRoute {
2
- readonly name: string;
3
- readonly key: string;
4
- readonly params: Record<string, unknown>;
5
- }
6
- interface NavigationCurrentRoute extends NavigationRoute {
7
- readonly hasBeenSeen: boolean;
8
- }
9
- export type { NavigationRoute, NavigationCurrentRoute };
@@ -1,27 +0,0 @@
1
- import { RoutingInstrumentation } from "@sentry/react-native";
2
- import { OnConfirmRoute, TransactionCreator } from "@sentry/react-native/dist/js/tracing/routingInstrumentation";
3
- import { BeforeNavigate } from "@sentry/react-native/dist/js/tracing/types";
4
- import { MatchRoutes, UseEffect, UseLocation, UseNavigationType, WrapUseRoutes } from "./types";
5
- declare class ReactRouterV6Instrumentation extends RoutingInstrumentation {
6
- static instrumentationName: string;
7
- private useEffect;
8
- private useLocation;
9
- private useNavigationType;
10
- private matchRoutes;
11
- private prevRoute?;
12
- private recentRouteKeys;
13
- private latestTransaction?;
14
- private shouldUpdateLatestTransaction;
15
- constructor(useEffect: UseEffect, useLocation: UseLocation, useNavigationType: UseNavigationType, matchRoutes: MatchRoutes);
16
- /**
17
- * Extends by calling _handleInitialState at the end.
18
- */
19
- registerRoutingInstrumentation(listener: TransactionCreator, beforeNavigate: BeforeNavigate, onConfirmRoute: OnConfirmRoute): void;
20
- /**
21
- * Starts an idle transaction for the initial state which won't get called by the router listener.
22
- */
23
- private handleInitialState;
24
- private getTransactionContext;
25
- wrapUseRoutes: WrapUseRoutes;
26
- }
27
- export { ReactRouterV6Instrumentation };
@@ -1,115 +0,0 @@
1
- /* eslint-disable @typescript-eslint/ban-ts-comment */
2
- import { RoutingInstrumentation } from "@sentry/react-native";
3
- import { logger } from "@sentry/utils";
4
- import React from "react";
5
- class ReactRouterV6Instrumentation extends RoutingInstrumentation {
6
- static instrumentationName = "react-router-v6";
7
- useEffect;
8
- useLocation;
9
- useNavigationType;
10
- matchRoutes;
11
- // @ts-ignore
12
- prevRoute;
13
- recentRouteKeys = [];
14
- // @ts-ignore
15
- latestTransaction;
16
- // @ts-ignore
17
- shouldUpdateLatestTransaction = false;
18
- constructor(useEffect, useLocation, useNavigationType, matchRoutes) {
19
- super();
20
- this.useEffect = useEffect;
21
- this.useLocation = useLocation;
22
- this.useNavigationType = useNavigationType;
23
- this.matchRoutes = matchRoutes;
24
- }
25
- /**
26
- * Extends by calling _handleInitialState at the end.
27
- */
28
- registerRoutingInstrumentation(listener, beforeNavigate, onConfirmRoute) {
29
- super.registerRoutingInstrumentation(listener, beforeNavigate, onConfirmRoute);
30
- // Need to handle the initial state as the router patch will only attach transactions on subsequent route changes.
31
- this.handleInitialState();
32
- }
33
- /**
34
- * Starts an idle transaction for the initial state which won't get called by the router listener.
35
- */
36
- handleInitialState() {
37
- this.latestTransaction = this.onRouteWillChange(INITIAL_TRANSACTION_CONTEXT);
38
- // We set this to true so when registerAppContainer is called, the transaction gets updated with the actual route data
39
- this.shouldUpdateLatestTransaction = true;
40
- }
41
- // @ts-ignore
42
- getTransactionContext(route, previousRoute) {
43
- return {
44
- name: route.name,
45
- op: "navigation",
46
- tags: {
47
- ["routing.instrumentation"]: ReactRouterV6Instrumentation.instrumentationName,
48
- ["routing.route.name"]: route.name,
49
- },
50
- data: {
51
- route: {
52
- name: route.name,
53
- key: route.key,
54
- params: route.params ?? {},
55
- hasBeenSeen: this.recentRouteKeys.includes(route.key),
56
- },
57
- previousRoute: previousRoute
58
- ? {
59
- name: previousRoute.name,
60
- key: previousRoute.key,
61
- params: previousRoute.params ?? {},
62
- }
63
- : null,
64
- },
65
- };
66
- }
67
- wrapUseRoutes = (origUseRoutes) => {
68
- if (!this.useEffect ||
69
- !this.useLocation ||
70
- !this.useNavigationType ||
71
- !this.matchRoutes
72
- // !this._customStartTransaction
73
- ) {
74
- __DEBUG_BUILD__ &&
75
- logger.warn("reactRouterV6Instrumentation was unable to wrap `useRoutes` because of one or more missing parameters.");
76
- return origUseRoutes;
77
- }
78
- let isMountRenderPass = true;
79
- // eslint-disable-next-line react/display-name
80
- return (routes, locationArg) => {
81
- const SentryRoutes = () => {
82
- const Routes = origUseRoutes(routes, locationArg);
83
- const location = this.useLocation();
84
- const navigationType = this.useNavigationType();
85
- // A value with stable identity to either pick `locationArg` if available or `location` if not
86
- const stableLocationParam = typeof locationArg === "string" || (locationArg && locationArg.pathname)
87
- ? locationArg
88
- : location;
89
- this.useEffect(() => {
90
- const normalizedLocation = typeof stableLocationParam === "string" ? { pathname: stableLocationParam } : stableLocationParam;
91
- if (isMountRenderPass) {
92
- console.log("updatePageloadTransaction", normalizedLocation, routes);
93
- // updatePageloadTransaction(normalizedLocation, routes);
94
- isMountRenderPass = false;
95
- }
96
- else {
97
- console.log("normalizedLocation", normalizedLocation, routes, navigationType);
98
- // handleNavigation(normalizedLocation, routes, navigationType);
99
- }
100
- }, [navigationType, stableLocationParam]);
101
- return Routes;
102
- };
103
- return React.createElement(SentryRoutes, null);
104
- };
105
- };
106
- }
107
- const INITIAL_TRANSACTION_CONTEXT = {
108
- name: "App Launch",
109
- op: "navigation",
110
- tags: {
111
- ["routing.instrumentation"]: ReactRouterV6Instrumentation.instrumentationName,
112
- },
113
- data: {},
114
- };
115
- export { ReactRouterV6Instrumentation };
@@ -1,20 +0,0 @@
1
- import { Integration } from "@sentry/types";
2
- import { ComponentType, useEffect } from "react";
3
- import { matchRoutes, RouteObject, useLocation } from "react-router-native";
4
- interface Location {
5
- readonly pathname: string;
6
- }
7
- type UseEffect = typeof useEffect;
8
- type UseLocation = typeof useLocation;
9
- type MatchRoutes = typeof matchRoutes;
10
- type UseRoutes = (routes: RouteObject[], locationArg?: Partial<Location> | string) => React.ReactElement | null;
11
- interface WrapUseRoutes {
12
- (useRoutes: UseRoutes): UseRoutes;
13
- }
14
- interface WrapComponent {
15
- <P>(Component: ComponentType<P>): ComponentType<P>;
16
- }
17
- interface Integrations {
18
- (): Integration[];
19
- }
20
- export type { Location, Integrations, UseEffect, UseLocation, MatchRoutes, UseRoutes, WrapUseRoutes, WrapComponent };
@@ -1 +0,0 @@
1
- export {};