[Feature] 에러 트레킹을 위한 sentry 적용 및 구글 어널리틱스를 적용하라

package.json

@@ -32,6 +32,8 @@
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@reduxjs/toolkit": "^1.4.0",
+    "@sentry/react": "^6.9.0",
+    "@sentry/tracing": "^6.9.0",
     "d2coding": "^1.3.2",
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",

public/index.html

@@ -5,6 +5,16 @@
     <meta name="viewport" 
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XEV82059NP"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-XEV82059NP');
+    </script>
+
     <!-- Primary Meta Tags -->
     <meta name="title" content="ConStu">
     <meta name="description" content="스터디를 직접 개설하거나 참여해보세요!">

src/ErrorBoundary.jsx

@@ -2,9 +2,12 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
 
+import * as Sentry from '@sentry/react';
+
 import useNotFound from './hooks/useNotFound';
 
 import NotFoundPage from './pages/NotFoundPage';
+import CrashErrorPage from './pages/CrashErrorPage';
 
 function ErrorBoundaryWrapper({ children }) {
   const { isNotFound } = useNotFound();
@@ -19,21 +22,31 @@ function ErrorBoundaryWrapper({ children }) {
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { hasError: false };
+    this.state = {
+      hasError: false,
+    };
+    this.handleResolveError = this.handleResolveError.bind(this);
   }
 
   static getDerivedStateFromError(error) {
-    return { hasError: true };
+    return {
+      hasError: true,
+    };
   }
 
   componentDidCatch(error, errorInfo) {
-    // TODO - 추후 로직 추가
+    Sentry.captureException(error);
+  }
+
+  handleResolveError() {
+    this.setState({
+      hasError: false,
+    });
   }
 
   render() {
     if (this.state.hasError) {
-      // TODO - 알 수 없는 오류 페이지 추가
-      return <h1>앗! 알 수 없는 오류가 발생했어요!</h1>;
+      return <CrashErrorPage onResolve={this.handleResolveError} />;
     }
 
     return (

src/ErrorBoundary.test.jsx

@@ -2,11 +2,21 @@ import React from 'react';
 
 import { useSelector, useDispatch } from 'react-redux';
 
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 
 import ErrorBoundary from './ErrorBoundary';
 import InjectMockProviders from './components/common/test/InjectMockProviders';
 
+const mockPush = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory() {
+    return {
+      push: mockPush,
+    };
+  },
+}));
 jest.mock('react-redux');
 
 describe('ErrorBoundary', () => {
@@ -26,25 +36,45 @@ describe('ErrorBoundary', () => {
 
   const renderErrorBoundary = (ui) => render(ui);
 
-  context('Has Unknown Error', () => {
+  context('Has Crash Error', () => {
     given('errorType', () => null);
 
     const MockComponent = () => {
       throw new Error('error');
     };
 
-    it('should be renders "앗! 알 수 없는 오류가 발생했어요!" Error Message', () => {
+    it('should be renders "이런.. 오류가 발생했어요!" Error Message', () => {
       const { container } = renderErrorBoundary((
-        <ErrorBoundary>
-          <MockComponent />
-        </ErrorBoundary>
+        <InjectMockProviders>
+          <ErrorBoundary>
+            <MockComponent />
+          </ErrorBoundary>
+        </InjectMockProviders>
       ));
 
-      expect(container).toHaveTextContent('앗! 알 수 없는 오류가 발생했어요!');
+      expect(container).toHaveTextContent('이런.. 오류가 발생했어요!');
+    });
+
+    describe('When Crash Error Page, click the "홈으로" button.', () => {
+      it('should be call history push: path is "/"', () => {
+        const { container, getByText } = renderErrorBoundary((
+          <InjectMockProviders>
+            <ErrorBoundary>
+              <MockComponent />
+            </ErrorBoundary>
+          </InjectMockProviders>
+        ));
+
+        expect(container).toHaveTextContent('이런.. 오류가 발생했어요!');
+
+        fireEvent.click(getByText('홈으로'));
+
+        expect(mockPush).toBeCalledWith('/');
+      });
     });
   });
 
-  context("Hasn't Unknown Error", () => {
+  context("Hasn't Crash Error", () => {
     context('Without Not Found Error Type', () => {
       given('errorType', () => null);
       const MockComponent = () => (

src/containers/error/CrashErrorContainer.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { useHistory } from 'react-router-dom';
+
+import ErrorScreenTemplate from '../../components/error/ErrorScreenTemplate';
+
+const CrashErrorContainer = ({ onResolve }) => {
+  const history = useHistory();
+
+  const onClick = () => {
+    history.push('/');
+    onResolve();
+  };
+
+  return (
+    <ErrorScreenTemplate
+      message="이런.. 오류가 발생했어요!"
+      buttonText="홈으로"
+      onClick={onClick}
+    />
+  );
+};
+
+export default CrashErrorContainer;