Merge pull request #142 from IT-Cotato/develop/CSQ-5_apply_user_error…

…_monitoring

Develop/csq 5 apply user error monitoring

.github/workflows/main.yml

@@ -47,9 +47,19 @@ jobs:
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
 
+      - name: Install Sentry CLI
+        run: yarn global add @sentry/cli
+
       - name: Build
         run: yarn build
 
+      - name: Upload sourcemaps to Sentry
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: |
+          sentry-cli sourcemaps inject --org cotato-fe --project cotato build
+          sentry-cli sourcemaps upload --org cotato-fe --project cotato build
+
       - name: Save Build Artifacts
         uses: actions/upload-artifact@v3
         with:

.gitignore

@@ -23,4 +23,6 @@ yarn-debug.log*
 yarn-error.log*
 
 # API key
-.env
+.env
+# Sentry Config File
+.sentryclirc

package.json

@@ -15,6 +15,8 @@
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@mui/x-date-pickers": "^7.17.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@sentry/cli": "^2.37.0",
+    "@sentry/react": "^8.33.1",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
@@ -108,10 +110,11 @@
   },
   "scripts": {
     "start": "craco start",
-    "build": "craco build",
+    "build": "craco build && yarn sentry:sourcemaps || true",
     "test": "craco test",
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
-    "generate-icon-types": "node scripts/generateIconTypes.js"
+    "generate-icon-types": "node scripts/generateIconTypes.js",
+    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org cotato-fe --project cotato build && sentry-cli sourcemaps upload --org cotato-fe --project cotato build || true"
   },
   "browserslist": {
     "production": [
@@ -194,4 +197,4 @@
   "eslintConfig": {
     "extends": "react-app"
   }
-}
+}

src/components/CotatoFloatingActionButton/CotatoFloatingActionButtonItem.tsx

@@ -1,13 +1,14 @@
 import { Box, Fab, SvgIcon, Tooltip, useMediaQuery } from '@mui/material';
 import { device } from '@theme/media';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled, { useTheme } from 'styled-components';
 
 //
 //
 //
 
 interface CotatoFloatingActionButtonItemProps {
+  ref?: React.Ref<HTMLButtonElement> | undefined;
   name: string;
   icon: React.ReactNode;
   svgIcon?: React.ReactNode;
@@ -27,14 +28,10 @@ const FAB_ITEM_MOBILE_SIZE = '3.2rem';
 //
 //
 
-const CotatoFloatingActionButtonItem: React.FC<CotatoFloatingActionButtonItemProps> = ({
-  name,
-  svgIcon,
-  icon,
-  selected,
-  disabled,
-  onClick,
-}) => {
+const CotatoFloatingActionButtonItem = forwardRef<
+  HTMLButtonElement,
+  CotatoFloatingActionButtonItemProps
+>(({ name, svgIcon, icon, selected, disabled, onClick }, ref) => {
   const theme = useTheme();
   const isMobileOrSmaller = useMediaQuery(`(max-width:${device.mobile})`);
 
@@ -68,6 +65,7 @@ const CotatoFloatingActionButtonItem: React.FC<CotatoFloatingActionButtonItemPro
         <StyledFab
           isMobileOrSmaller={isMobileOrSmaller}
           disabled={disabled}
+          ref={ref}
           sx={{
             backgroundColor: selected ? theme.colors.primary90 : theme.colors.gray40,
           }}
@@ -92,7 +90,9 @@ const CotatoFloatingActionButtonItem: React.FC<CotatoFloatingActionButtonItemPro
       </div>
     </Tooltip>
   );
-};
+});
+
+CotatoFloatingActionButtonItem.displayName = 'CotatoFloatingActionButtonItem';
 
 export default CotatoFloatingActionButtonItem;
 

src/components/CotatoGlobalFab/CotatoGlobalFab.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { ReactComponent as KaKaoTalkIcon } from '@/assets/kakaotalk.svg';
 import { ReactComponent as AttendanceIcon } from '@/assets/attendance_icon.svg';
+import { ReactComponent as ReportIcon } from '@/assets/report_icon.svg';
 import { useNavigate } from 'react-router-dom';
 import CotatoFloatingActionButton from '@components/CotatoFloatingActionButton/CotatoFloatingActionButton';
 import CotatoFloatingActionButtonItem from '@components/CotatoFloatingActionButton/CotatoFloatingActionButtonItem';
 import fetchUserData from '@utils/fetchUserData';
 import { MemberRole } from '@/enums';
+import { feedbackIntegration } from '@/sentryFeedbackIntegtation';
 import CotatoIcon from '@components/CotatoIcon';
 
 //
@@ -22,6 +24,8 @@ const CotatoGlobalFab = () => {
   const navigate = useNavigate();
   const { data: user } = fetchUserData();
 
+  const errorReportButtonRef = useRef<HTMLButtonElement>(null);
+
   const isOverOldMember = MemberRole[user?.role ?? 'REFUSED'] >= MemberRole.OLD_MEMBER;
 
   //
@@ -42,8 +46,25 @@ const CotatoGlobalFab = () => {
         window.open(COTATO_KAKAO_PLUS_FRIEND_URL, '_blank');
       },
     },
+    errorReport: {
+      name: 'Report a Bug!',
+      icon: <ReportIcon width="100%" height="100%" />,
+      disabled: false,
+      onClick: () => {},
+    },
   };
 
+  /**
+   *
+   */
+  useEffect(() => {
+    if (errorReportButtonRef.current) {
+      feedbackIntegration.attachTo(errorReportButtonRef.current, {
+        formTitle: 'Report a Bug',
+      });
+    }
+  }, []);
+
   //
   //
   //
@@ -57,6 +78,7 @@ const CotatoGlobalFab = () => {
       {Object.entries(fabList).map(([key, value]) => (
         <CotatoFloatingActionButtonItem
           key={key}
+          ref={key === 'errorReport' ? errorReportButtonRef : undefined}
           name={value.name}
           icon={value.icon}
           disabled={value.disabled}

src/index.css

@@ -13,7 +13,7 @@
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color:rgb(164, 172, 180);
+  background-color: rgb(164, 172, 180);
   border-radius: 10px;
 }
 *::-webkit-scrollbar-thumb:hover {

src/index.tsx

@@ -6,6 +6,35 @@ import reportWebVitals from './reportWebVitals';
 import '@theme/font.css';
 import ReactModal from 'react-modal';
 import { BrowserRouter } from 'react-router-dom';
+import * as Sentry from '@sentry/react';
+import { feedbackIntegration } from './sentryFeedbackIntegtation';
+
+Sentry.init({
+  dsn: `${process.env.REACT_APP_SENTRY_DSN}`,
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    Sentry.browserProfilingIntegration(),
+    Sentry.replayIntegration(),
+    feedbackIntegration,
+  ],
+  // Tracing
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: [
+    'localhost',
+    /^https:\/\/qa\.beta\.cotato\.kr/,
+    /^https:\/\/www\.cotato\.kr/,
+  ],
+  // Set profilesSampleRate to 1.0 to profile every transaction.
+  // Since profilesSampleRate is relative to tracesSampleRate,
+  // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
+  // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
+  // results in 25% of transactions being profiled (0.5*0.5=0.25)
+  profilesSampleRate: 1.0,
+  // Session Replay
+  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+});
 
 ReactModal.setAppElement('#root');
 

src/sentryFeedbackIntegtation.tsx

@@ -0,0 +1,31 @@
+import * as Sentry from '@sentry/react';
+
+export const feedbackIntegration = Sentry.feedbackIntegration({
+  // Additional SDK configuration goes in here, for example:
+  colorScheme: 'light',
+  formTitle: 'Give Feedback',
+  nameLabel: '성함',
+  namePlaceholder: '',
+  messageLabel: '상세 내용',
+  isRequiredLabel: '(필수)',
+  emailPlaceholder: '',
+  messagePlaceholder: '발생한 오류 또는 사용하면서의 피드백을 작성해주세요.',
+  addScreenshotButtonLabel: '스크린샷 추가',
+  removeScreenshotButtonLabel: '스크린샷 삭제',
+  submitButtonLabel: '제출하기',
+  cancelButtonLabel: '취소',
+  successMessage: '피드백이 성공적으로 제출되었습니다.',
+  successColor: '#37922C',
+  errorColor: '#DC4200',
+  themeLight: {
+    foreground: 'black',
+    background: 'white',
+    accentBackground: '#FFA000',
+  },
+  themeDark: {
+    foreground: 'white',
+    background: '#242321',
+    accentBackground: '#C63C00',
+  },
+  autoInject: false,
+});