Check network status for chunk error

Author: velopert

package.json

@@ -13,6 +13,7 @@
     "@loadable/component": "^5.11.0",
     "@loadable/server": "^5.11.0",
     "@reduxjs/toolkit": "^1.2.2",
+    "@sentry/browser": "^5.11.1",
     "@svgr/webpack": "4.3.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",

src/components/error/ChunkErrorScreen.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import ErrorScreenTemplate from './ErrorScreenTemplate';
+import { undrawUpdate } from '../../static/images';
+import { useNetwork } from 'react-use';
+import apiClient from '../../lib/api/apiClient';
+import NetworkErrorScreen from './NetworkErrorScreen';
+
+export type ChunkErrorScreenProps = {};
+
+async function checkNetwork() {
+  try {
+    await apiClient.get('/api/v2/check', {
+      timeout: 5000,
+    });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function ChunkErrorScreen(props: ChunkErrorScreenProps) {
+  const [networkStatus, setNetworkStatus] = useState<
+    'offline' | 'online' | null
+  >(null);
+
+  const network = useNetwork();
+
+  console.log(networkStatus);
+
+  useEffect(() => {
+    if (network && network.online !== undefined) {
+      setNetworkStatus(network.online ? 'online' : 'offline');
+    }
+  }, [network]);
+
+  useEffect(() => {
+    const fn = async () => {
+      const online = await checkNetwork();
+      setNetworkStatus(online ? 'online' : 'offline');
+    };
+    fn();
+  }, [network.online]);
+
+  if (networkStatus === null) return null;
+  if (networkStatus === 'online') {
+    return (
+      <ErrorScreenTemplate
+        image={undrawUpdate}
+        message={
+          '벨로그가 업데이트 되었습니다. \n새로고침 후 다시 시도해주세요.'
+        }
+        onButtonClick={() => window.location.reload()}
+        buttonText="새로고침"
+      />
+    );
+  }
+  return <NetworkErrorScreen />;
+}
+
+export default ChunkErrorScreen;

src/components/error/CrashErrorScreen.tsx

@@ -1,16 +1,21 @@
 import React from 'react';
 import styled from 'styled-components';
+import ErrorScreenTemplate from './ErrorScreenTemplate';
+import { undrawBugFixing } from '../../static/images';
+import { useHistory } from 'react-router-dom';
 
 export type CrashErrorScreenProps = {};
 
 function CrashErrorScreen(props: CrashErrorScreenProps) {
-  return <div></div>;
+  const history = useHistory();
+  return (
+    <ErrorScreenTemplate
+      image={undrawBugFixing}
+      message="엇! 오류가 발생했습니다."
+      buttonText="홈으로"
+      onButtonClick={() => history.push('/')}
+    />
+  );
 }
 
-const Screen = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-`;
-
 export default CrashErrorScreen;

src/components/error/ErrorBoundary.tsx

@@ -1,22 +1,35 @@
 import React from 'react';
 import useNotFound from '../../lib/hooks/useNotFound';
 import NotFoundPage from '../../pages/NotFoundPage';
+import * as Sentry from '@sentry/browser';
+import CrashErrorScreen from './CrashErrorScreen';
+import ChunkErrorScreen from './ChunkErrorScreen';
 
 class ErrorBoundary extends React.Component {
   state = {
     hasError: false,
+    chunkError: false,
   };
   static getDerivedStateFromError(error: Error) {
+    if (error.name === 'ChunkLoadError') {
+      return {
+        chunkError: true,
+      };
+    }
     return { hasError: true };
   }
   componentDidCatch(error: Error, errorInfo: any) {
-    console.log({
-      error,
-      errorInfo,
-      stringifiedError: JSON.stringify(error || {}),
-    });
+    if (process.env.NODE_ENV === 'production') {
+      Sentry.captureException(error);
+    }
   }
   render() {
+    if (this.state.chunkError) {
+      return <ChunkErrorScreen />;
+    }
+    if (this.state.hasError) {
+      return <CrashErrorScreen />;
+    }
     return (
       <ErrorBoundaryWrapper hasError={this.state.hasError}>
         {this.props.children}

src/components/error/ErrorScreenTemplate.tsx

@@ -49,11 +49,14 @@ const Screen = styled.div`
   .message {
     padding-left: 1rem;
     padding-right: 1rem;
-
+    white-space: pre;
+    text-align: center;
+    line-height: 1.5;
     font-size: 2.5rem;
     color: ${palette.gray8};
     margin-top: 2rem;
     ${media.small} {
+      font-size: 1.5rem;
       margin-top: 1rem;
     }
   }

src/components/error/NetworkErrorScreen.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ErrorScreenTemplate from './ErrorScreenTemplate';
+import { undrawServerDown } from '../../static/images';
+
+export type NetworkErrorScreenProps = {};
+
+function NetworkErrorScreen(props: NetworkErrorScreenProps) {
+  return (
+    <ErrorScreenTemplate
+      image={undrawServerDown}
+      message={'서버와의 연결이 불안정합니다.\n잠시 후 시도해주세요.'}
+      buttonText="새로고침"
+      onButtonClick={() => window.location.reload()}
+    />
+  );
+}
+
+export default NetworkErrorScreen;

src/index.tsx

@@ -14,6 +14,11 @@ import client from './lib/graphql/client';
 import rootReducer from './modules';
 import storage from './lib/storage';
 import { setUser } from './modules/core';
+import * as Sentry from '@sentry/browser';
+
+Sentry.init({
+  dsn: 'https://[email protected]/1886813',
+});
 
 const store = createStore(
   rootReducer,

yarn.lock

@@ -1204,6 +1204,58 @@
     redux-thunk "^2.3.0"
     reselect "^4.0.0"
 
+"@sentry/browser@^5.11.1":
+  version "5.11.1"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.11.1.tgz#337ffcb52711b23064c847a07629e966f54a5ebb"
+  integrity sha512-oqOX/otmuP92DEGRyZeBuQokXdeT9HQRxH73oqIURXXNLMP3PWJALSb4HtT4AftEt/2ROGobZLuA4TaID6My/Q==
+  dependencies:
+    "@sentry/core" "5.11.1"
+    "@sentry/types" "5.11.0"
+    "@sentry/utils" "5.11.1"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "5.11.1"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.11.1.tgz#9e2da485e196ae32971545c1c49ee6fe719930e2"
+  integrity sha512-BpvPosVNT20Xso4gAV54Lu3KqDmD20vO63HYwbNdST5LUi8oYV4JhvOkoBraPEM2cbBwQvwVcFdeEYKk4tin9A==
+  dependencies:
+    "@sentry/hub" "5.11.1"
+    "@sentry/minimal" "5.11.1"
+    "@sentry/types" "5.11.0"
+    "@sentry/utils" "5.11.1"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "5.11.1"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.11.1.tgz#ddcb865563fae53852d405885c46b4c6de68a91b"
+  integrity sha512-ucKprYCbGGLLjVz4hWUqHN9KH0WKUkGf5ZYfD8LUhksuobRkYVyig0ZGbshECZxW5jcDTzip4Q9Qimq/PkkXBg==
+  dependencies:
+    "@sentry/types" "5.11.0"
+    "@sentry/utils" "5.11.1"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "5.11.1"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.11.1.tgz#0e705d01a567282d8fbbda2aed848b4974cc3cec"
+  integrity sha512-HK8zs7Pgdq7DsbZQTThrhQPrJsVWzz7MaluAbQA0rTIAJ3TvHKQpsVRu17xDpjZXypqWcKCRsthDrC4LxDM1Bg==
+  dependencies:
+    "@sentry/hub" "5.11.1"
+    "@sentry/types" "5.11.0"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "5.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.11.0.tgz#40f0f3174362928e033ddd9725d55e7c5cb7c5b6"
+  integrity sha512-1Uhycpmeo1ZK2GLvrtwZhTwIodJHcyIS6bn+t4IMkN9MFoo6ktbAfhvexBDW/IDtdLlCGJbfm8nIZerxy0QUpg==
+
+"@sentry/[email protected]":
+  version "5.11.1"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.11.1.tgz#aa19fcc234cf632257b2281261651d2fac967607"
+  integrity sha512-O0Zl4R2JJh8cTkQ8ZL2cDqGCmQdpA5VeXpuBbEl1v78LQPkBDISi35wH4mKmLwMsLBtTVpx2UeUHBj0KO5aLlA==
+  dependencies:
+    "@sentry/types" "5.11.0"
+    tslib "^1.9.3"
+
 "@sheerun/mutationobserver-shim@^0.3.2":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b"