🤖 348 adding sentry to the web app

web/.eslintrc.js

@@ -56,6 +56,7 @@ module.exports = {
     'react/require-default-props': 'off', // TODO re-enable
     'no-nested-ternary': 'off', // warn
     'consistent-return': 'off', // warn. Look at api calls closely before enabling this. api.ts.
+    'react/no-unstable-nested-components': 'off',
     // Accessibility off for now to make speed a priority and avoid restructuring for now
     'jsx-a11y/click-events-have-key-events': 'off',
     'jsx-a11y/no-static-element-interactions': 'off',
@@ -82,8 +83,8 @@ module.exports = {
     'react/function-component-definition': [
       2,
       {
-        namedComponents: "arrow-function",
-        unnamedComponents: "arrow-function",
+        namedComponents: 'arrow-function',
+        unnamedComponents: 'arrow-function',
       },
     ],
   },

web/package.json

@@ -7,6 +7,8 @@
     "@emotion/react": "^11.9.0",
     "@reactour/tour": "^2.10.3",
     "@reduxjs/toolkit": "^1.7.2",
+    "@sentry/react": "^6.19.7",
+    "@sentry/tracing": "^6.19.7",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

web/src/App.tsx

@@ -1,19 +1,23 @@
 import {Provider} from 'react-redux';
+import * as Sentry from '@sentry/react';
 import {TourProvider} from '@reactour/tour';
 import Router from './components/Navigation';
 import {store} from './redux/store';
 import './App.css';
 import AnalyticsProvider from './components/Analytics/AnalyticsProvider';
+import ErrorBoundary from './components/ErrorBoundary';
 
 const App = () => {
   return (
-    <TourProvider steps={[]}>
-      <AnalyticsProvider>
-        <Provider store={store}>
-          <Router />
-        </Provider>
-      </AnalyticsProvider>
-    </TourProvider>
+    <Sentry.ErrorBoundary fallback={({error}) => <ErrorBoundary error={error} />}>
+      <TourProvider steps={[]}>
+        <AnalyticsProvider>
+          <Provider store={store}>
+            <Router />
+          </Provider>
+        </AnalyticsProvider>
+      </TourProvider>
+    </Sentry.ErrorBoundary>
   );
 };
 

web/src/components/ErrorBoundary/ErrorBoundary.styled.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  height: calc(100vh - 200px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;

web/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,19 @@
+import {CloseCircleFilled} from '@ant-design/icons';
+import {Typography} from 'antd';
+import * as S from './ErrorBoundary.styled';
+
+interface IErrorBoundaryProps {
+  error: Error;
+}
+
+const ErrorBoundary: React.FC<IErrorBoundaryProps> = ({error}) => {
+  return (
+    <S.Container>
+      <CloseCircleFilled style={{color: 'red', fontSize: 32}} />
+      <Typography.Title level={2}>Something went wrong!</Typography.Title>
+      <div style={{display: 'grid', gap: 8, gridTemplateColumns: '1fr 1fr'}}>{error.toString()}</div>
+    </S.Container>
+  );
+};
+
+export default ErrorBoundary;

web/src/components/ErrorBoundary/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './ErrorBoundary';

web/src/constants/Common.constants.ts

@@ -1,4 +1,7 @@
 export const BASE_URL = 'http://localhost:8080';
+export const SENTRY_DNS = 'https://[email protected]/6375361';
+
+export const SENTRY_ALLOWED_URLS = [/.*?localhost:3000/, /.*?tracetest.io/];
 
 export const DOCUMENTATION_URL = 'https://kubeshop.github.io/tracetest/';
 export const GITHUB_URL = 'https://github.com/kubeshop/tracetest';