reliability: add sentry tracing on ui

package.json

@@ -19,4 +19,4 @@
         "seed": "ts-node --transpile-only ./packages/backend/prisma/seed.ts"
     },
     "packageManager": "yarn@3.2.2"
-}
+}

packages/client/package.json

@@ -13,6 +13,7 @@
     "@mui/icons-material": "^5.10.3",
     "@mui/lab": "^5.0.0-alpha.135",
     "@mui/material": "^5.10.3",
+    "@sentry/react": "^7.60.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",

packages/client/src/common/oauth/index.tsx

@@ -2,11 +2,11 @@ import React, { useEffect, useMemo } from 'react';
 import { TailSpin } from 'react-loader-spinner';
 import { useParams } from 'react-router-dom';
 import { REVERT_BASE_API_URL } from '../../constants';
+import * as Sentry from '@sentry/react';
 
 export const OAuthCallback = (props) => {
     const rootParams = useParams();
     const integrationId = useMemo(() => rootParams.integrationId, [rootParams]);
-    const [called, setCalled] = React.useState(false);
     const [isLoading, setIsLoading] = React.useState(false);
     const [status, setStatus] = React.useState('starting...');
 
@@ -42,6 +42,7 @@ export const OAuthCallback = (props) => {
                         setIsLoading(false);
                     })
                     .catch((err) => {
+                        Sentry.captureException(err);
                         setIsLoading(false);
                         console.error(err);
                         setStatus('Errored out');
@@ -74,6 +75,7 @@ export const OAuthCallback = (props) => {
                         setIsLoading(false);
                     })
                     .catch((err) => {
+                        Sentry.captureException(err);
                         setIsLoading(false);
                         console.error(err);
                         setStatus('Errored out');
@@ -106,13 +108,14 @@ export const OAuthCallback = (props) => {
                         setIsLoading(false);
                     })
                     .catch((err) => {
+                        Sentry.captureException(err);
                         setIsLoading(false);
                         console.error(err);
                         setStatus('Errored out');
                     });
             }
         }
-    }, [called, integrationId]);
+    }, [integrationId]);
 
     return (
         <div>

packages/client/src/home/apiKeys.tsx

@@ -6,6 +6,7 @@ import { toast } from 'react-hot-toast';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { REVERT_BASE_API_URL } from '../constants';
+import * as Sentry from '@sentry/react';
 
 const ApiKeys = ({ environment }) => {
     const user = useUser();
@@ -33,6 +34,7 @@ const ApiKeys = ({ environment }) => {
                 setLoading(false);
             })
             .catch((error) => {
+                Sentry.captureException(error);
                 console.log('error', error);
                 setLoading(false);
             });

packages/client/src/home/index.tsx

@@ -6,6 +6,7 @@ import AppsIcon from '@mui/icons-material/Apps';
 import Integrations from './integrations';
 import { useUser } from '@clerk/clerk-react';
 import { REVERT_BASE_API_URL } from '../constants';
+import * as Sentry from '@sentry/react';
 
 const selectedStyle = {
     background: '#f4f4f4',
@@ -36,6 +37,7 @@ const Home = () => {
                 setAccount(result?.account);
             })
             .catch((error) => {
+                Sentry.captureException(error);
                 console.log('error', error);
             });
     }, [user.user?.id]);

packages/client/src/home/integrations.tsx

@@ -8,12 +8,12 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import Modal from '@mui/material/Modal';
 import EditCredentials from './editCredentials';
 import { LOCALSTORAGE_KEYS } from '../data/localstorage';
+import * as Sentry from '@sentry/react';
 
 const Integrations = ({ environment }) => {
     const user = useUser();
     const [account, setAccount] = useState<any>();
     const [isLoading, setLoading] = useState<boolean>(false);
-    const [viewSecret, setViewSecret] = useState<boolean>(false);
     const [open, setOpen] = React.useState(false);
     const [appId, setAppId] = useState<string>('sfdc');
 
@@ -47,19 +47,12 @@ const Integrations = ({ environment }) => {
                 setLoading(false);
             })
             .catch((error) => {
+                Sentry.captureException(error);
                 console.log('error', error);
                 setLoading(false);
             });
     }, [user.user?.id, environment, open]);
 
-    let secretOverlay = {};
-    if (!viewSecret) {
-        secretOverlay = {
-            textShadow: 'white 0px 0px 6px',
-            color: '#00000000',
-        };
-    }
-
     return (
         <div className="w-[80%]">
             <Box

packages/client/src/index.tsx

@@ -3,6 +3,39 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { useLocation, useNavigationType, createRoutesFromChildren, matchRoutes } from 'react-router-dom';
+import * as Sentry from '@sentry/react';
+
+Sentry.init({
+    dsn: process.env.REACT_APP_SENTRY_DSN,
+    integrations: [
+        new Sentry.BrowserTracing({
+            // See docs for support of different versions of variation of react router
+            // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
+            routingInstrumentation: Sentry.reactRouterV6Instrumentation(
+                React.useEffect,
+                useLocation,
+                useNavigationType,
+                createRoutesFromChildren,
+                matchRoutes
+            ),
+        }),
+        new Sentry.Replay(),
+    ],
+
+    // Set tracesSampleRate to 1.0 to capture 100%
+    // of transactions for performance monitoring.
+    tracesSampleRate: 1.0,
+
+    // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+    // tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
+
+    // Capture Replay for 10% of all sessions,
+    // plus for 100% of sessions with an error
+    enabled: process.env.NODE_ENV !== 'development',
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+});
 
 const root = ReactDOM.createRoot(document!.getElementById('root')!);
 root.render(<App />);

yarn.lock

@@ -6861,6 +6861,7 @@ __metadata:
     "@mui/icons-material": ^5.10.3
     "@mui/lab": ^5.0.0-alpha.135
     "@mui/material": ^5.10.3
+    "@sentry/react": ^7.60.1
     "@testing-library/jest-dom": ^5.16.5
     "@testing-library/react": ^13.3.0
     "@testing-library/user-event": ^13.5.0
@@ -7066,6 +7067,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry-internal/tracing@npm:7.60.1":
+  version: 7.60.1
+  resolution: "@sentry-internal/tracing@npm:7.60.1"
+  dependencies:
+    "@sentry/core": 7.60.1
+    "@sentry/types": 7.60.1
+    "@sentry/utils": 7.60.1
+    tslib: ^2.4.1 || ^1.9.3
+  checksum: b5d4bca6ce673639662e647ce733a831c8b5ee2ba14866b4d9b22dd14a7955bdfe1cbcca6cfca198ad3c5dc9e3e1e06c9d8dc74ed47999b75a0d10b9945f737a
+  languageName: node
+  linkType: hard
+
+"@sentry/browser@npm:7.60.1":
+  version: 7.60.1
+  resolution: "@sentry/browser@npm:7.60.1"
+  dependencies:
+    "@sentry-internal/tracing": 7.60.1
+    "@sentry/core": 7.60.1
+    "@sentry/replay": 7.60.1
+    "@sentry/types": 7.60.1
+    "@sentry/utils": 7.60.1
+    tslib: ^2.4.1 || ^1.9.3
+  checksum: bb3610d86f61da4be15b722b8bf78c0d83ca77ef10f06b573c28c70820cc146dee99f84ec6477a2054cf2a3e24495304b8ccc485696953ea44ce538001b8ce23
+  languageName: node
+  linkType: hard
+
 "@sentry/core@npm:7.55.2":
   version: 7.55.2
   resolution: "@sentry/core@npm:7.55.2"
@@ -7077,6 +7104,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/core@npm:7.60.1":
+  version: 7.60.1
+  resolution: "@sentry/core@npm:7.60.1"
+  dependencies:
+    "@sentry/types": 7.60.1
+    "@sentry/utils": 7.60.1
+    tslib: ^2.4.1 || ^1.9.3
+  checksum: 19366e7d7b71ac29c333120dbcae9450ba50c886883665b24c05efcdb72d55eb42dd17379ca20f737f6dacbc30df9248f8677daec024225da35ea31a38cb2e4b
+  languageName: node
+  linkType: hard
+
 "@sentry/node@npm:^7.55.2":
   version: 7.55.2
   resolution: "@sentry/node@npm:7.55.2"
@@ -7093,13 +7131,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/react@npm:^7.60.1":
+  version: 7.60.1
+  resolution: "@sentry/react@npm:7.60.1"
+  dependencies:
+    "@sentry/browser": 7.60.1
+    "@sentry/types": 7.60.1
+    "@sentry/utils": 7.60.1
+    hoist-non-react-statics: ^3.3.2
+    tslib: ^2.4.1 || ^1.9.3
+  peerDependencies:
+    react: 15.x || 16.x || 17.x || 18.x
+  checksum: 59d00ce1decd3015025b63b9f7aeda1d245996f51f913d7c1a84e0e356e89712c3345e5eef9746701aad7b845ad376cdd8529376bd9ec29977d671d5e147d5c5
+  languageName: node
+  linkType: hard
+
+"@sentry/replay@npm:7.60.1":
+  version: 7.60.1
+  resolution: "@sentry/replay@npm:7.60.1"
+  dependencies:
+    "@sentry/core": 7.60.1
+    "@sentry/types": 7.60.1
+    "@sentry/utils": 7.60.1
+  checksum: e3107451a7b07bab82d8adff0a8f4bcfcd41da73b33618d0d20804e0b6d0d6d2ec98190373382c22d667a830eec433e71816946ef27d424ef57cff647a470370
+  languageName: node
+  linkType: hard
+
 "@sentry/types@npm:7.55.2":
   version: 7.55.2
   resolution: "@sentry/types@npm:7.55.2"
   checksum: 37ca4043dd88e05ea104172e7b0aa39e802f71c01ab3bcc31beb5ef25bccfa98fe1305e57cc929d65cdc59f0da6d71e464556a0309379371e5e350f6866cbf3c
   languageName: node
   linkType: hard
 
+"@sentry/types@npm:7.60.1":
+  version: 7.60.1
+  resolution: "@sentry/types@npm:7.60.1"
+  checksum: 56a756edec5ed6783b0ed955832d85a77e1fbadfcc23e9cfbee74d52b9eb70ee333c2d9a2fdc5a07f50ebf3b29d7d6dbf76964682b8687c6d6ce64b1a7e77c79
+  languageName: node
+  linkType: hard
+
 "@sentry/utils@npm:7.55.2":
   version: 7.55.2
   resolution: "@sentry/utils@npm:7.55.2"
@@ -7110,6 +7181,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/utils@npm:7.60.1":
+  version: 7.60.1
+  resolution: "@sentry/utils@npm:7.60.1"
+  dependencies:
+    "@sentry/types": 7.60.1
+    tslib: ^2.4.1 || ^1.9.3
+  checksum: a3bab34c7e023c33c07fb3db5f357325beebf5cf559b1713a725e38927e73298f22e67bac3e5ea9e1c4e5af6a2a6351e5ded214631f6d979297b58462044e8b7
+  languageName: node
+  linkType: hard
+
 "@shortloop/node@npm:0.0.10":
   version: 0.0.10
   resolution: "@shortloop/node@npm:0.0.10"
@@ -19669,7 +19750,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1":
+"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -30468,6 +30549,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.4.1 || ^1.9.3":
+  version: 2.6.1
+  resolution: "tslib@npm:2.6.1"
+  checksum: b0d176d176487905b66ae4d5856647df50e37beea7571c53b8d10ba9222c074b81f1410fb91da13debaf2cbc970663609068bdebafa844ea9d69b146527c38fe
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^2.5.0":
   version: 2.6.0
   resolution: "tslib@npm:2.6.0"