Feature/instrumentation

app/client/src/AppRouter.tsx

@@ -1,8 +1,7 @@
 import React, { Suspense } from "react";
 import history from "utils/history";
 import AppHeader from "pages/common/AppHeader";
-import { Redirect, Router, Switch } from "react-router-dom";
-import AppRoute from "pages/common/AppRoute";
+import { Redirect, Route, Router, Switch } from "react-router-dom";
 import {
   APP_VIEW_URL,
   APPLICATIONS_URL,
@@ -28,70 +27,81 @@ import Users from "pages/users";
 import PageNotFound from "pages/common/PageNotFound";
 import PageLoadingBar from "pages/common/PageLoadingBar";
 import ServerUnavailable from "pages/common/ServerUnavailable";
+import { getThemeDetails } from "selectors/themeSelectors";
+import { ThemeMode } from "reducers/uiReducers/themeReducer";
+import { AppState } from "reducers";
+import { setThemeMode } from "actions/themeActions";
+import { connect } from "react-redux";
+
+import * as Sentry from "@sentry/react";
+const SentryRoute = Sentry.withSentryRouting(Route);
 
 const loadingIndicator = <PageLoadingBar />;
 
+function changeAppBackground(currentTheme: any) {
+  if (
+    window.location.pathname === "/applications" ||
+    window.location.pathname.indexOf("/settings/") !== -1
+  ) {
+    document.body.style.backgroundColor =
+      currentTheme.colors.homepageBackground;
+  } else {
+    document.body.style.backgroundColor = currentTheme.colors.appBackground;
+  }
+}
+
 class AppRouter extends React.Component<any, any> {
   render() {
+    const { currentTheme } = this.props;
+    // This is needed for the theme switch.
+    changeAppBackground(currentTheme);
+    // This is needed for the route switch.
+    history.listen(() => {
+      changeAppBackground(currentTheme);
+    });
+
     return (
       <Router history={history}>
         <Suspense fallback={loadingIndicator}>
           <AppHeader />
           <Switch>
-            <AppRoute
-              exact
-              path={BASE_URL}
-              component={LandingScreen}
-              name={"App"}
-            />
+            <SentryRoute exact path={BASE_URL} component={LandingScreen} />
             <Redirect exact from={BASE_LOGIN_URL} to={AUTH_LOGIN_URL} />
             <Redirect exact from={BASE_SIGNUP_URL} to={SIGN_UP_URL} />
-            <AppRoute
-              path={ORG_URL}
-              component={OrganizationLoader}
-              name={"Organisation"}
-            />
-            <AppRoute exact path={USERS_URL} component={Users} name={"Users"} />
-            <AppRoute
-              path={USER_AUTH_URL}
-              component={UserAuth}
-              name={"UserAuth"}
-            />
-            <AppRoute
+            <SentryRoute path={ORG_URL} component={OrganizationLoader} />
+            <SentryRoute exact path={USERS_URL} component={Users} />
+            <SentryRoute path={USER_AUTH_URL} component={UserAuth} />
+            <SentryRoute
               exact
               path={APPLICATIONS_URL}
               component={ApplicationListLoader}
-              name={"Home"}
-            />
-            <AppRoute
-              path={BUILDER_URL}
-              component={EditorLoader}
-              name={"Editor"}
-            />
-            <AppRoute
-              path={APP_VIEW_URL}
-              component={AppViewerLoader}
-              name={"AppViewer"}
-              logDisable
             />
-            <AppRoute
+            <SentryRoute path={BUILDER_URL} component={EditorLoader} />
+            <SentryRoute path={APP_VIEW_URL} component={AppViewerLoader} />
+            <SentryRoute
               exact
               path={PAGE_NOT_FOUND_URL}
               component={PageNotFound}
-              name={"PageNotFound"}
             />
-            <AppRoute
+            <SentryRoute
               exact
               path={SERVER_ERROR_URL}
               component={ServerUnavailable}
-              name={"ServerError"}
             />
-            <AppRoute component={PageNotFound} name={"PageNotFound"} />
+            <SentryRoute component={PageNotFound} />
           </Switch>
         </Suspense>
       </Router>
     );
   }
 }
+const mapStateToProps = (state: AppState) => ({
+  currentTheme: getThemeDetails(state).theme,
+});
+const mapDispatchToProps = (dispatch: any) => ({
+  setTheme: (mode: ThemeMode) => {
+    dispatch(setThemeMode(mode));
+  },
+});
 
-export default AppRouter;
+export default connect(mapStateToProps, mapDispatchToProps)(AppRouter);

app/client/src/components/editorComponents/Sidebar.tsx

@@ -1,9 +1,12 @@
-import React, { memo } from "react";
+import React, { memo, useEffect } from "react";
 import styled from "styled-components";
 import ExplorerSidebar from "pages/Editor/Explorer";
 import { PanelStack, Classes } from "@blueprintjs/core";
 import { Colors } from "constants/Colors";
 import * as Sentry from "@sentry/react";
+import PerformanceTracker, {
+  PerformanceTransactionName,
+} from "utils/PerformanceTracker";
 
 const SidebarWrapper = styled.div`
   background-color: ${Colors.MINE_SHAFT};
@@ -24,6 +27,10 @@ const SidebarWrapper = styled.div`
 const initialPanel = { component: ExplorerSidebar };
 
 export const Sidebar = memo(() => {
+  PerformanceTracker.startTracking(PerformanceTransactionName.SIDE_BAR_MOUNT);
+  useEffect(() => {
+    PerformanceTracker.stopTracking();
+  });
   return (
     <SidebarWrapper className="t--sidebar">
       <PanelStack initialPanel={initialPanel} showPanelHeader={false} />

app/client/src/pages/AppViewer/index.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import styled from "styled-components";
 import { connect } from "react-redux";
-import { withRouter, RouteComponentProps } from "react-router";
+import { withRouter, RouteComponentProps, Route } from "react-router";
 import { Switch } from "react-router-dom";
 import { AppState } from "reducers";
 import {
@@ -21,9 +21,9 @@ import {
   resetChildrenMetaProperty,
   updateWidgetMetaProperty,
 } from "actions/metaActions";
-import AppRoute from "pages/common/AppRoute";
 import { editorInitializer } from "utils/EditorUtils";
 import * as Sentry from "@sentry/react";
+const SentryRoute = Sentry.withSentryRouting(Route);
 
 const AppViewerBody = styled.section`
   display: flex;
@@ -84,12 +84,10 @@ class AppViewer extends Component<
         <AppViewerBody>
           {isInitialized && this.state.registered && (
             <Switch>
-              <AppRoute
+              <SentryRoute
                 path={getApplicationViewerPageURL()}
                 exact
                 component={AppViewerPageContainer}
-                name={"AppViewerPageContainer"}
-                logDisable
               />
             </Switch>
           )}

app/client/src/pages/Editor/Explorer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, MutableRefObject, useCallback } from "react";
+import React, { useRef, MutableRefObject, useCallback, useEffect } from "react";
 import styled from "styled-components";
 import Divider from "components/editorComponents/Divider";
 import {
@@ -18,6 +18,9 @@ import history from "utils/history";
 import { useParams } from "react-router";
 import { ExplorerURLParams } from "./helpers";
 import JSDependencies from "./JSDependencies";
+import PerformanceTracker, {
+  PerformanceTransactionName,
+} from "utils/PerformanceTracker";
 
 const Wrapper = styled.div`
   height: 100%;
@@ -40,7 +43,10 @@ const EntityExplorer = (props: IPanelProps) => {
   const searchInputRef: MutableRefObject<HTMLInputElement | null> = useRef(
     null,
   );
-
+  PerformanceTracker.startTracking(PerformanceTransactionName.ENTITY_EXPLORER);
+  useEffect(() => {
+    PerformanceTracker.stopTracking();
+  });
   const explorerRef = useRef<HTMLDivElement | null>(null);
   const { searchKeyword, clearSearch } = useFilteredEntities(searchInputRef);
   const datasources = useFilteredDatasources(searchKeyword);

app/client/src/pages/Editor/MainContainer.tsx

@@ -3,10 +3,12 @@ import EditorsRouter from "./routes";
 import WidgetsEditor from "./WidgetsEditor";
 import styled from "styled-components";
 import Sidebar from "components/editorComponents/Sidebar";
-import { Switch } from "react-router";
-import AppRoute from "../common/AppRoute";
+import { Route, Switch } from "react-router";
 import { BUILDER_URL } from "constants/routes";
 
+import * as Sentry from "@sentry/react";
+const SentryRoute = Sentry.withSentryRouting(Route);
+
 const Container = styled.div`
   display: flex;
   height: calc(100vh - ${props => props.theme.headerHeight});
@@ -23,13 +25,8 @@ const MainContainer = () => {
       <Sidebar />
       <EditorContainer>
         <Switch>
-          <AppRoute
-            exact
-            path={BUILDER_URL}
-            component={WidgetsEditor}
-            name={"WidgetsEditor"}
-          />
-          <AppRoute component={EditorsRouter} name={"OtherEditors"} />
+          <SentryRoute exact path={BUILDER_URL} component={WidgetsEditor} />
+          <SentryRoute component={EditorsRouter} />
         </Switch>
       </EditorContainer>
     </Container>

app/client/src/pages/Editor/WidgetsEditor.tsx

@@ -49,9 +49,7 @@ const CanvasContainer = styled.section`
 
 /* eslint-disable react/display-name */
 const WidgetsEditor = () => {
-  PerformanceTracker.startTracking(
-    PerformanceTransactionName.GENERATE_WIDGET_EDITOR_PROPS,
-  );
+  PerformanceTracker.startTracking(PerformanceTransactionName.EDITOR_MOUNT);
   const { focusWidget, selectWidget } = useWidgetSelection();
   const params = useParams<{ applicationId: string; pageId: string }>();
   const dispatch = useDispatch();
@@ -62,6 +60,7 @@ const WidgetsEditor = () => {
   const currentPageName = useSelector(getCurrentPageName);
 
   useEffect(() => {
+    PerformanceTracker.stopTracking(PerformanceTransactionName.EDITOR_MOUNT);
     PerformanceTracker.stopTracking(PerformanceTransactionName.CLOSE_API);
   });
 
@@ -111,7 +110,6 @@ const WidgetsEditor = () => {
     node = <Canvas dsl={widgets} />;
   }
   log.debug("Canvas rendered");
-  PerformanceTracker.stopTracking();
   return (
     <EditorContextProvider>
       <EditorWrapper onClick={handleWrapperClick}>

app/client/src/pages/Editor/routes.tsx

@@ -1,5 +1,10 @@
 import React, { useEffect, ReactNode } from "react";
-import { Switch, withRouter, RouteComponentProps } from "react-router-dom";
+import {
+  Switch,
+  withRouter,
+  RouteComponentProps,
+  Route,
+} from "react-router-dom";
 import ApiEditor from "./APIEditor";
 import QueryEditor from "./QueryEditor";
 import DataSourceEditor from "./DataSourceEditor";
@@ -21,7 +26,6 @@ import {
   getProviderTemplatesURL,
 } from "constants/routes";
 import styled from "styled-components";
-import AppRoute from "pages/common/AppRoute";
 import {
   useShowPropertyPane,
   useWidgetSelection,
@@ -32,6 +36,9 @@ import PerformanceTracker, {
   PerformanceTransactionName,
 } from "utils/PerformanceTracker";
 
+import * as Sentry from "@sentry/react";
+const SentryRoute = Sentry.withSentryRouting(Route);
+
 const Wrapper = styled.div<{ isVisible: boolean }>`
   position: absolute;
   top: 0;
@@ -102,60 +109,47 @@ class EditorsRouter extends React.Component<
           onClick={this.preventClose}
         >
           <Switch>
-            <AppRoute
-              exact
-              path={API_EDITOR_URL()}
-              component={ApiEditor}
-              name={"ApiEditor"}
-            />
-            <AppRoute
+            <SentryRoute exact path={API_EDITOR_URL()} component={ApiEditor} />
+            <SentryRoute
               exact
               path={API_EDITOR_ID_URL()}
               component={ApiEditor}
-              name={"ApiEditor"}
             />
-            <AppRoute
+            <SentryRoute
               exact
               path={API_EDITOR_URL_WITH_SELECTED_PAGE_ID()}
               component={ApiEditor}
-              name={"ApiEditor"}
             />
-            <AppRoute
+            <SentryRoute
               exact
               path={QUERIES_EDITOR_URL()}
               component={QueryEditor}
-              name={"QueryEditor"}
             />
-            <AppRoute
+            <SentryRoute
               exact
               path={QUERIES_EDITOR_ID_URL()}
               component={QueryEditor}
-              name={"QueryEditor"}
             />
 
-            <AppRoute
+            <SentryRoute
               exact
               path={getCurlImportPageURL()}
               component={CurlImportForm}
-              name={"ApiEditor"}
             />
-            <AppRoute
+            <SentryRoute
               exact
               path={DATA_SOURCES_EDITOR_URL()}
               component={DataSourceEditor}
-              name={"DataSourceEditor"}
             />
-            <AppRoute
+            <SentryRoute
               exact
               path={DATA_SOURCES_EDITOR_ID_URL()}
               component={DataSourceEditor}
-              name={"DataSourceEditor"}
             />
-            <AppRoute
+            <SentryRoute
               exact
               path={getProviderTemplatesURL()}
               component={ProviderTemplates}
-              name={"ApiEditor"}
             />
           </Switch>
         </PaneDrawer>