Merge pull request velopert#125 from velopert/fix/write-invalid-tag-crash

Fix/write invalid tag crash

Author: velopert

src/components/common/MarkdownRender.tsx

@@ -173,6 +173,7 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
   );
 
   const [element, setElement] = useState<RenderedElement>(null);
+  const [hasTagError, setHasTagError] = useState(false);
 
   const applyElement = React.useMemo(() => {
     return throttle(250, (el: any) => {
@@ -204,18 +205,25 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
           return;
         }
 
-        const el = parse(editing ? html : filter(html));
-
-        applyElement(el);
+        try {
+          const el = parse(html);
+          setHasTagError(false);
+          applyElement(el);
+        } catch (e) {}
       });
   }, [applyElement, editing, markdown, onConvertFinish]);
 
   return (
     <Typography>
       {editing ? (
-        <MarkdownRenderBlock className={codeTheme}>
-          {element}
-        </MarkdownRenderBlock>
+        <MarkdownRenderErrorBoundary
+          onError={() => setHasTagError(true)}
+          hasTagError={hasTagError}
+        >
+          <MarkdownRenderBlock className={codeTheme}>
+            {element}
+          </MarkdownRenderBlock>
+        </MarkdownRenderErrorBoundary>
       ) : (
         <MarkdownRenderBlock
           className={codeTheme}
@@ -226,4 +234,35 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
   );
 };
 
+type ErrorBoundaryProps = {
+  onError: () => void;
+  hasTagError: boolean;
+};
+class MarkdownRenderErrorBoundary extends React.Component<ErrorBoundaryProps> {
+  state = {
+    hasError: false,
+  };
+  componentDidCatch() {
+    this.setState({
+      hasError: true,
+    });
+    this.props.onError();
+  }
+
+  componentDidUpdate(prevProps: ErrorBoundaryProps) {
+    if (prevProps.hasTagError && !this.props.hasTagError) {
+      this.setState({
+        hasError: false,
+      });
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <div>HTML 태그 파싱 실패</div>;
+    }
+    return this.props.children;
+  }
+}
+
 export default React.memo(MarkdownRender);

src/components/error/CrashErrorScreen.tsx

@@ -4,16 +4,21 @@ import ErrorScreenTemplate from './ErrorScreenTemplate';
 import { undrawBugFixing } from '../../static/images';
 import { useHistory } from 'react-router-dom';
 
-export type CrashErrorScreenProps = {};
+export type CrashErrorScreenProps = {
+  onResolve: () => void;
+};
 
-function CrashErrorScreen(props: CrashErrorScreenProps) {
+function CrashErrorScreen({ onResolve }: CrashErrorScreenProps) {
   const history = useHistory();
   return (
     <ErrorScreenTemplate
       image={undrawBugFixing}
       message="엇! 오류가 발생했습니다."
       buttonText="홈으로"
-      onButtonClick={() => history.push('/')}
+      onButtonClick={() => {
+        history.push('/');
+        onResolve();
+      }}
     />
   );
 }

src/components/error/ErrorBoundary.tsx

@@ -23,12 +23,18 @@ class ErrorBoundary extends React.Component {
       Sentry.captureException(error);
     }
   }
+
+  handleResolveError = () => {
+    this.setState({
+      hasError: false,
+    });
+  };
   render() {
     if (this.state.chunkError) {
       return <ChunkErrorScreen />;
     }
     if (this.state.hasError) {
-      return <CrashErrorScreen />;
+      return <CrashErrorScreen onResolve={this.handleResolveError} />;
     }
     return (
       <ErrorBoundaryWrapper hasError={this.state.hasError}>