Updated sentry sdk (#461)

Integrated react router for better performance reporting
Added Sentry Profiler for editor, appviewer and widgets

Co-authored-by: Nikhil Nandagopal <nikhil@appsmith.com>

app/client/package.json

@@ -16,8 +16,8 @@
     "@craco/craco": "^5.6.1",
     "@manaflair/redux-batch": "^1.0.0",
     "@optimizely/optimizely-sdk": "^4.0.0",
-    "@sentry/react": "^5.22.0",
+    "@sentry/react": "^5.22.2",
-    "@sentry/tracing": "^5.22.0",
+    "@sentry/tracing": "^5.22.2",
     "@sentry/webpack-plugin": "^1.12.1",
     "@types/chance": "^1.0.7",
     "@types/lodash": "^4.14.120",

app/client/src/configs/index.ts

@@ -1,5 +1,8 @@
 import { AppsmithUIConfigs, FeatureFlagConfig } from "./types";
 import { Integrations } from "@sentry/tracing";
+import * as Sentry from "@sentry/react";
+import { createBrowserHistory } from "history";
+const history = createBrowserHistory();
 
 type INJECTED_CONFIGS = {
   sentry: {
@@ -168,7 +171,12 @@ export const getAppsmithConfigs = (): AppsmithUIConfigs => {
       dsn: sentryDSN.value,
       release: sentryRelease.value,
       environment: sentryENV.value,
-      integrations: [new Integrations.BrowserTracing()],
+      integrations: [
+        new Integrations.BrowserTracing({
+          // Can also use reactRouterV4Instrumentation
+          routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
+        }),
+      ],
       tracesSampleRate: 1.0,
     },
     smartLook: {

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

@@ -23,6 +23,7 @@ import {
 } from "actions/metaActions";
 import AppRoute from "pages/common/AppRoute";
 import { editorInitializer } from "utils/EditorUtils";
+import * as Sentry from "@sentry/react";
 
 const AppViewerBody = styled.section`
   display: flex;
@@ -134,5 +135,5 @@ const mapDispatchToProps = (dispatch: any) => ({
 });
 
 export default withRouter(
-  connect(mapStateToProps, mapDispatchToProps)(AppViewer),
+  connect(mapStateToProps, mapDispatchToProps)(Sentry.withProfiler(AppViewer)),
 );

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

@@ -40,6 +40,7 @@ import { getAppsmithConfigs } from "configs";
 import { getCurrentUser } from "selectors/usersSelectors";
 import { User } from "constants/userConstants";
 import ConfirmRunModal from "pages/Editor/ConfirmRunModal";
+import * as Sentry from "@sentry/react";
 
 const { cloudHosting, intercomAppID } = getAppsmithConfigs();
 
@@ -216,4 +217,6 @@ const mapDispatchToProps = (dispatch: any) => {
   };
 };
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Editor));
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(Sentry.withProfiler(Editor)),
+);

app/client/src/pages/common/AppRoute.tsx

@@ -1,6 +1,9 @@
 import React, { useEffect } from "react";
 import { Route } from "react-router-dom";
 import AnalyticsUtil from "utils/AnalyticsUtil";
+import * as Sentry from "@sentry/react";
+
+const SentryRoute = Sentry.withSentryRouting(Route);
 
 const AppRoute = ({
   component: Component,
@@ -22,7 +25,7 @@ const AppRoute = ({
     }
   }, [rest.name, rest.logDisable, rest.location.pathname]);
   return (
-    <Route
+    <SentryRoute
       {...rest}
       render={props => {
         return <Component {...props}></Component>;

app/client/src/utils/WidgetRegistry.tsx

@@ -1,42 +1,81 @@
 import BaseWidget, { WidgetProps } from "widgets/BaseWidget";
 import { WidgetTypes } from "constants/WidgetConstants";
-import ContainerWidget, { ContainerWidgetProps } from "widgets/ContainerWidget";
+import ContainerWidget, {
-import TextWidget, { TextWidgetProps } from "widgets/TextWidget";
+  ContainerWidgetProps,
-import InputWidget, { InputWidgetProps } from "widgets/InputWidget";
+  ProfiledContainerWidget,
-import CheckboxWidget, { CheckboxWidgetProps } from "widgets/CheckboxWidget";
+} from "widgets/ContainerWidget";
+import TextWidget, {
+  TextWidgetProps,
+  ProfiledTextWidget,
+} from "widgets/TextWidget";
+import InputWidget, {
+  InputWidgetProps,
+  ProfiledInputWidget,
+} from "widgets/InputWidget";
+import CheckboxWidget, {
+  CheckboxWidgetProps,
+  ProfiledCheckboxWidget,
+} from "widgets/CheckboxWidget";
 import RadioGroupWidget, {
   RadioGroupWidgetProps,
+  ProfiledRadioGroupWidget,
 } from "widgets/RadioGroupWidget";
 import WidgetFactory from "./WidgetFactory";
 import React from "react";
-import ButtonWidget, { ButtonWidgetProps } from "widgets/ButtonWidget";
+import ButtonWidget, {
-import DropdownWidget, { DropdownWidgetProps } from "widgets/DropdownWidget";
+  ButtonWidgetProps,
-import ImageWidget, { ImageWidgetProps } from "widgets/ImageWidget";
+  ProfiledButtonWidget,
-import TableWidget, { TableWidgetProps } from "widgets/TableWidget";
+} from "widgets/ButtonWidget";
+import DropdownWidget, {
+  DropdownWidgetProps,
+  ProfiledDropDownWidget,
+} from "widgets/DropdownWidget";
+import ImageWidget, {
+  ImageWidgetProps,
+  ProfiledImageWidget,
+} from "widgets/ImageWidget";
+import TableWidget, {
+  TableWidgetProps,
+  ProfiledTableWidget,
+} from "widgets/TableWidget";
 import TabsWidget, {
   TabsWidgetProps,
   TabContainerWidgetProps,
+  ProfiledTabsWidget,
 } from "widgets/TabsWidget";
-import ModalWidget, { ModalWidgetProps } from "widgets/ModalWidget";
+import { ModalWidgetProps, ProfiledModalWidget } from "widgets/ModalWidget";
 import RichTextEditorWidget, {
   RichTextEditorWidgetProps,
+  ProfiledRichTextEditorWidget,
 } from "widgets/RichTextEditorWidget";
-import ChartWidget, { ChartWidgetProps } from "widgets/ChartWidget";
+import ChartWidget, {
-import MapWidget, { MapWidgetProps } from "widgets/MapWidget";
+  ChartWidgetProps,
+  ProfiledChartWidget,
+} from "widgets/ChartWidget";
+import MapWidget, {
+  MapWidgetProps,
+  ProfiledMapWidget,
+} from "widgets/MapWidget";
 
 import FilePickerWidget, {
   FilePickerWidgetProps,
+  ProfiledFilePickerWidget,
 } from "widgets/FilepickerWidget";
 import DatePickerWidget, {
   DatePickerWidgetProps,
+  ProfiledDatePickerWidget,
 } from "widgets/DatePickerWidget";
-import FormWidget from "widgets/FormWidget";
+import FormWidget, { ProfiledFormWidget } from "widgets/FormWidget";
 import FormButtonWidget, {
   FormButtonWidgetProps,
+  ProfiledFormButtonWidget,
 } from "widgets/FormButtonWidget";
-import IconWidget, { IconWidgetProps } from "widgets/IconWidget";
+import IconWidget, {
+  IconWidgetProps,
+  ProfiledIconWidget,
+} from "widgets/IconWidget";
 
-import CanvasWidget from "widgets/CanvasWidget";
+import CanvasWidget, { ProfiledCanvasWidget } from "widgets/CanvasWidget";
 export default class WidgetBuilderRegistry {
   static registerWidgetBuilders() {
     WidgetFactory.registerWidgetBuilder(
@@ -45,7 +84,7 @@ export default class WidgetBuilderRegistry {
         buildWidget(
           widgetData: ContainerWidgetProps<WidgetProps>,
         ): JSX.Element {
-          return <ContainerWidget {...widgetData} />;
+          return <ProfiledContainerWidget {...widgetData} />;
         },
       },
       ContainerWidget.getPropertyValidationMap(),
@@ -59,7 +98,7 @@ export default class WidgetBuilderRegistry {
       "TEXT_WIDGET",
       {
         buildWidget(widgetData: TextWidgetProps): JSX.Element {
-          return <TextWidget {...widgetData} />;
+          return <ProfiledTextWidget {...widgetData} />;
         },
       },
       TextWidget.getPropertyValidationMap(),
@@ -73,7 +112,7 @@ export default class WidgetBuilderRegistry {
       "BUTTON_WIDGET",
       {
         buildWidget(widgetData: ButtonWidgetProps): JSX.Element {
-          return <ButtonWidget {...widgetData} />;
+          return <ProfiledButtonWidget {...widgetData} />;
         },
       },
       ButtonWidget.getPropertyValidationMap(),
@@ -87,7 +126,7 @@ export default class WidgetBuilderRegistry {
       "INPUT_WIDGET",
       {
         buildWidget(widgetData: InputWidgetProps): JSX.Element {
-          return <InputWidget {...widgetData} />;
+          return <ProfiledInputWidget {...widgetData} />;
         },
       },
       InputWidget.getPropertyValidationMap(),
@@ -101,7 +140,7 @@ export default class WidgetBuilderRegistry {
       "CHECKBOX_WIDGET",
       {
         buildWidget(widgetData: CheckboxWidgetProps): JSX.Element {
-          return <CheckboxWidget {...widgetData} />;
+          return <ProfiledCheckboxWidget {...widgetData} />;
         },
       },
       CheckboxWidget.getPropertyValidationMap(),
@@ -115,7 +154,7 @@ export default class WidgetBuilderRegistry {
       "DROP_DOWN_WIDGET",
       {
         buildWidget(widgetData: DropdownWidgetProps): JSX.Element {
-          return <DropdownWidget {...widgetData} />;
+          return <ProfiledDropDownWidget {...widgetData} />;
         },
       },
       DropdownWidget.getPropertyValidationMap(),
@@ -129,7 +168,7 @@ export default class WidgetBuilderRegistry {
       "RADIO_GROUP_WIDGET",
       {
         buildWidget(widgetData: RadioGroupWidgetProps): JSX.Element {
-          return <RadioGroupWidget {...widgetData} />;
+          return <ProfiledRadioGroupWidget {...widgetData} />;
         },
       },
       RadioGroupWidget.getPropertyValidationMap(),
@@ -143,7 +182,7 @@ export default class WidgetBuilderRegistry {
       "IMAGE_WIDGET",
       {
         buildWidget(widgetData: ImageWidgetProps): JSX.Element {
-          return <ImageWidget {...widgetData} />;
+          return <ProfiledImageWidget {...widgetData} />;
         },
       },
       ImageWidget.getPropertyValidationMap(),
@@ -156,7 +195,7 @@ export default class WidgetBuilderRegistry {
       "TABLE_WIDGET",
       {
         buildWidget(widgetData: TableWidgetProps): JSX.Element {
-          return <TableWidget {...widgetData} />;
+          return <ProfiledTableWidget {...widgetData} />;
         },
       },
       TableWidget.getPropertyValidationMap(),
@@ -169,7 +208,7 @@ export default class WidgetBuilderRegistry {
       "FILE_PICKER_WIDGET",
       {
         buildWidget(widgetData: FilePickerWidgetProps): JSX.Element {
-          return <FilePickerWidget {...widgetData} />;
+          return <ProfiledFilePickerWidget {...widgetData} />;
         },
       },
       FilePickerWidget.getPropertyValidationMap(),
@@ -182,7 +221,7 @@ export default class WidgetBuilderRegistry {
       "DATE_PICKER_WIDGET",
       {
         buildWidget(widgetData: DatePickerWidgetProps): JSX.Element {
-          return <DatePickerWidget {...widgetData} />;
+          return <ProfiledDatePickerWidget {...widgetData} />;
         },
       },
       DatePickerWidget.getPropertyValidationMap(),
@@ -197,7 +236,7 @@ export default class WidgetBuilderRegistry {
         buildWidget(
           widgetProps: TabsWidgetProps<TabContainerWidgetProps>,
         ): JSX.Element {
-          return <TabsWidget {...widgetProps} />;
+          return <ProfiledTabsWidget {...widgetProps} />;
         },
       },
       TabsWidget.getPropertyValidationMap(),
@@ -210,7 +249,7 @@ export default class WidgetBuilderRegistry {
       WidgetTypes.MODAL_WIDGET,
       {
         buildWidget(widgetProps: ModalWidgetProps): JSX.Element {
-          return <ModalWidget {...widgetProps} />;
+          return <ProfiledModalWidget {...widgetProps} />;
         },
       },
       BaseWidget.getPropertyValidationMap(),
@@ -223,7 +262,7 @@ export default class WidgetBuilderRegistry {
       "RICH_TEXT_EDITOR_WIDGET",
       {
         buildWidget(widgetData: RichTextEditorWidgetProps): JSX.Element {
-          return <RichTextEditorWidget {...widgetData} />;
+          return <ProfiledRichTextEditorWidget {...widgetData} />;
         },
       },
       RichTextEditorWidget.getPropertyValidationMap(),
@@ -236,7 +275,7 @@ export default class WidgetBuilderRegistry {
       "CHART_WIDGET",
       {
         buildWidget(widgetData: ChartWidgetProps): JSX.Element {
-          return <ChartWidget {...widgetData} />;
+          return <ProfiledChartWidget {...widgetData} />;
         },
       },
       ChartWidget.getPropertyValidationMap(),
@@ -251,7 +290,7 @@ export default class WidgetBuilderRegistry {
         buildWidget(
           widgetProps: ContainerWidgetProps<WidgetProps>,
         ): JSX.Element {
-          return <FormWidget {...widgetProps} />;
+          return <ProfiledFormWidget {...widgetProps} />;
         },
       },
       FormWidget.getPropertyValidationMap(),
@@ -265,7 +304,7 @@ export default class WidgetBuilderRegistry {
       "FORM_BUTTON_WIDGET",
       {
         buildWidget(widgetProps: FormButtonWidgetProps): JSX.Element {
-          return <FormButtonWidget {...widgetProps} />;
+          return <ProfiledFormButtonWidget {...widgetProps} />;
         },
       },
       FormButtonWidget.getPropertyValidationMap(),
@@ -279,7 +318,7 @@ export default class WidgetBuilderRegistry {
       "MAP_WIDGET",
       {
         buildWidget(widgetProps: MapWidgetProps): JSX.Element {
-          return <MapWidget {...widgetProps} />;
+          return <ProfiledMapWidget {...widgetProps} />;
         },
       },
       MapWidget.getPropertyValidationMap(),
@@ -295,7 +334,7 @@ export default class WidgetBuilderRegistry {
         buildWidget(
           widgetData: ContainerWidgetProps<WidgetProps>,
         ): JSX.Element {
-          return <CanvasWidget {...widgetData} />;
+          return <ProfiledCanvasWidget {...widgetData} />;
         },
       },
       CanvasWidget.getPropertyValidationMap(),
@@ -309,7 +348,7 @@ export default class WidgetBuilderRegistry {
       WidgetTypes.ICON_WIDGET,
       {
         buildWidget(widgetProps: IconWidgetProps): JSX.Element {
-          return <IconWidget {...widgetProps} />;
+          return <ProfiledIconWidget {...widgetProps} />;
         },
       },
       IconWidget.getPropertyValidationMap(),

app/client/src/widgets/ButtonWidget.tsx

@@ -11,6 +11,7 @@ import {
 } from "utils/ValidationFactory";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
+import * as Sentry from "@sentry/react";
 
 class ButtonWidget extends BaseWidget<ButtonWidgetProps, ButtonWidgetState> {
   onButtonClickBound: (event: React.MouseEvent<HTMLElement>) => void;
@@ -100,3 +101,4 @@ interface ButtonWidgetState extends WidgetState {
 }
 
 export default ButtonWidget;
+export const ProfiledButtonWidget = Sentry.withProfiler(ButtonWidget);

app/client/src/widgets/CanvasWidget.tsx

@@ -5,6 +5,7 @@ import { WidgetTypes, GridDefaults } from "constants/WidgetConstants";
 import DropTargetComponent from "components/editorComponents/DropTargetComponent";
 import { getCanvasSnapRows } from "utils/WidgetPropsUtils";
 import { getCanvasClassName } from "utils/generators";
+import * as Sentry from "@sentry/react";
 
 class CanvasWidget extends ContainerWidget {
   getWidgetType = () => {
@@ -61,3 +62,4 @@ class CanvasWidget extends ContainerWidget {
 }
 
 export default CanvasWidget;
+export const ProfiledCanvasWidget = Sentry.withProfiler(CanvasWidget);

app/client/src/widgets/ChartWidget.tsx

@@ -4,6 +4,7 @@ import { WidgetType } from "constants/WidgetConstants";
 import { WidgetPropertyValidationType } from "utils/ValidationFactory";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import Skeleton from "components/utils/Skeleton";
+import * as Sentry from "@sentry/react";
 
 const ChartComponent = lazy(() =>
   import(
@@ -74,3 +75,4 @@ export interface ChartWidgetProps extends WidgetProps {
 }
 
 export default ChartWidget;
+export const ProfiledChartWidget = Sentry.withProfiler(ChartWidget);

app/client/src/widgets/CheckboxWidget.tsx

@@ -12,6 +12,7 @@ import {
   TriggerPropertiesMap,
   DerivedPropertiesMap,
 } from "utils/WidgetFactory";
+import * as Sentry from "@sentry/react";
 
 class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
@@ -87,3 +88,4 @@ export interface CheckboxWidgetProps extends WidgetProps {
 }
 
 export default CheckboxWidget;
+export const ProfiledCheckboxWidget = Sentry.withProfiler(CheckboxWidget);

app/client/src/widgets/ContainerWidget.tsx

@@ -13,6 +13,7 @@ import {
 } from "constants/WidgetConstants";
 
 import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import * as Sentry from "@sentry/react";
 
 class ContainerWidget extends BaseWidget<
   ContainerWidgetProps<WidgetProps>,
@@ -98,3 +99,4 @@ export interface ContainerWidgetProps<T extends WidgetProps>
 }
 
 export default ContainerWidget;
+export const ProfiledContainerWidget = Sentry.withProfiler(ContainerWidget);

app/client/src/widgets/DatePickerWidget.tsx

@@ -12,6 +12,7 @@ import {
   DerivedPropertiesMap,
   TriggerPropertiesMap,
 } from "utils/WidgetFactory";
+import * as Sentry from "@sentry/react";
 
 class DatePickerWidget extends BaseWidget<DatePickerWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
@@ -105,3 +106,4 @@ export interface DatePickerWidgetProps extends WidgetProps {
 }
 
 export default DatePickerWidget;
+export const ProfiledDatePickerWidget = Sentry.withProfiler(DatePickerWidget);

app/client/src/widgets/DropdownWidget.tsx

@@ -13,6 +13,7 @@ import { TriggerPropertiesMap } from "utils/WidgetFactory";
 import { VALIDATORS } from "utils/Validators";
 import { DataTree } from "entities/DataTree/dataTreeFactory";
 import { Intent as BlueprintIntent } from "@blueprintjs/core";
+import * as Sentry from "@sentry/react";
 
 class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
@@ -207,3 +208,4 @@ export interface DropdownWidgetProps extends WidgetProps {
 }
 
 export default DropdownWidget;
+export const ProfiledDropDownWidget = Sentry.withProfiler(DropdownWidget);

app/client/src/widgets/FilepickerWidget.tsx

@@ -20,6 +20,7 @@ import {
 import Dashboard from "@uppy/dashboard";
 import shallowequal from "shallowequal";
 import _ from "lodash";
+import * as Sentry from "@sentry/react";
 
 class FilePickerWidget extends BaseWidget<
   FilePickerWidgetProps,
@@ -231,3 +232,4 @@ export interface FilePickerWidgetProps extends WidgetProps {
 }
 
 export default FilePickerWidget;
+export const ProfiledFilePickerWidget = Sentry.withProfiler(FilePickerWidget);

app/client/src/widgets/FormButtonWidget.tsx

@@ -11,6 +11,7 @@ import {
 } from "utils/ValidationFactory";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
+import * as Sentry from "@sentry/react";
 
 class FormButtonWidget extends BaseWidget<
   FormButtonWidgetProps,
@@ -119,3 +120,4 @@ export interface FormButtonWidgetState extends WidgetState {
 }
 
 export default FormButtonWidget;
+export const ProfiledFormButtonWidget = Sentry.withProfiler(FormButtonWidget);

app/client/src/widgets/FormWidget.tsx

@@ -5,6 +5,7 @@ import { WidgetType } from "constants/WidgetConstants";
 import ContainerWidget, { ContainerWidgetProps } from "widgets/ContainerWidget";
 import { ContainerComponentProps } from "components/designSystems/appsmith/ContainerComponent";
 import shallowEqual from "shallowequal";
+import * as Sentry from "@sentry/react";
 
 class FormWidget extends ContainerWidget {
   checkInvalidChildren = (children: WidgetProps[]): boolean => {
@@ -72,3 +73,4 @@ export interface FormWidgetProps extends ContainerComponentProps {
 }
 
 export default FormWidget;
+export const ProfiledFormWidget = Sentry.withProfiler(FormWidget);

app/client/src/widgets/IconWidget.tsx

@@ -7,6 +7,7 @@ import IconComponent, {
   IconType,
 } from "components/designSystems/appsmith/IconComponent";
 import { EventType, ExecutionResult } from "constants/ActionConstants";
+import * as Sentry from "@sentry/react";
 
 const IconWrapper = styled.div`
   display: flex;
@@ -69,3 +70,4 @@ export interface IconWidgetProps extends WidgetProps {
 }
 
 export default IconWidget;
+export const ProfiledIconWidget = Sentry.withProfiler(IconWidget);

app/client/src/widgets/ImageWidget.tsx

@@ -7,6 +7,7 @@ import {
   BASE_WIDGET_VALIDATION,
 } from "utils/ValidationFactory";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
+import * as Sentry from "@sentry/react";
 
 class ImageWidget extends BaseWidget<ImageWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
@@ -42,3 +43,4 @@ export interface ImageWidgetProps extends WidgetProps {
 }
 
 export default ImageWidget;
+export const ProfiledImageWidget = Sentry.withProfiler(ImageWidget);

app/client/src/widgets/InputWidget.tsx

@@ -16,6 +16,7 @@ import {
   TriggerPropertiesMap,
 } from "utils/WidgetFactory";
 import _ from "lodash";
+import * as Sentry from "@sentry/react";
 
 class InputWidget extends BaseWidget<InputWidgetProps, InputWidgetState> {
   debouncedHandleTextChanged = _.debounce(
@@ -221,3 +222,4 @@ interface InputWidgetState extends WidgetState {
 }
 
 export default InputWidget;
+export const ProfiledInputWidget = Sentry.withProfiler(InputWidget);

app/client/src/widgets/MapWidget.tsx

@@ -8,6 +8,7 @@ import { EventType } from "constants/ActionConstants";
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
 import { getAppsmithConfigs } from "configs";
 import styled from "styled-components";
+import * as Sentry from "@sentry/react";
 
 const { google } = getAppsmithConfigs();
 
@@ -198,3 +199,4 @@ export interface MapWidgetProps extends WidgetProps {
 }
 
 export default MapWidget;
+export const ProfiledMapWidget = Sentry.withProfiler(MapWidget);

app/client/src/widgets/ModalWidget.tsx

@@ -11,6 +11,7 @@ import {
   GridDefaults,
 } from "constants/WidgetConstants";
 import { generateClassName } from "utils/generators";
+import * as Sentry from "@sentry/react";
 
 const MODAL_SIZE: { [id: string]: { width: number; height: number } } = {
   MODAL_SMALL: {
@@ -126,5 +127,8 @@ const mapDispatchToProps = (dispatch: any) => ({
     });
   },
 });
-
+export default ModalWidget;
-export default connect(null, mapDispatchToProps)(ModalWidget);
+export const ProfiledModalWidget = connect(
+  null,
+  mapDispatchToProps,
+)(Sentry.withProfiler(ModalWidget));

app/client/src/widgets/RadioGroupWidget.tsx

@@ -9,6 +9,7 @@ import {
 } from "utils/ValidationFactory";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
+import * as Sentry from "@sentry/react";
 
 class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
@@ -96,3 +97,4 @@ export interface RadioGroupWidgetProps extends WidgetProps {
 }
 
 export default RadioGroupWidget;
+export const ProfiledRadioGroupWidget = Sentry.withProfiler(RadioGroupWidget);

app/client/src/widgets/RichTextEditorWidget.tsx

@@ -9,6 +9,7 @@ import {
   DerivedPropertiesMap,
 } from "utils/WidgetFactory";
 import Skeleton from "components/utils/Skeleton";
+import * as Sentry from "@sentry/react";
 
 const RichtextEditorComponent = lazy(() =>
   import(
@@ -103,3 +104,6 @@ export interface RichTextEditorWidgetProps extends WidgetProps {
 }
 
 export default RichTextEditorWidget;
+export const ProfiledRichTextEditorWidget = Sentry.withProfiler(
+  RichTextEditorWidget,
+);

app/client/src/widgets/TableWidget.tsx

@@ -21,6 +21,7 @@ import { ColumnAction } from "components/propertyControls/ColumnActionSelectorCo
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
 import Skeleton from "components/utils/Skeleton";
 import moment from "moment";
+import * as Sentry from "@sentry/react";
 const ReactTableComponent = lazy(() =>
   import("components/designSystems/appsmith/ReactTableComponent"),
 );
@@ -612,3 +613,4 @@ export interface TableWidgetProps extends WidgetProps {
 }
 
 export default TableWidget;
+export const ProfiledTableWidget = Sentry.withProfiler(TableWidget);

app/client/src/widgets/TabsWidget.tsx

@@ -9,6 +9,7 @@ import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import _ from "lodash";
 import { EventType } from "constants/ActionConstants";
 import { WidgetOperations } from "widgets/BaseWidget";
+import * as Sentry from "@sentry/react";
 
 class TabsWidget extends BaseWidget<
   TabsWidgetProps<TabContainerWidgetProps>,
@@ -217,3 +218,4 @@ export interface TabsWidgetProps<T extends TabContainerWidgetProps>
 }
 
 export default TabsWidget;
+export const ProfiledTabsWidget = Sentry.withProfiler(TabsWidget);

app/client/src/widgets/TextWidget.tsx

@@ -8,6 +8,7 @@ import {
   BASE_WIDGET_VALIDATION,
 } from "utils/ValidationFactory";
 import { DerivedPropertiesMap } from "utils/WidgetFactory";
+import * as Sentry from "@sentry/react";
 
 const LINE_HEIGHTS: { [key in TextStyle]: number } = {
   // The following values are arrived at by multiplying line-height with font-size
@@ -72,3 +73,4 @@ export interface TextWidgetProps extends WidgetProps {
 }
 
 export default TextWidget;
+export const ProfiledTextWidget = Sentry.withProfiler(TextWidget);

app/client/yarn.lock

@@ -2719,14 +2719,14 @@
   dependencies:
     any-observable "^0.3.0"
 
-"@sentry/browser@5.22.0":
+"@sentry/browser@5.22.2":
-  version "5.22.0"
+  version "5.22.2"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.22.0.tgz#d019fddbd885a1b735436b573067e79c81909043"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.22.2.tgz#c37c61c8612a169059ddcd8c08cd09441da7776c"
-  integrity sha512-+wsMegqvhdC4H/qlKvGFvYff9VIztENBiTHsSXqOHTFuVeQgyESbeHsJae2Fm4kuYDUtpAmUoIZe7cwwbPJNew==
+  integrity sha512-kkNRFMcNErtWvz9WI0bG5Va2W+mRWhk5CxaJKWUMdMcGR2rIrl3D+kcMdpYDi9tNYPHUdUzTCb3vJQfO8o6TbA==
   dependencies:
-    "@sentry/core" "5.22.0"
+    "@sentry/core" "5.22.2"
-    "@sentry/types" "5.22.0"
+    "@sentry/types" "5.22.2"
-    "@sentry/utils" "5.22.0"
+    "@sentry/utils" "5.22.2"
     tslib "^1.9.3"
 
 "@sentry/cli@^1.55.0":
@@ -2740,69 +2740,69 @@
     progress "^2.0.3"
     proxy-from-env "^1.1.0"
 
-"@sentry/core@5.22.0":
+"@sentry/core@5.22.2":
-  version "5.22.0"
+  version "5.22.2"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.22.0.tgz#2fa51c9f547e8b6d7ec820419c7880635f8648a5"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.22.2.tgz#3b57300d92c13163c26174311ad82482a08b9266"
-  integrity sha512-VV9qbjHDlfmpwEi59xS3GN2Fz0tsxKCB4rTqqUpvsM5BCOxV162Q0f3MCwP1nBRSk5DnOvKuTiNAWg7b3kpX+g==
+  integrity sha512-Tj3FlHiqK8uveKh56QP3PhNNrH13LTWqN1TwRwE2B2FLiqwIHGmJsCQNfyslQdBAkNeGRnnQrQxqH53KeuJGGA==
   dependencies:
-    "@sentry/hub" "5.22.0"
+    "@sentry/hub" "5.22.2"
-    "@sentry/minimal" "5.22.0"
+    "@sentry/minimal" "5.22.2"
-    "@sentry/types" "5.22.0"
+    "@sentry/types" "5.22.2"
-    "@sentry/utils" "5.22.0"
+    "@sentry/utils" "5.22.2"
     tslib "^1.9.3"
 
-"@sentry/hub@5.22.0":
+"@sentry/hub@5.22.2":
-  version "5.22.0"
+  version "5.22.2"
-  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.22.0.tgz#b2bf2e99c9bd752605c63b606ab11431909ebe87"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.22.2.tgz#812c8250970e44c63ee2bf1f779777d32dd88f54"
-  integrity sha512-OuKaEGsreQxHCKXcyQipygYxBD17PaBH0vqzDWl3d+/ydZbhpl0e5kjeHviJiZ6JWZ2cIZFvAzfvNVQoymF8BQ==
+  integrity sha512-6McBsonfpOY5hzlowzDfdLZklFQ1wWTGtiA0eByKxS/H1GePJc+UUSsu6D3bZJG0bIjFoq5vxLQFSZq6C7BPlQ==
   dependencies:
-    "@sentry/types" "5.22.0"
+    "@sentry/types" "5.22.2"
-    "@sentry/utils" "5.22.0"
+    "@sentry/utils" "5.22.2"
     tslib "^1.9.3"
 
-"@sentry/minimal@5.22.0":
+"@sentry/minimal@5.22.2":
-  version "5.22.0"
+  version "5.22.2"
-  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.22.0.tgz#7e24625a84af37ef2d2317f6f691dab27ff2ca02"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.22.2.tgz#bb050a49158c48596094184cff2806ce8cb63c9d"
-  integrity sha512-iq7wPxVdPCOS2gDw3PENO66wOfMv6mq+Nup7EmTteKtO7CUVqVFIXjXZYBHMG49sZWMCT+ZsPI/a9xCDaJytBQ==
+  integrity sha512-jfth6bY19FXE/kQc6hLBCKg5CjfX1MG+weyEXnPFstCb5JFMvSt6YPRI3OsY1hG3rQLxTX0mVSbe2YrBJE5kXA==
   dependencies:
-    "@sentry/hub" "5.22.0"
+    "@sentry/hub" "5.22.2"
-    "@sentry/types" "5.22.0"
+    "@sentry/types" "5.22.2"
     tslib "^1.9.3"
 
-"@sentry/react@^5.22.0":
+"@sentry/react@^5.22.2":
-  version "5.22.0"
+  version "5.22.2"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-5.22.0.tgz#d1b312035f21302ce6877d62b83d12c793275043"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-5.22.2.tgz#8a0f9ee475659faf780080569ca7c7c5cb92b218"
-  integrity sha512-Z7RCb9fCiR4bSe0PLyA8w/v7tvhpoA9G5x5LAncJuxR5ihnwVa2RYt5e/fl5vIazh2EuB6pveBPvpm4ntpmYeQ==
+  integrity sha512-DgpLWZV5htumjXaE13E/KMODwKyr56bNtk1gaTOPbm368b6zdcM/bwutdNQSTuNlhkJ4bhnhpVs7OzErJkcDLw==
   dependencies:
-    "@sentry/browser" "5.22.0"
+    "@sentry/browser" "5.22.2"
-    "@sentry/minimal" "5.22.0"
+    "@sentry/minimal" "5.22.2"
-    "@sentry/types" "5.22.0"
+    "@sentry/types" "5.22.2"
-    "@sentry/utils" "5.22.0"
+    "@sentry/utils" "5.22.2"
     hoist-non-react-statics "^3.3.2"
     tslib "^1.9.3"
 
-"@sentry/tracing@^5.22.0":
+"@sentry/tracing@^5.22.2":
-  version "5.22.0"
+  version "5.22.2"
-  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-5.22.0.tgz#d9cb85d22340b30afe2a8554c6d66742236cde56"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-5.22.2.tgz#6a326bf43b3491c3e462330f8e7d6cd52a975a2d"
-  integrity sha512-dtDX9LDC/yAckXK+cifPt7vu/JWUiGFkalh5m/WgkhV2eveZ1o+bbv9YM0em8t4Kz3lOmJM/R9iO6YaeJKsqlQ==
+  integrity sha512-M4F4CN85luWoHBuBiQMk2/dtpn5L2CriBTcLsKQNkA/fk6lv8CbE1WZ/SkCMWzK4hxo5I2vSyzLlb2OwcMHmdQ==
   dependencies:
-    "@sentry/hub" "5.22.0"
+    "@sentry/hub" "5.22.2"
-    "@sentry/minimal" "5.22.0"
+    "@sentry/minimal" "5.22.2"
-    "@sentry/types" "5.22.0"
+    "@sentry/types" "5.22.2"
-    "@sentry/utils" "5.22.0"
+    "@sentry/utils" "5.22.2"
     tslib "^1.9.3"
 
-"@sentry/types@5.22.0":
+"@sentry/types@5.22.2":
-  version "5.22.0"
+  version "5.22.2"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.22.0.tgz#7017dc5f36aa05b7042c3ef703a740b397db8230"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.22.2.tgz#32d7f82537afe7712971fd6222c7744f0d8a27fe"
-  integrity sha512-PAeOQ8yxTkeTdJSYbPw6Tb7Wtx7/MWggqH6qj2G41u1yCvOoPURhlmd3pSayad+lWs2qm2kjVdkJKbPVJ4kojQ==
+  integrity sha512-Ko9pri0D0TNaSHocLVLQQZlnTtMXrBhP5AZYjB193aYqc1x52dFchQlhiKLEgyFCKjTEIlD/J9ZD7QkQoeYT+A==
 
-"@sentry/utils@5.22.0":
+"@sentry/utils@5.22.2":
-  version "5.22.0"
+  version "5.22.2"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.22.0.tgz#5b13fda94698fb1094535bc2b9b38a351894ba7e"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.22.2.tgz#7296cd9036e8d34638743a27fe8c6fe0e70db902"
-  integrity sha512-MvHB+PAVI4PAffZOiRhgODmj1CgmViO2257abGtBY2hM1wGqc6tmLw1mn6rF+fh+Id2UDfa4miIJL2VY1E2aaw==
+  integrity sha512-HGpPohNgwRhR+7bf2OlziX84JVdwQAauesqcL4Y78e+U09+E06cQAEQkRIQJfn2Ai2NvVmMVhdj51v+AqmaAWQ==
   dependencies:
-    "@sentry/types" "5.22.0"
+    "@sentry/types" "5.22.2"
     tslib "^1.9.3"
 
 "@sentry/webpack-plugin@^1.12.1":