update revision renderer

packages/app/src/components/Page/RevisionRenderer.tsx

@@ -1,20 +1,30 @@
 import React from 'react';
 
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import ReactMarkdown from 'react-markdown';
 
 import type { RendererOptions } from '~/services/renderer/renderer';
 import loggerFactory from '~/utils/logger';
 
-
 const logger = loggerFactory('components:Page:RevisionRenderer');
 
-
 type Props = {
   rendererOptions: RendererOptions,
   markdown: string,
   additionalClassName?: string,
 }
 
+const ErrorFallback: React.FC<FallbackProps> = React.memo(({ error, resetErrorBoundary }) => {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre>{error.message}</pre>
+      <button onClick={resetErrorBoundary}>Reload</button>
+    </div>
+  );
+});
+ErrorFallback.displayName = 'ErrorFallback';
+
 const RevisionRenderer = React.memo((props: Props): JSX.Element => {
 
   const {
@@ -22,12 +32,14 @@ const RevisionRenderer = React.memo((props: Props): JSX.Element => {
   } = props;
 
   return (
-    <ReactMarkdown
-      {...rendererOptions}
-      className={`wiki ${additionalClassName ?? ''}`}
-    >
-      {markdown}
-    </ReactMarkdown>
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <ReactMarkdown
+        {...rendererOptions}
+        className={`wiki ${additionalClassName ?? ''}`}
+      >
+        {markdown}
+      </ReactMarkdown>
+    </ErrorBoundary>
   );
 
 });