50-white-screen-on-empty-content-type (#51)

* fix: White screen on empty Content-Type #50

* fix

* feat: add error boundary to catch errors

* chore: code formatting

---------

Co-authored-by: no <no>

Author: Mark

components/ContentView.tsx

@@ -9,6 +9,7 @@ import { TextView } from './content-view/TextView';
 import { ViewMode } from './content-view/viewModes';
 import { ViewModeSelect } from './content-view/ViewModeSelect';
 import { XMLView } from './content-view/XMLView';
+import { withUiErrorBoundary } from '../utils/withUiErrorBoundary';
 
 const useStyles = makeStyles((theme) => ({
     contentArea: {
@@ -21,7 +22,7 @@ export interface IContentViewProps {
     data: Buffer;
 }
 
-export const ContentView: FC<IContentViewProps> = ({ contentType, data }) => {
+const ContentViewInner: FC<IContentViewProps> = ({ contentType, data }) => {
     const detected = detectType(contentType);
     const [viewMode, setViewMode] = useState<ViewMode>(detected.viewType);
     useEffect(() => {
@@ -50,3 +51,5 @@ export const ContentView: FC<IContentViewProps> = ({ contentType, data }) => {
         </Grid>
     );
 };
+
+export const ContentView = withUiErrorBoundary(ContentViewInner);

components/content-view/__tests__/detectType.spec.ts

@@ -0,0 +1,25 @@
+import { detectType } from '../detectType';
+
+describe('detectType', function () {
+    it('should work', function () {
+        expect(detectType('application/json')).toEqual({
+            pureType: 'application/json',
+            viewType: 'json',
+        });
+
+        expect(detectType('application/json; charset=utf-8')).toEqual({
+            pureType: 'application/json',
+            viewType: 'json',
+        });
+
+        expect(detectType('application/json; charset=utf-8; foo=bar')).toEqual({
+            pureType: 'application/json',
+            viewType: 'json',
+        });
+
+        expect(detectType(null)).toEqual({
+            pureType: '',
+            viewType: 'plain',
+        });
+    });
+});

components/content-view/detectType.ts

@@ -10,10 +10,11 @@ type ViewType = 'plain' | 'image' | 'json' | 'xml' | 'form';
 
 const plusSuffixRegex = /\+(\w+)/g;
 
-export function detectType(
-    contentType: string | null
-): { pureType: string; viewType: ViewType } {
-    const [pureType] = contentType?.split(';') ?? [];
+export function detectType(contentType: string | null): {
+    pureType: string;
+    viewType: ViewType;
+} {
+    const [pureType] = contentType?.split(';') ?? [''];
 
     // https://trac.tools.ietf.org/html/draft-ietf-appsawg-media-type-suffix-regs-02
     const plusSuffices = new Set(

package.json

@@ -110,6 +110,7 @@
         "react-inspector": "^5.1.0",
         "react-redux": "^7.1.1",
         "react-splitter-layout": "^4.0.0",
+        "react-use-error-boundary": "^3.0.0",
         "redux": "^4.0.4",
         "redux-saga": "^1.1.3",
         "reselect": "^4.0.0",

utils/withUiErrorBoundary.tsx

@@ -0,0 +1,55 @@
+import Button from '@material-ui/core/Button';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import Typography from '@material-ui/core/Typography';
+import React, { FC } from 'react';
+import { useErrorBoundary, withErrorBoundary } from 'react-use-error-boundary';
+
+const useErrorBoundaryStyles = makeStyles((_theme) => ({
+    errorContainer: {
+        display       : 'flex',
+        flexDirection : 'column',
+        justifyContent: 'center',
+        alignItems    : 'center',
+        height        : '100%',
+    },
+    errorMessage: {
+        textAlign: 'center',
+    },
+}));
+export function withUiErrorBoundary<Props>(Component: FC<Props>) {
+    const WithUiErrorBoundary: FC<Props> = withErrorBoundary((props) => {
+        const [error, retry] = useErrorBoundary();
+        const classes = useErrorBoundaryStyles();
+        if (error) {
+            return (
+                <div className={classes.errorContainer}>
+                    <Typography
+                        variant="h5"
+                        color="textPrimary"
+                        className={classes.errorMessage}
+                    >
+                        Something went wrong...
+                    </Typography>
+                    <div>
+                        <Button
+                            variant="contained"
+                            color="primary"
+                            onClick={retry}
+                        >
+                            Retry
+                        </Button>
+                    </div>
+                    <Typography
+                        variant="body1"
+                        color="textPrimary"
+                        className={classes.errorMessage}
+                    >
+                        <pre>{(error as Error).message}</pre>
+                    </Typography>
+                </div>
+            );
+        }
+        return <Component {...props} />;
+    });
+    return WithUiErrorBoundary;
+}

yarn.lock

@@ -11528,6 +11528,11 @@ react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-use-error-boundary@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-use-error-boundary/-/react-use-error-boundary-3.0.0.tgz#c5b44acf9ab376f59a219d740ac372b05aba6240"
+  integrity sha512-5urkfyU3ZzInEMSHe1gxtDzlQAHs0krTt0V6h8H2L5nXhDKq3OYXnCs9lGHDkEkYvLmsphw8ap5g8uYfvrkJng==
+
 react@^16.9.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"