chore: Move sentry to faro for client side

app/client/src/AppErrorBoundry.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from "react";
 import styled from "styled-components";
 import AppCrashImage from "assets/images/404-image.png";
-import * as Sentry from "@sentry/react";
 import log from "loglevel";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import { Button } from "@appsmith/ads";
+import captureException from "instrumentation/sendFaroErrors";
 
 const Wrapper = styled.div`
   display: flex;
@@ -32,7 +32,7 @@ class AppErrorBoundary extends Component {
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     log.error({ error, errorInfo });
-    Sentry.captureException(error);
+    captureException(error, { errorName: "AppErrorBoundary" });
     AnalyticsUtil.logEvent("APP_CRASH", { error, errorInfo });
     this.setState({
       hasError: true,

app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx

@@ -9,7 +9,7 @@ import { Tag } from "@blueprintjs/core";
 import styled from "styled-components";
 import { UIComponentTypes } from "entities/Plugin";
 import log from "loglevel";
-import * as Sentry from "@sentry/react";
+import captureException from "instrumentation/sendFaroErrors";
 import type { FormEvalOutput } from "reducers/evaluationReducers/formEvaluationReducer";
 import {
   checkIfSectionCanRender,
@@ -103,7 +103,7 @@ const FormRender = (props: Props) => {
       }
     } catch (e) {
       log.error(e);
-      Sentry.captureException(e);
+      captureException(e, { errorName: "FormRenderError" });
 
       return (
         <ErrorComponent

app/client/src/actions/pageActions.tsx

@@ -20,7 +20,6 @@ import type { APP_MODE } from "entities/App";
 import type { CanvasWidgetsReduxState } from "ee/reducers/entityReducers/canvasWidgetsReducer";
 import type { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
 import type { Replayable } from "entities/Replay/ReplayEntity/ReplayEditor";
-import * as Sentry from "@sentry/react";
 import type { DSLWidget } from "../WidgetProvider/constants";
 import type {
   LayoutOnLoadActionErrors,
@@ -30,6 +29,7 @@ import { ReplayOperation } from "entities/Replay/ReplayEntity/ReplayOperations";
 import type { PACKAGE_PULL_STATUS } from "ee/constants/ModuleConstants";
 import type { ApiResponse } from "api/ApiResponses";
 import type { EvaluationReduxAction } from "./EvaluationReduxActionTypes";
+import captureException from "instrumentation/sendFaroErrors";
 
 export interface FetchPageListPayload {
   applicationId: string;
@@ -322,13 +322,10 @@ export interface UpdatePageActionPayload {
 export const updatePageAction = (
   payload: UpdatePageActionPayload,
 ): ReduxAction<UpdatePageActionPayload> => {
-  // Update page *needs* id to be there. We found certain scenarios
-  // where this was not happening and capturing the error to know gather
-  // more info: https://github.com/appsmithorg/appsmith/issues/16435
   if (!payload.id) {
-    Sentry.captureException(
-      new Error("Attempting to update page without page id"),
-    );
+    captureException(new Error("Attempting to update page without page id"), {
+      errorName: "PageActions_UpdatePage",
+    });
   }
 
   return {

app/client/src/api/helpers/validateJsonResponseMeta.ts

@@ -1,4 +1,4 @@
-import * as Sentry from "@sentry/react";
+import captureException from "instrumentation/sendFaroErrors";
 import type { AxiosResponse } from "axios";
 import { CONTENT_TYPE_HEADER_KEY } from "PluginActionEditor/constants/CommonApiConstants";
 
@@ -7,7 +7,8 @@ export const validateJsonResponseMeta = (response: AxiosResponse) => {
     response.headers[CONTENT_TYPE_HEADER_KEY] === "application/json" &&
     !response.data.responseMeta
   ) {
-    Sentry.captureException(new Error("Api responded without response meta"), {
+    captureException(new Error("Api responded without response meta"), {
+      errorName: "ValidateJsonResponseMeta",
       contexts: { response: response.data },
     });
   }

app/client/src/api/interceptors/response/failureHandlers/handleMissingResponseMeta.ts

@@ -1,12 +1,13 @@
 import type { AxiosError } from "axios";
-import * as Sentry from "@sentry/react";
 import type { ApiResponse } from "api/types";
+import captureException from "instrumentation/sendFaroErrors";
 
 export const handleMissingResponseMeta = async (
   error: AxiosError<ApiResponse>,
 ) => {
   if (error.response?.data && !error.response.data.responseMeta) {
-    Sentry.captureException(new Error("Api responded without response meta"), {
+    captureException(new Error("Api responded without response meta"), {
+      errorName: "MissingResponseMeta",
       contexts: { response: { ...error.response.data } },
     });
 

app/client/src/api/interceptors/response/failureHandlers/handleNotFoundError.ts

@@ -3,10 +3,10 @@ import {
   ERROR_CODES,
   SERVER_ERROR_CODES,
 } from "ee/constants/ApiConstants";
-import * as Sentry from "@sentry/react";
 import type { AxiosError } from "axios";
 import type { ApiResponse } from "api/types";
 import { is404orAuthPath } from "api/helpers";
+import captureException from "instrumentation/sendFaroErrors";
 
 export async function handleNotFoundError(error: AxiosError<ApiResponse>) {
   if (is404orAuthPath()) return null;
@@ -20,7 +20,7 @@ export async function handleNotFoundError(error: AxiosError<ApiResponse>) {
     (SERVER_ERROR_CODES.RESOURCE_NOT_FOUND.includes(errorData.error?.code) ||
       SERVER_ERROR_CODES.UNABLE_TO_FIND_PAGE.includes(errorData?.error?.code))
   ) {
-    Sentry.captureException(error);
+    captureException(error, { errorName: "NotFoundError" });
 
     return Promise.reject({
       ...error,

app/client/src/api/interceptors/response/failureHandlers/handleUnauthorizedError.ts

@@ -1,10 +1,10 @@
 import store from "store";
 import type { AxiosError } from "axios";
-import * as Sentry from "@sentry/react";
 import { is404orAuthPath } from "api/helpers";
 import { logoutUser } from "actions/userActions";
 import { AUTH_LOGIN_URL } from "constants/routes";
 import { API_STATUS_CODES, ERROR_CODES } from "ee/constants/ApiConstants";
+import captureException from "instrumentation/sendFaroErrors";
 
 export const handleUnauthorizedError = async (error: AxiosError) => {
   if (is404orAuthPath()) return null;
@@ -20,7 +20,7 @@ export const handleUnauthorizedError = async (error: AxiosError) => {
       }),
     );
 
-    Sentry.captureException(error);
+    captureException(error, { errorName: "UnauthorizedError" });
 
     return Promise.reject({
       ...error,

app/client/src/ce/sagas/PageSagas.tsx

@@ -97,7 +97,6 @@ import { clearEvalCache } from "../../sagas/EvaluationsSaga";
 import { getQueryParams } from "utils/URLUtils";
 import log from "loglevel";
 import { migrateIncorrectDynamicBindingPathLists } from "utils/migrations/IncorrectDynamicBindingPathLists";
-import * as Sentry from "@sentry/react";
 import { ERROR_CODES } from "ee/constants/ApiConstants";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import DEFAULT_TEMPLATE from "templates/default";
@@ -152,6 +151,7 @@ import {
   selectCombinedPreviewMode,
   selectGitApplicationCurrentBranch,
 } from "selectors/gitModSelectors";
+import captureException from "instrumentation/sendFaroErrors";
 
 export const checkIfMigrationIsNeeded = (
   fetchPageResponse?: FetchPageResponse,
@@ -570,7 +570,9 @@ export function* savePageSaga(action: ReduxAction<{ isRetry?: boolean }>) {
       const { message } = incorrectBindingError;
 
       if (isRetry) {
-        Sentry.captureException(new Error("Failed to correct binding paths"));
+        captureException(new Error("Failed to correct binding paths"), {
+          errorName: "PageSagas_BindingPathCorrection",
+        });
         yield put({
           type: ReduxActionErrorTypes.FAILED_CORRECTING_BINDING_PATHS,
           payload: {

app/client/src/ce/utils/AnalyticsUtil.tsx

@@ -9,7 +9,7 @@ import SegmentSingleton from "utils/Analytics/segment";
 import MixpanelSingleton, {
   type SessionRecordingConfig,
 } from "utils/Analytics/mixpanel";
-import SentryUtil from "utils/Analytics/sentry";
+import FaroUtil from "utils/Analytics/sentry";
 import SmartlookUtil from "utils/Analytics/smartlook";
 import TrackedUser from "ee/utils/Analytics/trackedUser";
 
@@ -31,7 +31,7 @@ async function initialize(
   user: User,
   sessionRecordingConfig: SessionRecordingConfig,
 ) {
-  SentryUtil.init();
+  // SentryUtil.init();
   await SmartlookUtil.init();
 
   segmentAnalytics = SegmentSingleton.getInstance();
@@ -94,7 +94,7 @@ async function identifyUser(userData: User, sendAdditionalData?: boolean) {
     await segmentAnalytics.identify(trackedUser.userId, userProperties);
   }
 
-  SentryUtil.identifyUser(trackedUser.userId, userData);
+  FaroUtil.identifyUser(trackedUser.userId, userData);
 
   if (trackedUser.email) {
     SmartlookUtil.identify(trackedUser.userId, trackedUser.email);

app/client/src/components/SentryRoute.tsx

@@ -1,4 +1,3 @@
-import * as Sentry from "@sentry/react";
 import { Route } from "react-router";
 
-export const SentryRoute = Sentry.withSentryRouting(Route);
+export const SentryRoute = Route;

app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx

@@ -14,7 +14,6 @@ import { Classes, Collapse } from "@blueprintjs/core";
 import { UNDEFINED_VALIDATION } from "utils/validation/common";
 import copy from "copy-to-clipboard";
 
-import * as Sentry from "@sentry/react";
 import type { CodeEditorExpected } from "components/editorComponents/CodeEditor/index";
 import type { Indices } from "constants/Layers";
 import { Layers } from "constants/Layers";
@@ -29,6 +28,7 @@ import { getPathNavigationUrl } from "selectors/navigationSelectors";
 import { Button, Icon, Link, toast, Tooltip } from "@appsmith/ads";
 import type { EvaluationError } from "utils/DynamicBindingUtils";
 import { DEBUGGER_TAB_KEYS } from "../Debugger/constants";
+import captureException from "instrumentation/sendFaroErrors";
 
 const modifiers: IPopoverSharedProps["modifiers"] = {
   offset: {
@@ -290,8 +290,8 @@ export function PreparedStatementViewer(props: {
   const { parameters, value } = props.evaluatedValue;
 
   if (!value) {
-    Sentry.captureException("Prepared statement got no value", {
-      level: "debug",
+    captureException(new Error("Prepared statement got no value"), {
+      errorName: "PreparedStatementError",
       extra: { props },
     });
 

app/client/src/components/editorComponents/CodeEditor/index.tsx

@@ -78,7 +78,6 @@ import { Button } from "@appsmith/ads";
 import "codemirror/addon/fold/brace-fold";
 import "codemirror/addon/fold/foldgutter";
 import "codemirror/addon/fold/foldgutter.css";
-import * as Sentry from "@sentry/react";
 import type { EvaluationError, LintError } from "utils/DynamicBindingUtils";
 import { getEvalErrorPath, isDynamicValue } from "utils/DynamicBindingUtils";
 import {
@@ -1919,6 +1918,4 @@ const mapDispatchToProps = (dispatch: any) => ({
   resetActiveField: () => dispatch(resetActiveEditorField()),
 });
 
-export default Sentry.withProfiler(
-  connect(mapStateToProps, mapDispatchToProps)(CodeEditor),
-);
+export default connect(mapStateToProps, mapDispatchToProps)(CodeEditor);

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

@@ -1,4 +1,3 @@
-import * as Sentry from "@sentry/react";
 import classNames from "classnames";
 import React, {
   memo,
@@ -173,4 +172,4 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => {
 
 EntityExplorerSidebar.displayName = "EntityExplorerSidebar";
 
-export default Sentry.withProfiler(EntityExplorerSidebar);
+export default EntityExplorerSidebar;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import * as Sentry from "@sentry/react";
 import * as log from "loglevel";
+import captureException from "instrumentation/sendFaroErrors";
 
 import type { ReactNode, CSSProperties } from "react";
 
@@ -39,7 +39,7 @@ class ErrorBoundary extends React.Component<Props, State> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   componentDidCatch(error: any, errorInfo: any) {
     log.error({ error, errorInfo });
-    Sentry.captureException(error);
+    captureException(error, { errorName: "ErrorBoundary" });
   }
 
   render() {

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

@@ -6,7 +6,6 @@ import React, {
   useMemo,
   useRef,
 } from "react";
-import * as Sentry from "@sentry/react";
 import { useSelector } from "react-redux";
 import { getSelectedWidgets } from "selectors/ui";
 import WidgetPropertyPane from "pages/Editor/PropertyPane";
@@ -104,4 +103,4 @@ export const PropertyPaneSidebar = memo(() => {
 
 PropertyPaneSidebar.displayName = "PropertyPaneSidebar";
 
-export default Sentry.withProfiler(PropertyPaneSidebar);
+export default PropertyPaneSidebar;

app/client/src/components/propertyControls/PrimaryColumnsControl.tsx

@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import type { AppState } from "ee/reducers";
 import { connect } from "react-redux";
 import type { Placement } from "popper.js";
-import * as Sentry from "@sentry/react";
 import _ from "lodash";
 import type { ControlProps } from "./BaseControl";
 import BaseControl from "./BaseControl";
@@ -407,6 +406,6 @@ const mapStateToProps = (state: AppState): ReduxStateProps => ({
   datasources: state.entities.datasources,
 });
 
-const EvaluatedValuePopupWrapper = Sentry.withProfiler(
-  connect(mapStateToProps)(EvaluatedValuePopupWrapperClass),
+const EvaluatedValuePopupWrapper = connect(mapStateToProps)(
+  EvaluatedValuePopupWrapperClass,
 );

app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx

@@ -1,5 +1,5 @@
 import type { AppState } from "ee/reducers";
-import * as Sentry from "@sentry/react";
+
 import type { CodeEditorExpected } from "components/editorComponents/CodeEditor";
 import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 import EvaluatedValuePopup from "components/editorComponents/CodeEditor/EvaluatedValuePopup";
@@ -548,6 +548,6 @@ const mapStateToProps = (
   };
 };
 
-const EvaluatedValuePopupWrapper = Sentry.withProfiler(
-  connect(mapStateToProps)(EvaluatedValuePopupWrapperClass),
+const EvaluatedValuePopupWrapper = connect(mapStateToProps)(
+  EvaluatedValuePopupWrapperClass,
 );

app/client/src/components/propertyControls/PrimaryColumnsControlWDS.tsx

@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import type { AppState } from "ee/reducers";
 import { connect } from "react-redux";
 import type { Placement } from "popper.js";
-import * as Sentry from "@sentry/react";
 import _, { toString } from "lodash";
 import type { ControlProps } from "./BaseControl";
 import BaseControl from "./BaseControl";
@@ -497,6 +496,6 @@ const mapStateToProps = (
   };
 };
 
-const EvaluatedValuePopupWrapper = Sentry.withProfiler(
-  connect(mapStateToProps)(EvaluatedValuePopupWrapperClass),
+const EvaluatedValuePopupWrapper = connect(mapStateToProps)(
+  EvaluatedValuePopupWrapperClass,
 );

app/client/src/components/propertyControls/TabControl.tsx

@@ -10,7 +10,7 @@ import isString from "lodash/isString";
 import isUndefined from "lodash/isUndefined";
 import includes from "lodash/includes";
 import map from "lodash/map";
-import * as Sentry from "@sentry/react";
+import captureException from "instrumentation/sendFaroErrors";
 import { useDispatch } from "react-redux";
 import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
 import { DraggableListControl } from "pages/Editor/PropertyPane/DraggableListControl";
@@ -131,10 +131,13 @@ class TabControl extends BaseControl<ControlProps, State> {
 
         return parsedData;
       } catch (error) {
-        Sentry.captureException({
-          message: "Tab Migration Failed",
-          oldData: this.props.propertyValue,
-        });
+        captureException(
+          {
+            message: "Tab Migration Failed",
+            oldData: this.props.propertyValue,
+          },
+          { errorName: "TabMigrationError" },
+        );
       }
     } else {
       return this.props.propertyValue;

app/client/src/ee/sagas/index.tsx

@@ -3,7 +3,7 @@ import { sagas as CE_Sagas } from "ce/sagas";
 import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
 import { call, all, spawn, race, take } from "redux-saga/effects";
 import log from "loglevel";
-import * as sentry from "@sentry/react";
+import captureException from "instrumentation/sendFaroErrors";
 
 const sagasArr = [...CE_Sagas];
 
@@ -22,7 +22,7 @@ export function* rootSaga(sagasToRun = sagasArr): any {
               break;
             } catch (e) {
               log.error(e);
-              sentry.captureException(e);
+              captureException(e, { errorName: "RootSagaError" });
             }
           }
         }),