From 3df028d5a49913accd46de1c9eec77ab100b70cc Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 27 Feb 2025 15:17:38 +0530 Subject: [PATCH] chore: Removing cyclic dependencies due to Sentry route (#39471) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Removing cyclic dependencies due to Sentry route by creating separate component for it. Fixes # ## Automation /ok-to-test tags="@tag.All" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 321274cb457af80dc9fdf465ecdcf4f66f00ad92 > Cypress dashboard. > Tags: `@tag.All` > Spec: >
Thu, 27 Feb 2025 08:46:29 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## Summary by CodeRabbit - **Refactor** - Streamlined the error tracking integration across the app to enhance reliability and consistency in route handling. - Updates have been applied throughout key navigation areas—such as settings, editors, and authentication—to ensure a smoother and more resilient user experience. --- app/client/src/ce/AppRouter.tsx | 6 ++---- .../src/ce/components/WorkspaceSettingsTabs/index.tsx | 10 ++-------- app/client/src/components/SentryRoute.tsx | 4 ++++ .../src/pages/AppIDE/layouts/components/Editor.tsx | 2 +- .../src/pages/AppIDE/layouts/components/Explorer.tsx | 2 +- .../pages/AppIDE/layouts/routers/JSEditor/JSEditor.tsx | 2 +- .../src/pages/AppIDE/layouts/routers/LeftPane.tsx | 2 +- .../pages/AppIDE/layouts/routers/MainPane/MainPane.tsx | 6 ++---- .../AppIDE/layouts/routers/QueryEditor/Editor.tsx | 2 +- .../src/pages/AppIDE/layouts/routers/RightPane.tsx | 2 +- .../routers/UISegmentLeftPane/UISegmentLeftPane.tsx | 3 +-- app/client/src/pages/Templates/index.tsx | 6 ++---- app/client/src/pages/UserAuth/index.tsx | 6 ++---- app/client/src/pages/workspace/index.tsx | 5 ++--- 14 files changed, 23 insertions(+), 35 deletions(-) create mode 100644 app/client/src/components/SentryRoute.tsx diff --git a/app/client/src/ce/AppRouter.tsx b/app/client/src/ce/AppRouter.tsx index 6d4f72eea7..90e30f8001 100644 --- a/app/client/src/ce/AppRouter.tsx +++ b/app/client/src/ce/AppRouter.tsx @@ -1,7 +1,7 @@ import React, { Suspense, useEffect } from "react"; import history from "utils/history"; import AppHeader from "ee/pages/common/AppHeader"; -import { Redirect, Route, Router, Switch } from "react-router-dom"; +import { Redirect, Router, Switch } from "react-router-dom"; import { ADMIN_SETTINGS_CATEGORY_PATH, ADMIN_SETTINGS_PATH, @@ -43,7 +43,6 @@ import PageLoadingBar from "pages/common/PageLoadingBar"; import ErrorPageHeader from "pages/common/ErrorPageHeader"; import { useDispatch, useSelector } from "react-redux"; -import * as Sentry from "@sentry/react"; import { getSafeCrash, getSafeCrashCode } from "selectors/errorSelectors"; import UserProfile from "pages/UserProfile"; import Setup from "pages/setup"; @@ -64,8 +63,7 @@ import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; import CustomWidgetBuilderLoader from "pages/Editor/CustomWidgetBuilder/loader"; import { getIsConsolidatedPageLoading } from "selectors/ui"; import { useFeatureFlagOverride } from "utils/hooks/useFeatureFlagOverride"; - -export const SentryRoute = Sentry.withSentryRouting(Route); +import { SentryRoute } from "components/SentryRoute"; export const loadingIndicator = ; diff --git a/app/client/src/ce/components/WorkspaceSettingsTabs/index.tsx b/app/client/src/ce/components/WorkspaceSettingsTabs/index.tsx index da68513cda..2f80611cec 100644 --- a/app/client/src/ce/components/WorkspaceSettingsTabs/index.tsx +++ b/app/client/src/ce/components/WorkspaceSettingsTabs/index.tsx @@ -1,19 +1,13 @@ import React, { useCallback, useEffect, useMemo } from "react"; -import { - useRouteMatch, - Route, - useLocation, - useHistory, -} from "react-router-dom"; +import { useRouteMatch, useLocation, useHistory } from "react-router-dom"; import MemberSettings from "ee/pages/workspace/Members"; import { GeneralSettings } from "pages/workspace/General"; import { Tabs, Tab, TabsList, TabPanel } from "@appsmith/ads"; import { navigateToTab } from "ee/pages/workspace/helpers"; import styled from "styled-components"; -import * as Sentry from "@sentry/react"; import { APPLICATIONS_URL } from "constants/routes/baseRoutes"; -export const SentryRoute = Sentry.withSentryRouting(Route); +import { SentryRoute } from "components/SentryRoute"; export const TabsWrapper = styled.div` padding-top: var(--ads-v2-spaces-4); diff --git a/app/client/src/components/SentryRoute.tsx b/app/client/src/components/SentryRoute.tsx new file mode 100644 index 0000000000..a5cac6a7f9 --- /dev/null +++ b/app/client/src/components/SentryRoute.tsx @@ -0,0 +1,4 @@ +import * as Sentry from "@sentry/react"; +import { Route } from "react-router"; + +export const SentryRoute = Sentry.withSentryRouting(Route); diff --git a/app/client/src/pages/AppIDE/layouts/components/Editor.tsx b/app/client/src/pages/AppIDE/layouts/components/Editor.tsx index 5b8bab55c8..136bdb5811 100644 --- a/app/client/src/pages/AppIDE/layouts/components/Editor.tsx +++ b/app/client/src/pages/AppIDE/layouts/components/Editor.tsx @@ -1,7 +1,6 @@ import React from "react"; import { Flex } from "@appsmith/ads"; import { Switch, useRouteMatch } from "react-router"; -import { SentryRoute } from "ee/AppRouter"; import { jsSegmentRoutes, querySegmentRoutes, @@ -12,6 +11,7 @@ import EditorTabs from "./EditorTabs"; import { useCurrentEditorState } from "../../hooks/useCurrentEditorState"; import { EditorEntityTab } from "IDE/Interfaces/EditorTypes"; import styled from "styled-components"; +import { SentryRoute } from "components/SentryRoute"; const Container = styled(Flex)` // Animating using https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API diff --git a/app/client/src/pages/AppIDE/layouts/components/Explorer.tsx b/app/client/src/pages/AppIDE/layouts/components/Explorer.tsx index 2a714bb15c..98fd20865f 100644 --- a/app/client/src/pages/AppIDE/layouts/components/Explorer.tsx +++ b/app/client/src/pages/AppIDE/layouts/components/Explorer.tsx @@ -1,7 +1,6 @@ import React, { useMemo } from "react"; import { ExplorerContainer } from "@appsmith/ads"; import { Switch, useRouteMatch } from "react-router"; -import { SentryRoute } from "ee/AppRouter"; import { jsSegmentRoutes, querySegmentRoutes, @@ -21,6 +20,7 @@ import { getIDEViewMode } from "selectors/ideSelectors"; import { EditorEntityTab, EditorViewMode } from "IDE/Interfaces/EditorTypes"; import { DEFAULT_EXPLORER_PANE_WIDTH } from "constants/AppConstants"; import { useCurrentEditorState } from "../../hooks/useCurrentEditorState"; +import { SentryRoute } from "components/SentryRoute"; const EditorPaneExplorer = () => { const { path } = useRouteMatch(); diff --git a/app/client/src/pages/AppIDE/layouts/routers/JSEditor/JSEditor.tsx b/app/client/src/pages/AppIDE/layouts/routers/JSEditor/JSEditor.tsx index f9d316a1f1..3c00fa89ea 100644 --- a/app/client/src/pages/AppIDE/layouts/routers/JSEditor/JSEditor.tsx +++ b/app/client/src/pages/AppIDE/layouts/routers/JSEditor/JSEditor.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Switch, useRouteMatch } from "react-router"; import { JSEditorRoutes } from "ee/pages/AppIDE/layouts/routers/JSEditor/constants"; -import { SentryRoute } from "ee/AppRouter"; +import { SentryRoute } from "components/SentryRoute"; const JSEditorPane = () => { const { path } = useRouteMatch(); diff --git a/app/client/src/pages/AppIDE/layouts/routers/LeftPane.tsx b/app/client/src/pages/AppIDE/layouts/routers/LeftPane.tsx index 039d834e8c..51ee61ef97 100644 --- a/app/client/src/pages/AppIDE/layouts/routers/LeftPane.tsx +++ b/app/client/src/pages/AppIDE/layouts/routers/LeftPane.tsx @@ -1,7 +1,6 @@ import React, { useMemo } from "react"; import { useSelector } from "react-redux"; import { Switch, useRouteMatch } from "react-router"; -import { SentryRoute } from "ee/AppRouter"; import { APP_LIBRARIES_EDITOR_PATH, APP_PACKAGES_EDITOR_PATH, @@ -18,6 +17,7 @@ import LibrarySidePane from "ee/pages/AppIDE/components/LibrariesList/LibrarySid import { getDatasourceUsageCountForApp } from "ee/selectors/entitiesSelector"; import { IDE_TYPE } from "ee/IDE/Interfaces/IDETypes"; import { Flex } from "@appsmith/ads"; +import { SentryRoute } from "components/SentryRoute"; const LeftPane = () => { const { path } = useRouteMatch(); diff --git a/app/client/src/pages/AppIDE/layouts/routers/MainPane/MainPane.tsx b/app/client/src/pages/AppIDE/layouts/routers/MainPane/MainPane.tsx index 2b5dc9bc10..5f8c9ec4c4 100644 --- a/app/client/src/pages/AppIDE/layouts/routers/MainPane/MainPane.tsx +++ b/app/client/src/pages/AppIDE/layouts/routers/MainPane/MainPane.tsx @@ -1,13 +1,11 @@ import React from "react"; -import { Route, Switch, useRouteMatch } from "react-router"; -import * as Sentry from "@sentry/react"; +import { Switch, useRouteMatch } from "react-router"; import { MainPaneRoutes } from "ee/pages/AppIDE/layouts/routers/MainPane/constants"; import { useSelector } from "react-redux"; import { selectCombinedPreviewMode } from "selectors/gitModSelectors"; import WidgetsEditor from "pages/Editor/WidgetsEditor"; import { useWidgetSelectionBlockListener } from "../../hooks/useWidgetSelectionBlockListener"; - -const SentryRoute = Sentry.withSentryRouting(Route); +import { SentryRoute } from "components/SentryRoute"; export const MainPane = (props: { id: string }) => { const { path } = useRouteMatch(); diff --git a/app/client/src/pages/AppIDE/layouts/routers/QueryEditor/Editor.tsx b/app/client/src/pages/AppIDE/layouts/routers/QueryEditor/Editor.tsx index 08d371d5ac..b19758a21f 100644 --- a/app/client/src/pages/AppIDE/layouts/routers/QueryEditor/Editor.tsx +++ b/app/client/src/pages/AppIDE/layouts/routers/QueryEditor/Editor.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useRouteMatch } from "react-router"; import { Switch } from "react-router-dom"; import { QueryEditorRoutes } from "ee/pages/AppIDE/layouts/routers/QueryEditor/constants"; -import { SentryRoute } from "ee/AppRouter"; +import { SentryRoute } from "components/SentryRoute"; const QueryEditor = () => { const { path } = useRouteMatch(); diff --git a/app/client/src/pages/AppIDE/layouts/routers/RightPane.tsx b/app/client/src/pages/AppIDE/layouts/routers/RightPane.tsx index 6c185c3645..740440968f 100644 --- a/app/client/src/pages/AppIDE/layouts/routers/RightPane.tsx +++ b/app/client/src/pages/AppIDE/layouts/routers/RightPane.tsx @@ -9,7 +9,7 @@ import { WIDGETS_EDITOR_ID_PATH, } from "constants/routes"; import { useRouteMatch } from "react-router"; -import { SentryRoute } from "ee/AppRouter"; +import { SentryRoute } from "components/SentryRoute"; const RightPane = () => { const { path } = useRouteMatch(); diff --git a/app/client/src/pages/AppIDE/layouts/routers/UISegmentLeftPane/UISegmentLeftPane.tsx b/app/client/src/pages/AppIDE/layouts/routers/UISegmentLeftPane/UISegmentLeftPane.tsx index 32bb42133d..5b117e7019 100644 --- a/app/client/src/pages/AppIDE/layouts/routers/UISegmentLeftPane/UISegmentLeftPane.tsx +++ b/app/client/src/pages/AppIDE/layouts/routers/UISegmentLeftPane/UISegmentLeftPane.tsx @@ -1,8 +1,6 @@ import React from "react"; import { Flex } from "@appsmith/ads"; import { Switch, useRouteMatch } from "react-router"; - -import { SentryRoute } from "ee/AppRouter"; import { ADD_PATH, BUILDER_CUSTOM_PATH, @@ -19,6 +17,7 @@ import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; import { getHasManagePagePermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; import { DEFAULT_EXPLORER_PANE_WIDTH } from "constants/AppConstants"; +import { SentryRoute } from "components/SentryRoute"; const UISegment = () => { const { path } = useRouteMatch(); diff --git a/app/client/src/pages/Templates/index.tsx b/app/client/src/pages/Templates/index.tsx index ce56f23d30..a1cae7b922 100644 --- a/app/client/src/pages/Templates/index.tsx +++ b/app/client/src/pages/Templates/index.tsx @@ -1,5 +1,4 @@ import type { AppState } from "ee/reducers"; -import * as Sentry from "@sentry/react"; import { fetchDefaultPlugins } from "actions/pluginActions"; import { getAllTemplates, getTemplateFilters } from "actions/templateActions"; import { setHeaderMeta } from "actions/themeActions"; @@ -8,7 +7,7 @@ import { isEmpty } from "lodash"; import ReconnectDatasourceModal from "pages/Editor/gitSync/ReconnectDatasourceModal"; import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { Route, Switch, useRouteMatch } from "react-router-dom"; +import { Switch, useRouteMatch } from "react-router-dom"; import { allTemplatesFiltersSelector, getForkableWorkspaces, @@ -21,8 +20,7 @@ import TemplateFilters from "./TemplateFilters"; import { TemplateContent } from "./TemplateContent"; import TemplateView from "./TemplateView"; import { getFetchedWorkspaces } from "ee/selectors/workspaceSelectors"; - -const SentryRoute = Sentry.withSentryRouting(Route); +import { SentryRoute } from "components/SentryRoute"; const PageWrapper = styled.div` margin-top: ${(props) => props.theme.homePage.header}px; diff --git a/app/client/src/pages/UserAuth/index.tsx b/app/client/src/pages/UserAuth/index.tsx index f7d948ef3a..f6d2e20c1e 100644 --- a/app/client/src/pages/UserAuth/index.tsx +++ b/app/client/src/pages/UserAuth/index.tsx @@ -1,11 +1,10 @@ import React from "react"; -import { Route, Switch, useLocation, useRouteMatch } from "react-router-dom"; +import { Switch, useLocation, useRouteMatch } from "react-router-dom"; import Login from "pages/UserAuth/Login"; import SignUp from "pages/UserAuth/SignUp"; import ForgotPassword from "./ForgotPassword"; import ResetPassword from "./ResetPassword"; import PageNotFound from "pages/common/ErrorPages/PageNotFound"; -import * as Sentry from "@sentry/react"; import { requiresUnauth } from "./requiresAuthHOC"; import { useSelector } from "react-redux"; import { getThemeDetails, ThemeMode } from "selectors/themeSelectors"; @@ -19,8 +18,7 @@ import { useIsMobileDevice } from "utils/hooks/useDeviceDetect"; import { getAssetUrl } from "ee/utils/airgapHelpers"; import { getOrganizationConfig } from "ee/selectors/organizationSelectors"; import { getAppsmithConfigs } from "ee/configs"; - -const SentryRoute = Sentry.withSentryRouting(Route); +import { SentryRoute } from "components/SentryRoute"; export function UserAuth() { const { path } = useRouteMatch(); diff --git a/app/client/src/pages/workspace/index.tsx b/app/client/src/pages/workspace/index.tsx index 65ca0c24ac..04537f9e8f 100644 --- a/app/client/src/pages/workspace/index.tsx +++ b/app/client/src/pages/workspace/index.tsx @@ -1,10 +1,9 @@ import React from "react"; -import { Switch, useRouteMatch, useLocation, Route } from "react-router-dom"; +import { Switch, useRouteMatch, useLocation } from "react-router-dom"; import PageWrapper from "pages/common/PageWrapper"; import DefaultWorkspacePage from "./defaultWorkspacePage"; import Settings from "./settings"; -import * as Sentry from "@sentry/react"; -const SentryRoute = Sentry.withSentryRouting(Route); +import { SentryRoute } from "components/SentryRoute"; export function Workspace() { const { path } = useRouteMatch();