Issue #1375 - Error view instead of blank page in UI (#1726)

ui/src/app/app.tsx

@@ -74,19 +74,23 @@ requests.onError.subscribe(async (err) => {
     }
 });
 
-export class App extends React.Component<{}, { popupProps: PopupProps }> {
+export class App extends React.Component<{}, { popupProps: PopupProps, error: Error }> {
     public static childContextTypes = {
         history: PropTypes.object,
         apis: PropTypes.object,
     };
 
+    public static getDerivedStateFromError(error: Error) {
+        return { error };
+    }
+
     private popupManager: PopupManager;
     private notificationsManager: NotificationsManager;
     private navigationManager: NavigationManager;
 
     constructor(props: {}) {
         super(props);
-        this.state = { popupProps: null };
+        this.state = { popupProps: null, error: null };
         this.popupManager = new PopupManager();
         this.notificationsManager = new NotificationsManager();
         this.navigationManager = new NavigationManager(history);
@@ -97,6 +101,20 @@ export class App extends React.Component<{}, { popupProps: PopupProps }> {
     }
 
     public render() {
+        if (this.state.error != null) {
+            const stack = this.state.error.stack;
+            const url = 'https://github.com/argoproj/argo-cd/issues/new?labels=bug&template=bug_report.md';
+
+            return (
+                <React.Fragment>
+                    <p>Something went wrong!</p>
+                    <p>Consider submitting an issue <a href={url}>here</a>.</p><br />
+                    <p>Stacktrace:</p>
+                    <pre>{stack}</pre>
+                </React.Fragment>
+            );
+        }
+
         return (
             <React.Fragment>
                 <Helmet>