@lookiero/checkout 0.6.0-beta.40 → 0.6.0-beta.42

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

@@ -1,13 +1,10 @@
-import { matchRoutes as reactRouterMatchRoutes } from "@remix-run/router";
 import { BrowserClient, Hub } from "@sentry/browser";
 import { ErrorBoundary } from "@sentry/react";
 import { ReactNativeTransportOptions } from "@sentry/react-native/dist/js/options";
 import { Transport } from "@sentry/types";
-import { Integrations, WrapComponent, WrapUseRoutes } from "./types";
+import { wrapUseRoutes } from "./reactRouterV6Instrumentation/reactRouterV6Instrumentation";
+import { Integrations, WrapComponent } from "./types";
 declare const transport: (options: ReactNativeTransportOptions) => Transport;
-declare const matchRoutes: typeof reactRouterMatchRoutes;
-export { matchRoutes };
 declare const integrations: Integrations;
 declare const wrapComponent: WrapComponent;
-declare const wrapUseRoutes: WrapUseRoutes;
 export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };

package/dist/shared/logging/SentryDependencies.js

@@ -1,24 +1,17 @@
-import { matchRoutes as reactRouterMatchRoutes } from "@remix-run/router";
 import { BrowserClient, Hub, makeFetchTransport, defaultIntegrations } from "@sentry/browser";
 import { ErrorBoundary } from "@sentry/react";
-import { reactRouterV6Instrumentation } from "@sentry/react";
-import { wrapUseRoutes as reactRouterV6WrapUseRoutes } from "@sentry/react";
 import { BrowserTracing } from "@sentry/tracing";
 import { useEffect } from "react";
-import { createRoutesFromChildren, useLocation, useNavigationType } from "react-router-native";
-import { stripFirstSlugFromLocation } from "./location";
+import { useLocation, useNavigationType, matchRoutes } from "react-router-native";
+import { reactRouterV6Instrumentation, wrapUseRoutes, } from "./reactRouterV6Instrumentation/reactRouterV6Instrumentation";
 const transport = (options, nativeFetch) => makeFetchTransport(options, nativeFetch);
-// Remove the location's first path ("/checkout"). Otherwise it won't match the proper route.
-const matchRoutes = (routes, locationArg) => reactRouterMatchRoutes(routes, stripFirstSlugFromLocation(locationArg));
-export { matchRoutes };
 /**
  * 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, createRoutesFromChildren, matchRoutes),
+    routingInstrumentation: reactRouterV6Instrumentation(useEffect, useLocation, useNavigationType, matchRoutes),
 });
 const integrations = () => [...defaultIntegrations, browserTracing];
 const wrapComponent = (Component) => Component;
-const wrapUseRoutes = reactRouterV6WrapUseRoutes;
 export { BrowserClient as Client, Hub, ErrorBoundary, transport, integrations, wrapComponent, wrapUseRoutes };

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

@@ -5,14 +5,7 @@ import { NATIVE } from "@sentry/react-native/dist/js/wrapper";
 import { useEffect } from "react";
 import { matchRoutes, useLocation } from "react-router-native";
 import { ReactRouterV6Instrumentation } from "./reactRouterV6Instrumentation/reactRouterV6Instrumentation.native";
-const transport = (options, nativeFetch) => {
-    console.log("NATIVE.isNativeTransportAvailable()", NATIVE.isNativeTransportAvailable(), options, nativeFetch);
-    console.log(makeReactNativeTransport(options));
-    console.log(makeFetchTransport(options, nativeFetch));
-    return NATIVE.isNativeTransportAvailable()
-        ? makeReactNativeTransport(options)
-        : makeFetchTransport(options, nativeFetch);
-};
+const transport = (options, nativeFetch) => NATIVE.isNativeTransportAvailable() ? makeReactNativeTransport(options) : makeFetchTransport(options, nativeFetch);
 const routingInstrumentation = new ReactRouterV6Instrumentation(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

package/dist/shared/logging/SentryLogger.js

@@ -73,12 +73,23 @@ const sentryLogger = ({ publicKey, environment, release, project }) => {
         });
         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 overrided its configuration (dsn, etc) after initializing it
+     * so we have to initialize it on the component mount.
+     */
+    if (Platform.OS === "web") {
+        currentHub = initHub();
+    }
     const onMount = (customerId) => {
-        if (!currentHub) {
-            currentHub = initHub();
-            currentHub.setUser({ id: customerId });
-            currentHub.startSession();
-        }
+        // currentHub won't be initialized in native until this time
+        currentHub = currentHub ?? initHub();
+        currentHub.setUser({ id: customerId });
+        currentHub.startSession();
         if (!globalHub) {
             globalHub = makeMain(currentHub);
         }
@@ -87,7 +98,6 @@ const sentryLogger = ({ publicKey, environment, release, project }) => {
         if (currentHub) {
             currentHub.setUser(null);
             currentHub.endSession();
-            currentHub = null;
         }
         if (globalHub) {
             makeMain(globalHub);

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

@@ -0,0 +1,5 @@
+import { Transaction, TransactionContext } from "@sentry/types";
+import { MatchRoutes, UseEffect, UseLocation, UseNavigationType, WrapUseRoutes } from "../types";
+declare const reactRouterV6Instrumentation: (useEffect: UseEffect, useLocation: UseLocation, useNavigationType: UseNavigationType, matchRoutes: MatchRoutes) => (customStartTransaction: (context: TransactionContext) => Transaction | undefined, startTransactionOnPageLoad?: boolean, startTransactionOnLocationChange?: boolean) => void;
+declare const wrapUseRoutes: WrapUseRoutes;
+export { reactRouterV6Instrumentation, wrapUseRoutes };

package/dist/shared/logging/reactRouterV6Instrumentation/reactRouterV6Instrumentation.js

@@ -0,0 +1,103 @@
+import { WINDOW } from "@sentry/browser";
+import { logger } from "@sentry/utils";
+import React from "react";
+import { stripFirstSlugFromLocation } from "../location";
+import { normalizedNameAndMatchForLocation } from "./normalizedNameAndMatchForLocation";
+/**
+ * "@sentry/react"'s reactRouterV6Instrumentation has a bug and we have to patch its implementation.
+ * (regarding location and matchRoutes)
+ */
+let activeTransaction;
+/* eslint-disable @typescript-eslint/naming-convention */
+let _useEffect;
+let _useLocation;
+let _useNavigationType;
+let _matchRoutes;
+let _customStartTransaction;
+let _startTransactionOnLocationChange;
+/* eslint-enable @typescript-eslint/naming-convention */
+const SENTRY_TAGS = {
+    ["routing.instrumentation"]: "react-router-v6",
+};
+const reactRouterV6Instrumentation = (useEffect, useLocation, useNavigationType, matchRoutes) => {
+    return (customStartTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true) => {
+        const initPathName = WINDOW && WINDOW.location && WINDOW.location.pathname;
+        if (startTransactionOnPageLoad && initPathName) {
+            activeTransaction = customStartTransaction({
+                name: initPathName,
+                op: "pageload",
+                tags: SENTRY_TAGS,
+                metadata: {
+                    source: "url",
+                },
+            });
+        }
+        _useEffect = useEffect;
+        _useLocation = useLocation;
+        _useNavigationType = useNavigationType;
+        _matchRoutes = matchRoutes;
+        _customStartTransaction = customStartTransaction;
+        _startTransactionOnLocationChange = startTransactionOnLocationChange;
+    };
+};
+const updatePageloadTransaction = (location, routes) => {
+    const normalizedLocation = stripFirstSlugFromLocation(location);
+    const branches = _matchRoutes(routes, normalizedLocation);
+    if (activeTransaction && branches) {
+        const [name, match] = normalizedNameAndMatchForLocation({ routes, location: normalizedLocation, branches });
+        const source = match ? "route" : "url";
+        activeTransaction.setName(match?.route.path ?? name, source);
+    }
+};
+const handleNavigation = (location, routes, navigationType) => {
+    const normalizedLocation = stripFirstSlugFromLocation(location);
+    const branches = _matchRoutes(routes, normalizedLocation);
+    if (_startTransactionOnLocationChange && (navigationType === "PUSH" || navigationType === "POP") && branches) {
+        if (activeTransaction) {
+            activeTransaction.finish();
+        }
+        const [name, match] = normalizedNameAndMatchForLocation({ routes, location: normalizedLocation, branches });
+        const source = match ? "route" : "url";
+        activeTransaction = _customStartTransaction({
+            name: match?.route.path ?? name,
+            op: "navigation",
+            tags: SENTRY_TAGS,
+            metadata: {
+                source,
+            },
+        });
+    }
+};
+const wrapUseRoutes = (origUseRoutes) => {
+    if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes || !_customStartTransaction) {
+        __DEBUG_BUILD__ &&
+            logger.warn("reactRouterV6Instrumentation was unable to wrap `useRoutes` because of one or more missing parameters.");
+        return origUseRoutes;
+    }
+    let isMountRenderPass = true;
+    // eslint-disable-next-line react/display-name
+    return (routes, locationArg) => {
+        const SentryRoutes = () => {
+            const Routes = origUseRoutes(routes, locationArg);
+            const location = _useLocation();
+            const navigationType = _useNavigationType();
+            // A value with stable identity to either pick `locationArg` if available or `location` if not
+            const stableLocationParam = typeof locationArg === "string" || (locationArg && locationArg.pathname)
+                ? locationArg
+                : location;
+            _useEffect(() => {
+                const normalizedLocation = typeof stableLocationParam === "string" ? { pathname: stableLocationParam } : stableLocationParam;
+                if (isMountRenderPass) {
+                    updatePageloadTransaction(normalizedLocation, routes);
+                    isMountRenderPass = false;
+                }
+                else {
+                    handleNavigation(normalizedLocation, routes, navigationType);
+                }
+            }, [navigationType, stableLocationParam]);
+            return Routes;
+        };
+        return React.createElement(SentryRoutes, null);
+    };
+};
+export { reactRouterV6Instrumentation, wrapUseRoutes };

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

@@ -7,6 +7,8 @@ interface Location {
 type UseEffect = typeof useEffect;
 type UseLocation = typeof useLocation;
 type MatchRoutes = typeof matchRoutes;
+type NavigationType = "PUSH" | "REPLACE" | "POP";
+type UseNavigationType = () => NavigationType;
 type UseRoutes = (routes: RouteObject[], locationArg?: Partial<Location> | string) => React.ReactElement | null;
 interface WrapUseRoutes {
     (useRoutes: UseRoutes): UseRoutes;
@@ -17,4 +19,4 @@ interface WrapComponent {
 interface Integrations {
     (): Integration[];
 }
-export type { Location, Integrations, UseEffect, UseLocation, MatchRoutes, UseRoutes, WrapUseRoutes, WrapComponent };
+export type { Location, Integrations, UseEffect, UseLocation, NavigationType, UseNavigationType, MatchRoutes, UseRoutes, WrapUseRoutes, WrapComponent, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.6.0-beta.40",
+  "version": "0.6.0-beta.42",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [