chore: Removing cyclic dependencies due to Sentry route (#39471)

## Description

Removing cyclic dependencies due to Sentry route by creating separate
component for it.

Fixes #

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13561152316>
> Commit: 321274cb457af80dc9fdf465ecdcf4f66f00ad92
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13561152316&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Thu, 27 Feb 2025 08:46:29 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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 = <PageLoadingBar />;
 

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);

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);

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

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();

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();

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();

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();

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();

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();

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();

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;

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();

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();