@lookiero/checkout 0.6.4 → 0.7.1

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import { EndpointFunction } from "@lookiero/i18n";
-import { FC } from "react";
+import { ComponentType } from "react";
 import { CheckoutStatus } from "./domain/checkout/model/checkout";
 import { RootProps } from "./infrastructure/ui/Root";
 import { CheckoutProjection } from "./projection/checkout/checkout";
 import { IsCheckoutAccessibleByCustomerIdProjection } from "./projection/checkout/viewIsCheckoutAccessibleByCustomerId";
+import { SentryLoggerFunctionArgs } from "./shared/logging/SentryLogger";
 interface IsCheckoutAccessibleFunctionArgs {
     readonly customerId: string | undefined;
 }
@@ -20,9 +21,10 @@ interface BootstrapFunctionArgs {
     readonly getAuthToken: () => Promise<string>;
     readonly apiUrl: string;
     readonly translations: EndpointFunction;
+    readonly sentry: SentryLoggerFunctionArgs;
 }
 interface BootstrapFunctionReturn {
-    readonly Root: FC<RootProps>;
+    readonly Root: ComponentType<RootProps>;
     readonly isCheckoutAccessible: IsCheckoutAccessibleFunction;
     readonly firstAvailableCheckoutByCustomerId: FirstAvailableCheckoutByCustomerIdFunction;
 }

package/dist/index.js

@@ -5,13 +5,13 @@ import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootst
 import { root } from "./infrastructure/ui/Root";
 import { viewFirstAvailableCheckoutByCustomerId } from "./projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { viewIsCheckoutAccessibleByCustomerId, } from "./projection/checkout/viewIsCheckoutAccessibleByCustomerId";
-const bootstrap = ({ apiUrl, getAuthToken, translations }) => {
+const bootstrap = ({ apiUrl, getAuthToken, translations, sentry }) => {
     const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken });
     const I18n = i18n({
         fetchTranslation: fetchFetchTranslation({ endpoint: translations }),
         contextId: "CheckoutI18n",
     });
-    const Root = root({ Messaging, I18n, getAuthToken });
+    const Root = root({ Messaging, I18n, getAuthToken, sentry });
     const isCheckoutAccessible = ({ customerId }) => queryBus(viewIsCheckoutAccessibleByCustomerId({ customerId }));
     const firstAvailableCheckoutByCustomerId = ({ customerId }) => queryBus(viewFirstAvailableCheckoutByCustomerId({ customerId: customerId }));
     return {

package/dist/infrastructure/ui/Root.d.ts

@@ -1,16 +1,19 @@
 import { I18n } from "@lookiero/i18n-react";
 import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
-import { FC } from "react";
+import { ComponentType } from "react";
+import { useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { Customer } from "../../projection/shared/customer";
+import { SentryLoggerFunctionArgs } from "../../shared/logging/SentryLogger";
 import { Menu, TabBar } from "./views/navigation/Navigation";
 interface RootFunctionArgs {
     readonly Messaging: MessagingRoot;
     readonly I18n: I18n;
     readonly development?: boolean;
+    readonly sentry: SentryLoggerFunctionArgs;
     readonly getAuthToken: () => Promise<string>;
 }
 interface RootFunction {
-    (args: RootFunctionArgs): FC<RootProps>;
+    (args: RootFunctionArgs): ComponentType<RootProps>;
 }
 interface RootProps {
     readonly basePath: string;
@@ -20,6 +23,7 @@ interface RootProps {
     readonly tabBar: TabBar;
     readonly onNotAccessible: () => void;
     readonly useRedirect: () => Record<string, string>;
+    readonly useRoutes?: typeof reactRouterUseRoutes;
 }
 declare const root: RootFunction;
 export type { RootProps };

package/dist/infrastructure/ui/Root.js

@@ -1,11 +1,15 @@
 import React, { useCallback } from "react";
 import { Platform } from "react-native";
+import { useRoutes as reactRouterUseRoutes } from "react-router-native";
+import { sentryLogger } from "../../shared/logging/SentryLogger";
 import { Routing } from "./routing/Routing";
-const root = ({ Messaging, I18n, getAuthToken, development }) => 
-// eslint-disable-next-line react/display-name, react/prop-types
-({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect }) => {
-    const handleOnI18nError = useCallback(() => void 0, []);
-    return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
-        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 })));
+const root = ({ Messaging, I18n, getAuthToken, development, sentry }) => {
+    // eslint-disable-next-line react/display-name, react/prop-types
+    const Root = ({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+        const handleOnI18nError = useCallback(() => void 0, []);
+        return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
+            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 })));
+    };
+    return sentryLogger(sentry)(Root);
 };
 export { root };

package/dist/infrastructure/ui/i18n/i18n.d.ts

@@ -1,12 +1,5 @@
 declare const COLOR_I18N_PREFIX = "color.";
 declare enum I18nMessages {
-    INTRO_TITLE = "intro.title",
-    INTRO_SUBTITLE = "intro.subtitle",
-    INTRO_DISCOUNT = "intro.discount",
-    INTRO_BULLET_ONE = "intro.bullet_one",
-    INTRO_BULLET_TWO = "intro.bullet_two",
-    INTRO_BULLET_THREE = "intro.bullet_three",
-    INTRO_BUTTON = "intro.button",
     ITEM_SIZE = "item.size",
     ITEM_COLOR = "item.color",
     ITEM_UNIQUE = "item.unique",

package/dist/infrastructure/ui/i18n/i18n.js

@@ -1,13 +1,6 @@
 const COLOR_I18N_PREFIX = "color.";
 var I18nMessages;
 (function (I18nMessages) {
-    I18nMessages["INTRO_TITLE"] = "intro.title";
-    I18nMessages["INTRO_SUBTITLE"] = "intro.subtitle";
-    I18nMessages["INTRO_DISCOUNT"] = "intro.discount";
-    I18nMessages["INTRO_BULLET_ONE"] = "intro.bullet_one";
-    I18nMessages["INTRO_BULLET_TWO"] = "intro.bullet_two";
-    I18nMessages["INTRO_BULLET_THREE"] = "intro.bullet_three";
-    I18nMessages["INTRO_BUTTON"] = "intro.button";
     I18nMessages["ITEM_SIZE"] = "item.size";
     I18nMessages["ITEM_COLOR"] = "item.color";
     I18nMessages["ITEM_UNIQUE"] = "item.unique";

package/dist/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.js

@@ -11,7 +11,7 @@ const CheckoutAccessibilityMiddleware = ({ customerId, onNotAccessible, loader =
         if (notAccessible) {
             onNotAccessibleRef.current();
         }
-    }, [notAccessible, onNotAccessible]);
+    }, [notAccessible]);
     return accessible === undefined && [QueryStatus.IDLE, QueryStatus.LOADING].includes(status)
         ? loader
         : accessible

package/dist/infrastructure/ui/routing/CheckoutMiddleware.js

@@ -6,13 +6,10 @@ import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutI
 import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
 import { useStartCheckout } from "../../domain/checkout/react/useStartCheckout";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
-import { useShouldIntroBeShown } from "../../projection/uiSetting/react/useShouldIntroBeShown";
 import { Routes } from "./routes";
 import { useBasePath } from "./useBasePath";
 const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner, null), children }) => {
     const basePath = useBasePath();
-    const introShown = useRef(false);
-    const [shouldIntroBeShown, shouldIntroBeShownStatus] = useShouldIntroBeShown();
     const navigatedToFirstItemWithoutCustomerDecision = useRef(false);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const firstItemWithoutCustomerDecision = checkout?.items.find((item) => item.status === CheckoutItemStatus.INITIAL);
@@ -22,7 +19,6 @@ const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner,
             startCheckout();
         }
     }, [checkout?.id, startCheckout]);
-    const introRouteMatch = useMatch(`${basePath}/${Routes.INTRO}`);
     const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
     const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
     const summaryRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}`);
@@ -32,8 +28,7 @@ const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner,
     const checkoutShown = useRef(false);
     checkoutShown.current = checkoutShown.current || (Boolean(checkoutRouteMatch) && !Boolean(checkoutPaymentRouteMatch));
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
-    const dependenciesLoaded = dependenciesLoadedStatuses.includes(shouldIntroBeShownStatus) &&
-        (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout);
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) || checkout;
     if (!dependenciesLoaded) {
         return loader;
     }
@@ -54,31 +49,20 @@ const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner,
         !(summaryRouteMatch || itemDetailRouteMatch || checkoutRouteMatch || checkoutPaymentRouteMatch)) {
         return React.createElement(Navigate, { to: `${basePath}/${Routes.SUMMARY}`, replace: true });
     }
-    /* Navigate to the Intro if required */
-    if (shouldIntroBeShown && !introShown.current && firstItemWithoutCustomerDecision !== undefined) {
-        if (introRouteMatch) {
-            introShown.current = true;
-        }
-        else {
-            return React.createElement(Navigate, { to: `${basePath}/${Routes.INTRO}`, replace: true });
+    /* Item/ItemDetail 404 - Not found */
+    if (itemRouteMatch || itemDetailRouteMatch) {
+        const checkoutItem = checkout?.items.find((item) => item.id === itemRouteMatch?.params.id || itemDetailRouteMatch?.params.id);
+        if (!checkoutItem) {
+            return React.createElement(Navigate, { to: `${basePath}/${Routes.HOME}`, replace: true });
         }
     }
-    else {
-        /* Item/ItemDetail 404 - Not found */
-        if (itemRouteMatch || itemDetailRouteMatch) {
-            const checkoutItem = checkout?.items.find((item) => item.id === itemRouteMatch?.params.id || itemDetailRouteMatch?.params.id);
-            if (!checkoutItem) {
-                return React.createElement(Navigate, { to: `${basePath}/${Routes.HOME}`, replace: true });
-            }
-        }
-        /* Navigate to the first item without customer's decission */
-        navigatedToFirstItemWithoutCustomerDecision.current =
-            navigatedToFirstItemWithoutCustomerDecision.current ||
-                Boolean(itemRouteMatch && itemRouteMatch.params.id === firstItemWithoutCustomerDecision?.id);
-        if (firstItemWithoutCustomerDecision && !navigatedToFirstItemWithoutCustomerDecision.current) {
-            navigatedToFirstItemWithoutCustomerDecision.current = true;
-            return (React.createElement(Navigate, { to: generatePath(`${basePath}/${Routes.ITEM}`, { id: firstItemWithoutCustomerDecision.id }), replace: true }));
-        }
+    /* Navigate to the first item without customer's decission */
+    navigatedToFirstItemWithoutCustomerDecision.current =
+        navigatedToFirstItemWithoutCustomerDecision.current ||
+            Boolean(itemRouteMatch && itemRouteMatch.params.id === firstItemWithoutCustomerDecision?.id);
+    if (firstItemWithoutCustomerDecision && !navigatedToFirstItemWithoutCustomerDecision.current) {
+        navigatedToFirstItemWithoutCustomerDecision.current = true;
+        return (React.createElement(Navigate, { to: generatePath(`${basePath}/${Routes.ITEM}`, { id: firstItemWithoutCustomerDecision.id }), replace: true }));
     }
     return children;
 };

package/dist/infrastructure/ui/routing/Routing.d.ts

@@ -1,5 +1,6 @@
 import { I18n } from "@lookiero/i18n-react";
-import { FC } from "react";
+import React from "react";
+import { useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { Customer } from "../../../projection/shared/customer";
 import { Menu, TabBar } from "../views/navigation/Navigation";
 interface RoutingProps {
@@ -13,6 +14,13 @@ interface RoutingProps {
     readonly onNotAccessible: () => void;
     readonly onI18nError?: (err: Error) => void;
     readonly useRedirect: () => Record<string, string>;
+    readonly useRoutes: typeof reactRouterUseRoutes;
 }
-declare const Routing: FC<RoutingProps>;
-export { Routing };
+/**
+ * Provided useRoutes is not stable (when integrated with Sentry) as it's rendering a different component tree.
+ *
+ * https://github.com/getsentry/sentry-javascript/blob/master/packages/react/src/reactrouterv6.tsx#L221
+ * (SentryRoutes is a new component after each re-render)
+ */
+declare const MemoizedRouting: React.NamedExoticComponent<RoutingProps>;
+export { MemoizedRouting as Routing };

package/dist/infrastructure/ui/routing/Routing.js

@@ -1,5 +1,5 @@
-import React, { lazy, Suspense } from "react";
-import { Navigate, Outlet, useRoutes } from "react-router-native";
+import React, { lazy, memo, Suspense } from "react";
+import { Navigate, Outlet, useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
 import { App } from "../views/App";
 import { CheckoutPaymentModal } from "../views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal";
@@ -7,14 +7,13 @@ import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddlewa
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
 import { Routes } from "./routes";
 import { BasePathProvider } from "./useBasePath";
-const Intro = lazy(() => import("../views/intro/Intro").then((module) => ({ default: module.Intro })));
 const Item = lazy(() => import("../views/item/Item").then((module) => ({ default: module.Item })));
 const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
 const Checkout = lazy(() => import("../views/checkout/Checkout").then((module) => ({ default: module.Checkout })));
 const Feedback = lazy(() => import("../views/feedback/Feedback").then((module) => ({ default: module.Feedback })));
 const NotFound = lazy(() => import("../views/notFound/NotFound").then((module) => ({ default: module.NotFound })));
-const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, }) => {
-    const routes = useRoutes([
+const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+    return useRoutes([
         {
             path: "",
             element: (React.createElement(BasePathProvider, { basePath: basePath },
@@ -24,11 +23,6 @@ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthT
                             React.createElement(App, { customerId: customer?.customerId, menu: menu, tabBar: tabBar },
                                 React.createElement(Outlet, null))))))),
             children: [
-                {
-                    path: Routes.INTRO,
-                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Intro, { customerId: customer?.customerId }))),
-                },
                 {
                     path: Routes.ITEM,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
@@ -73,6 +67,12 @@ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthT
             ],
         },
     ]);
-    return routes;
 };
-export { Routing };
+/**
+ * Provided useRoutes is not stable (when integrated with Sentry) as it's rendering a different component tree.
+ *
+ * https://github.com/getsentry/sentry-javascript/blob/master/packages/react/src/reactrouterv6.tsx#L221
+ * (SentryRoutes is a new component after each re-render)
+ */
+const MemoizedRouting = memo(Routing);
+export { MemoizedRouting as Routing };

package/dist/infrastructure/ui/routing/routes.d.ts

@@ -1,6 +1,5 @@
 export declare enum Routes {
     HOME = "",
-    INTRO = "intro",
     ITEM_DETAIL = "item/:id/detail",
     ITEM = "item/:id",
     SUMMARY = "summary",

package/dist/infrastructure/ui/routing/routes.js

@@ -1,7 +1,6 @@
 export var Routes;
 (function (Routes) {
     Routes["HOME"] = "";
-    Routes["INTRO"] = "intro";
     Routes["ITEM_DETAIL"] = "item/:id/detail";
     Routes["ITEM"] = "item/:id";
     Routes["SUMMARY"] = "summary";

package/dist/infrastructure/ui/settings/UISettings.d.ts

@@ -1,4 +1,3 @@
 declare enum UISettings {
-    INTRO_SHOWN_COUNT = "INTRO_SHOWN_COUNT"
 }
 export { UISettings };

package/dist/infrastructure/ui/settings/UISettings.js

@@ -1,5 +1,4 @@
 var UISettings;
 (function (UISettings) {
-    UISettings["INTRO_SHOWN_COUNT"] = "INTRO_SHOWN_COUNT";
 })(UISettings || (UISettings = {}));
 export { UISettings };

package/dist/shared/logging/SentryDependencies.d.ts

@@ -0,0 +1,11 @@
+import { BrowserClient, Hub } from "@sentry/browser";
+import { FetchImpl } from "@sentry/browser/types/transports/utils";
+import { ErrorBoundary } from "@sentry/react";
+import { ReactNativeTransportOptions } from "@sentry/react-native/dist/js/options";
+import { Transport } from "@sentry/types";
+import { wrapUseRoutes } from "./reactRouterV6Instrumentation/reactRouterV6Instrumentation";
+import { Integrations, WrapComponent } from "./types";
+declare const transport: (options: ReactNativeTransportOptions, nativeFetch?: FetchImpl) => Transport;
+declare const integrations: Integrations;
+declare const wrapComponent: WrapComponent;
+export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };

package/dist/shared/logging/SentryDependencies.js

@@ -0,0 +1,17 @@
+import { BrowserClient, Hub, makeFetchTransport, defaultIntegrations } from "@sentry/browser";
+import { ErrorBoundary } from "@sentry/react";
+import { BrowserTracing } from "@sentry/tracing";
+import { useEffect } from "react";
+import { useLocation, useNavigationType, matchRoutes } from "react-router-native";
+import { reactRouterV6Instrumentation, wrapUseRoutes, } from "./reactRouterV6Instrumentation/reactRouterV6Instrumentation";
+const transport = (options, nativeFetch) => makeFetchTransport(options, nativeFetch);
+/**
+ * BrowserTracing must be initialized before the BrowserClient
+ * so we instantiate it before the integrations function is called
+ */
+const browserTracing = new BrowserTracing({
+    routingInstrumentation: reactRouterV6Instrumentation({ useEffect, useLocation, useNavigationType, matchRoutes }),
+});
+const integrations = () => [...defaultIntegrations, browserTracing];
+const wrapComponent = (Component) => Component;
+export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };

package/dist/shared/logging/SentryDependencies.native.d.ts

@@ -0,0 +1,10 @@
+import { FetchImpl } from "@sentry/browser/types/transports/utils";
+import { ReactNativeClient, Hub, ErrorBoundary } from "@sentry/react-native";
+import { ReactNativeTransportOptions } from "@sentry/react-native/dist/js/options";
+import { Transport } from "@sentry/types";
+import { Integrations, WrapComponent, WrapUseRoutes } from "./types";
+declare const transport: (options: ReactNativeTransportOptions, nativeFetch?: FetchImpl) => Transport;
+declare const integrations: Integrations;
+declare const wrapComponent: WrapComponent;
+declare const wrapUseRoutes: WrapUseRoutes;
+export { ReactNativeClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };

package/dist/shared/logging/SentryDependencies.native.js

@@ -0,0 +1,15 @@
+import { makeFetchTransport } from "@sentry/browser";
+import { ReactNativeClient, Hub, ErrorBoundary, wrap as sentryWrap, ReactNativeTracing } from "@sentry/react-native";
+import { makeReactNativeTransport } from "@sentry/react-native/dist/js/transports/native";
+import { NATIVE } from "@sentry/react-native/dist/js/wrapper";
+import { useEffect } from "react";
+import { matchRoutes, useLocation } from "react-router-native";
+import { NativeReactRouterV6Instrumentation } from "./reactRouterV6Instrumentation/NativeReactRouterV6Instrumentation";
+const transport = (options, nativeFetch) => NATIVE.isNativeTransportAvailable() ? makeReactNativeTransport(options) : makeFetchTransport(options, nativeFetch);
+const routingInstrumentation = new NativeReactRouterV6Instrumentation({ useEffect, useLocation, matchRoutes });
+// ReactNativeTracing's instantiation must be delayed so we wrap it in a function
+// that's going to be called when the Client is instantiated
+const integrations = () => [new ReactNativeTracing({ routingInstrumentation })];
+const wrapComponent = (Component) => sentryWrap(Component);
+const wrapUseRoutes = routingInstrumentation.wrapUseRoutes.bind(routingInstrumentation);
+export { ReactNativeClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };

package/dist/shared/logging/SentryLogger.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType } from "react";
+import { Platform } from "react-native";
+interface SentryLoggerFunctionArgs {
+    readonly publicKey: string;
+    readonly environment: `${typeof Platform.OS}-${"DEV" | "PROD" | "EXPO"}`;
+    readonly release: string;
+    readonly project: string;
+}
+interface SentryLoggerHOCProps {
+    readonly customer: {
+        readonly customerId: string;
+    } | undefined;
+}
+interface SentryLoggerFunction {
+    (args: SentryLoggerFunctionArgs): <P extends SentryLoggerHOCProps>(Component: ComponentType<P>) => ComponentType<P & JSX.IntrinsicAttributes>;
+}
+declare const sentryLogger: SentryLoggerFunction;
+export type { SentryLoggerFunctionArgs, SentryLoggerHOCProps };
+export { sentryLogger };

package/dist/shared/logging/SentryLogger.js

@@ -0,0 +1,122 @@
+import { defaultStackParser } from "@sentry/browser";
+import { makeMain } from "@sentry/core";
+import React, { useEffect } from "react";
+import { Platform } from "react-native";
+import { useRoutes as reactRouterUseRoutes } from "react-router-native";
+import { Client, Hub, transport, integrations, wrapUseRoutes, wrapComponent, ErrorBoundary, } from "./SentryDependencies";
+// This configuration is obtained from
+// https://docs.sentry.io/clients/javascript/tips/#decluttering-sentry
+const IGNORED_ERRORS = [
+    // Random plugins/extensions
+    "top.GLOBALS",
+    // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
+    "originalCreateNotification",
+    "canvas.contentDocument",
+    "MyApp_RemoveAllHighlights",
+    "http://tt.epicplay.com",
+    "Can't find variable: ZiteReader",
+    "jigsaw is not defined",
+    "ComboSearch is not defined",
+    "http://loading.retry.widdit.com/",
+    "atomicFindClose",
+    // Facebook borked
+    "fb_xd_fragment",
+    // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to reduce this. (thanks @acdha)
+    // See http://stackoverflow.com/questions/4113268/how-to-stop-javascript-injection-from-vodafone-proxy
+    "bmi_SafeAddOnload",
+    "EBCallBackMessageReceived",
+    // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
+    "conduitPage",
+    // Generic error code from errors outside the security sandbox
+    // You can delete this if using raven.js > 1.0, which ignores these automatically.
+    "Script error.",
+    // Avast extension error
+    "_avast_submit",
+];
+const DENIED_URLS = [
+    // Google Adsense
+    /pagead\/js/i,
+    // Facebook flakiness
+    /graph\.facebook\.com/i,
+    // Facebook blocked
+    /connect\.facebook\.net\/en_US\/all\.js/i,
+    // Woopra flakiness
+    /eatdifferent\.com\.woopra-ns\.com/i,
+    /static\.woopra\.com\/js\/woopra\.js/i,
+    // Chrome extensions
+    /extensions\//i,
+    /^chrome:\/\//i,
+    // Other plugins
+    /127\.0\.0\.1:4001\/isrunning/i,
+    /webappstoolbarba\.texthelp\.com\//i,
+    /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
+];
+const sentryLogger = ({ publicKey, environment, release, project }) => {
+    let globalHub;
+    let currentHub;
+    const initHub = () => {
+        const client = new Client({
+            environment,
+            release,
+            dsn: `https://${publicKey}@o179049.ingest.sentry.io/${project}`,
+            integrations: integrations(),
+            tracesSampleRate: 0.5,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            enableNative: Platform.OS !== "web",
+            autoInitializeNativeSdk: Platform.OS !== "web",
+            stackParser: defaultStackParser,
+            transport,
+            ignoreErrors: IGNORED_ERRORS,
+            denyUrls: DENIED_URLS,
+        });
+        return new Hub(client);
+    };
+    /**
+     * BrowserClient must be initialized before wrapUseRoutes is used.
+     *
+     * ReactNativeClient cannot be initialized until actual component is rendered.
+     * Its initialization will trigger the native sdk setup with the provided settings,
+     * but by the time an event will be sent to Sentry, the host project (UAF)
+     * will have overridden its configuration (dsn, etc) after initializing it
+     * so we have to initialize it after the component mount.
+     */
+    if (Platform.OS === "web") {
+        currentHub = initHub();
+    }
+    const onMount = (customerId) => {
+        // currentHub won't be initialized in native until this time
+        currentHub = currentHub ?? initHub();
+        currentHub.setUser({ id: customerId });
+        currentHub.startSession();
+        if (!globalHub) {
+            globalHub = makeMain(currentHub);
+        }
+    };
+    const onUnMount = () => {
+        if (currentHub) {
+            currentHub.setUser(null);
+            currentHub.endSession();
+        }
+        if (globalHub) {
+            makeMain(globalHub);
+            globalHub = null;
+        }
+    };
+    const useRoutes = wrapUseRoutes(reactRouterUseRoutes);
+    return (Component) => {
+        const WrappedComponent = wrapComponent(Component);
+        const SentryLogger = (props) => {
+            const { customer } = props;
+            useEffect(() => {
+                onMount(customer?.customerId);
+                return onUnMount;
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, []);
+            return (React.createElement(ErrorBoundary, null,
+                React.createElement(WrappedComponent, { ...props, useRoutes: useRoutes })));
+        };
+        return SentryLogger;
+    };
+};
+export { sentryLogger };

package/dist/shared/logging/reactRouterV6Instrumentation/NativeReactRouterV6Instrumentation.d.ts

@@ -0,0 +1,49 @@
+import { RoutingInstrumentation } from "@sentry/react-native";
+import { OnConfirmRoute, TransactionCreator } from "@sentry/react-native/dist/js/tracing/routingInstrumentation";
+import { BeforeNavigate } from "@sentry/react-native/dist/js/tracing/types";
+import { TransactionContext } from "@sentry/types";
+import { Location, MatchRoutes, UseEffect, UseLocation, WrapUseRoutes } from "../types";
+import { NavigationCurrentRoute, NavigationRoute } from "./types";
+/**
+ * This instrumentation has been built taking as an example the actual
+ * ReactNavigationV4Instrumentation implementation as suggested in the documentation.
+ *
+ * (https://docs.sentry.io/platforms/react-native/performance/instrumentation/automatic-instrumentation/#custom-instrumentation)
+ * (https://github.com/getsentry/sentry-react-native/blob/211ec081b6bf8d7d29541afe9d800040f61e3c4e/src/js/tracing/reactnavigationv4.ts)
+ */
+interface NavigationTransactionContext extends TransactionContext {
+    readonly tags: {
+        readonly ["routing.instrumentation"]: string;
+        readonly ["routing.route.name"]: string;
+    };
+    readonly data: {
+        readonly route: NavigationCurrentRoute;
+        readonly previousRoute: NavigationRoute | null;
+    };
+}
+interface NativeReactRouterV6InstrumentationConstructorArgs {
+    readonly useEffect: UseEffect;
+    readonly useLocation: UseLocation;
+    readonly matchRoutes: MatchRoutes;
+    readonly transformLocation?: (location: Location) => Location;
+}
+declare class NativeReactRouterV6Instrumentation extends RoutingInstrumentation {
+    static instrumentationName: string;
+    private useEffect;
+    private useLocation;
+    private matchRoutes;
+    private transformLocation;
+    private prevRoute?;
+    private recentRouteKeys;
+    private latestTransaction?;
+    private readonly maxRecentRouteLen;
+    constructor({ useEffect, useLocation, matchRoutes, transformLocation, }: NativeReactRouterV6InstrumentationConstructorArgs);
+    registerRoutingInstrumentation(listener: TransactionCreator, beforeNavigate: BeforeNavigate, onConfirmRoute: OnConfirmRoute): void;
+    private onRouteChange;
+    private currentRouteFromLocation;
+    private pushRecentRouteKey;
+    private onBeforeNavigateNotSampled;
+    wrapUseRoutes: WrapUseRoutes;
+}
+export type { NavigationTransactionContext };
+export { NativeReactRouterV6Instrumentation };