Add sentry tracing

.changeset/five-oranges-crash.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Now developer can see the traces within Sentry

package.json

@@ -41,8 +41,8 @@
     "@saleor/macaw-ui": "npm:@saleor/[email protected]",
     "@saleor/macaw-ui-next": "npm:@saleor/[email protected]",
     "@saleor/sdk": "0.6.0",
-    "@sentry/react": "^7.83.0",
-    "@sentry/vite-plugin": "^2.15.0",
+    "@sentry/react": "^8.21.0",
+    "@sentry/vite-plugin": "^2.21.1",
     "@types/faker": "^5.1.6",
     "@uiw/react-color-hue": "0.0.34",
     "@uiw/react-color-material": "^0.1.0",
@@ -123,7 +123,7 @@
     "@graphql-codegen/typescript-react-apollo": "^3.2.5",
     "@playwright/test": "^1.40.0",
     "@saleor/app-sdk": "0.47.2",
-    "@sentry/cli": "^2.22.3",
+    "@sentry/cli": "^2.33.0",
     "@swc/jest": "^0.2.26",
     "@types/apollo-upload-client": "^17.0.2",
     "@types/chroma-js": "^2.4.0",

src/apps/apps-routing.tsx

@@ -1,11 +1,12 @@
 import { AppDetailsUrlQueryParams, AppInstallUrlQueryParams } from "@dashboard/apps/urls";
 import SectionRoute from "@dashboard/auth/components/SectionRoute";
+import { Route } from "@dashboard/components/Router";
 import { PermissionEnum } from "@dashboard/graphql";
 import { sectionNames } from "@dashboard/intl";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 import {
   AppInstallView,
   AppListView,

src/attributes/index.tsx

@@ -1,9 +1,10 @@
+import { Route } from "@dashboard/components/Router";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {

src/auth/components/SectionRoute.tsx

@@ -1,6 +1,7 @@
+import { Route } from "@dashboard/components/Router";
 import { PermissionEnum } from "@dashboard/graphql";
 import React from "react";
-import { Route, RouteProps } from "react-router-dom";
+import { RouteProps } from "react-router-dom";
 
 import NotFound from "../../NotFound";
 import { useUser } from "..";

src/auth/index.tsx

@@ -1,6 +1,7 @@
+import { Route } from "@dashboard/components/Router";
 import { parse as parseQs } from "qs";
 import React, { useContext } from "react";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import Layout from "./components/Layout";
 import { UserContext as Context } from "./types";

src/categories/index.tsx

@@ -1,9 +1,10 @@
+import { Route } from "@dashboard/components/Router";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {

src/channels/index.tsx

@@ -1,9 +1,10 @@
+import { Route } from "@dashboard/components/Router";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {

src/collections/index.tsx

@@ -1,9 +1,10 @@
+import { Route } from "@dashboard/components/Router";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {

src/components/Router/index.tsx

@@ -0,0 +1,18 @@
+import { getAppMountUri } from "@dashboard/config";
+import * as Sentry from "@sentry/react";
+import { createBrowserHistory } from "history";
+import React from "react";
+import { RouterProps as BaseRouterProps } from "react-router";
+import { Route as BaseRoute, Router as BaseRouter } from "react-router-dom";
+
+type RouterProps = Omit<BaseRouterProps, "history"> & { children: React.ReactNode };
+
+export const history = createBrowserHistory({
+  basename: getAppMountUri(),
+});
+
+export const Route = Sentry.withSentryRouting(BaseRoute);
+
+export const Router = (props: RouterProps) => {
+  return <BaseRouter history={history}>{props.children}</BaseRouter>;
+};

src/custom-apps/index.tsx

@@ -1,10 +1,11 @@
 // @ts-strict-ignore
+import { Route } from "@dashboard/components/Router";
 import { WindowTitle } from "@dashboard/components/WindowTitle";
 import { sectionNames } from "@dashboard/intl";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import {
   CustomAppDetailsUrlQueryParams,

src/customers/index.tsx

@@ -1,9 +1,10 @@
+import { Route } from "@dashboard/components/Router";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {

src/discounts/index.tsx

@@ -1,11 +1,12 @@
 import { ConditionalDiscountFilterProvider } from "@dashboard/components/ConditionalFilter";
+import { Route } from "@dashboard/components/Router";
 import { useFlag } from "@dashboard/featureFlags";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import { DiscountListUrlQueryParams, DiscountListUrlSortField } from "./discountsUrls";

src/giftCards/index.tsx

@@ -1,10 +1,11 @@
+import { Route } from "@dashboard/components/Router";
 import { WindowTitle } from "@dashboard/components/WindowTitle";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import GiftCardSettings from "./GiftCardSettings";
 import GiftCardListComponent from "./GiftCardsList";

src/index.tsx

@@ -3,6 +3,7 @@ import "./index.css";
 
 import { ApolloProvider } from "@apollo/client";
 import DemoBanner from "@dashboard/components/DemoBanner";
+import { history, Route, Router } from "@dashboard/components/Router";
 import { PermissionEnum } from "@dashboard/graphql";
 import useAppState from "@dashboard/hooks/useAppState";
 import { ThemeProvider } from "@dashboard/theme";
@@ -13,7 +14,7 @@ import { render } from "react-dom";
 import { ErrorBoundary } from "react-error-boundary";
 import TagManager from "react-gtm-module";
 import { useIntl } from "react-intl";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
+import { Switch } from "react-router-dom";
 
 import { AppsSectionRoot } from "./apps";
 import { ExternalAppProvider } from "./apps/components/ExternalAppContext";
@@ -42,7 +43,7 @@ import { ProductAnalytics } from "./components/ProductAnalytics";
 import { SavebarRefProvider } from "./components/Savebar/SavebarRefContext";
 import { ShopProvider } from "./components/Shop";
 import { WindowTitle } from "./components/WindowTitle";
-import { DEMO_MODE, getAppMountUri, GTM_ID } from "./config";
+import { DEMO_MODE, GTM_ID } from "./config";
 import ConfigurationSection from "./configuration";
 import { getConfigMenuItemsPermissions } from "./configuration/utils";
 import AppStateProvider from "./containers/AppState";
@@ -82,7 +83,7 @@ if (GTM_ID) {
   TagManager.initialize({ gtmId: GTM_ID });
 }
 
-errorTracker.init();
+errorTracker.init(history);
 
 /*
   Handle legacy theming toggle. Since we use new and old macaw,
@@ -105,7 +106,7 @@ handleLegacyTheming();
 const App: React.FC = () => (
   <SaleorProvider client={saleorClient}>
     <ApolloProvider client={apolloClient}>
-      <BrowserRouter basename={getAppMountUri()}>
+      <Router>
         <LegacyThemeProvider overrides={themeOverrides} palettes={paletteOverrides}>
           <ThemeProvider>
             <DateProvider>
@@ -137,7 +138,7 @@ const App: React.FC = () => (
             </DateProvider>
           </ThemeProvider>
         </LegacyThemeProvider>
-      </BrowserRouter>
+      </Router>
     </ApolloProvider>
   </SaleorProvider>
 );

src/navigation/index.tsx

@@ -1,7 +1,8 @@
+import { Route } from "@dashboard/components/Router";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { menuListPath, MenuListUrlQueryParams, MenuListUrlSortField, menuPath } from "./urls";
 import MenuDetailsComponent from "./views/MenuDetails";

src/orders/index.tsx

@@ -1,10 +1,11 @@
 import { ConditionalOrderFilterProvider } from "@dashboard/components/ConditionalFilter";
+import { Route } from "@dashboard/components/Router";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {

src/pageTypes/index.tsx

@@ -1,9 +1,10 @@
+import { Route } from "@dashboard/components/Router";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {

src/pages/index.tsx

@@ -1,9 +1,10 @@
+import { Route } from "@dashboard/components/Router";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {

src/permissionGroups/index.tsx

@@ -1,9 +1,10 @@
+import { Route } from "@dashboard/components/Router";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {

src/plugins/index.tsx

@@ -1,9 +1,10 @@
+import { Route } from "@dashboard/components/Router";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {

src/productTypes/index.tsx

@@ -1,9 +1,10 @@
+import { Route } from "@dashboard/components/Router";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {

src/products/index.tsx

@@ -1,12 +1,13 @@
 import { ConditionalProductFilterProvider } from "@dashboard/components/ConditionalFilter/context";
+import { Route } from "@dashboard/components/Router";
 import { useFlag } from "@dashboard/featureFlags";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { getArrayQueryParam } from "@dashboard/utils/urls";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {

src/services/errorTracking/adapters/Sentry.ts

@@ -1,4 +1,5 @@
 import * as Sentry from "@sentry/react";
+import { History } from "history";
 
 import { TrackerMethods } from "../types";
 
@@ -9,7 +10,7 @@ interface Config {
 }
 
 export const SentryAdapter = (config: Config): TrackerMethods => {
-  const init: TrackerMethods["init"] = () => {
+  const init: TrackerMethods["init"] = (history: History) => {
     if (config?.dsn) {
       Sentry.init({
         dsn: config.dsn,
@@ -22,6 +23,8 @@ export const SentryAdapter = (config: Config): TrackerMethods => {
           "ResizeObserver loop limit exceeded",
           "Cannot read properties of undefined (reading 'holder')",
         ],
+        integrations: [Sentry.reactRouterV5BrowserTracingIntegration({ history })],
+        tracesSampleRate: 0.4,
       });
 
       return true;

src/services/errorTracking/trackerFactory.test.ts

@@ -1,3 +1,5 @@
+import { History } from "history";
+
 import { ErrorTrackerFactory } from "./trackerFactory";
 import { TrackerMethods, TrackerPermission } from "./types";
 
@@ -22,10 +24,12 @@ const TestAdapter = (): TrackerMethods => {
   };
 };
 
+const history = jest.fn() as unknown as History;
+
 describe("Error Tracking", () => {
   it("Initiates the tracker", () => {
     const errorTracking = ErrorTrackerFactory(TestAdapter());
-    const enabled = errorTracking.init();
+    const enabled = errorTracking.init(history);
 
     expect(enabled).toBe(true);
     expect(initMockFn).toHaveBeenCalled();
@@ -41,7 +45,7 @@ describe("Error Tracking", () => {
   it("Sends a captured exception", () => {
     const errorTracking = ErrorTrackerFactory(TestAdapter());
 
-    errorTracking.init();
+    errorTracking.init(history);
 
     const sampleError = new Error("test");
     const id = errorTracking.captureException(sampleError);
@@ -52,7 +56,7 @@ describe("Error Tracking", () => {
   it("Does not save user data without permission", () => {
     const errorTracking = ErrorTrackerFactory(TestAdapter());
 
-    errorTracking.init();
+    errorTracking.init(history);
 
     const userData = {
       email: "[email protected]",
@@ -66,7 +70,7 @@ describe("Error Tracking", () => {
   it("Does save user data with proper permission", () => {
     const errorTracking = ErrorTrackerFactory(TestAdapter(), [TrackerPermission.USER_DATA]);
 
-    errorTracking.init();
+    errorTracking.init(history);
 
     const userData = {
       email: "[email protected]",