Feat. add error boundary

src/App/Components/Markdown/Previewer/ErrorBoundary.js

@@ -0,0 +1,48 @@
+import React from 'react';
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+  componentDidCatch(error, errorInfo) {
+    // Catch errors in any components below and re-render with error message
+    this.setState({
+      error: error,
+      errorInfo: errorInfo
+    });
+    // You can also log error messages to an error reporting service here
+  }
+  render() {
+    if (this.state.errorInfo) {
+      // Error path
+      return (
+        <div>
+          <p>Error occurs</p>
+          {/* <details style={{ whiteSpace: 'pre-wrap' }}>
+            {this.state.error && this.state.error.toString()}
+            <br />
+            {this.state.errorInfo.componentStack}
+          </details> */}
+          <button
+            onClick={() => {
+              window.location.reload();
+            }}
+            style={{
+              background: "none",
+              padding: "5px",
+              borderRadius: "5px",
+              boxShadow:"1px 1px 1px grey",
+              outline: "none",
+              cursor: "pointer"
+            }}
+          >
+            Reload This Page
+          </button>
+        </div>
+      );
+    }
+    // Normally, just render children
+    return this.props.children;
+  }
+}
+export default ErrorBoundary;

src/App/Components/Markdown/Previewer/index.js

@@ -1,6 +1,7 @@
 import React, { Suspense, lazy } from 'react';
 import styled from 'styled-components';
 import Loading from './Loading';
+import ErrorBoundary from './ErrorBoundary.js';
 import 'github-markdown-css';
 const Wrapper = styled.div`
   overflow-y: scroll;
@@ -12,13 +13,15 @@ const Wrapper = styled.div`
     overflow-y: hidden;
   }
 `;
-const LazyPreivew = lazy(() => import('./Preview.js'));
+const LazyPreview = lazy(() => import('./Preview.js'));
 export default ({ source, children }) => {
   return (
-    <Suspense fallback={<Loading duration={0.5} />}>
-      <Wrapper className="preview  markdown-body">
-        <LazyPreivew source={source}>{children}</LazyPreivew>
-      </Wrapper>
-    </Suspense>
+    <ErrorBoundary>
+      <Suspense fallback={<Loading duration={0.5} />}>
+        <Wrapper className="preview  markdown-body">
+          <LazyPreview source={source}>{children}</LazyPreview>
+        </Wrapper>
+      </Suspense>
+    </ErrorBoundary>
   );
 };