Allow user to reset ui debugger after fatal error

Summary: Previously there was no way to get of this state

Reviewed By: aigoncharov

Differential Revision: D46803900

fbshipit-source-id: 2eb0eb41b58064659ef1d2cff245a2b8d7e2f261

desktop/plugins/public/ui-debugger/components/StreamInterceptorErrorView.tsx

@@ -7,30 +7,19 @@
  * @format
  */
 
-import {Button, Result} from 'antd';
+import {Result} from 'antd';
 import * as React from 'react';
 
 export function StreamInterceptorErrorView({
-  retryCallback,
+  button,
   title,
   message,
 }: {
   title: string;
   message: string;
-  retryCallback?: () => void;
+  button: React.ReactNode;
 }): React.ReactElement {
   return (
-    <Result
-      status="error"
-      title={title}
-      subTitle={message}
-      extra={
-        retryCallback && (
-          <Button onClick={retryCallback} type="primary">
-            Retry
-          </Button>
-        )
-      }
-    />
+    <Result status="error" title={title} subTitle={message} extra={button} />
   );
 }

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -50,11 +50,16 @@ export function Component() {
     setBottomPanelComponent(undefined);
   };
 
-  if (streamState.state === 'UnrecoverableError') {
+  if (streamState.state === 'FatalError') {
     return (
       <StreamInterceptorErrorView
-        title="Oops"
-        message="Something has gone horribly wrong, we are aware of this and are looking into it"
+        title="Fatal Error"
+        message={`Something has gone horribly wrong, we are aware of this and are looking into it, details ${streamState.error.name} ${streamState.error.message}`}
+        button={
+          <Button onClick={streamState.clearCallBack} type="primary">
+            Reset
+          </Button>
+        }
       />
     );
   }
@@ -64,7 +69,11 @@ export function Component() {
       <StreamInterceptorErrorView
         message={streamState.error.message}
         title={streamState.error.title}
-        retryCallback={streamState.retryCallback}
+        button={
+          <Button onClick={streamState.retryCallback} type="primary">
+            Retry
+          </Button>
+        }
       />
     );
   }

desktop/plugins/public/ui-debugger/index.tsx

@@ -136,7 +136,16 @@ export function plugin(client: PluginClient<Events>) {
         error,
       );
 
-      uiState.streamState.set({state: 'UnrecoverableError'});
+      uiState.streamState.set({
+        state: 'FatalError',
+        error: error,
+        clearCallBack: async () => {
+          uiState.streamState.set({state: 'Ok'});
+          nodesAtom.set(new Map());
+          frameworkEvents.set(new Map());
+          snapshot.set(null);
+        },
+      });
     }
   }
 

desktop/plugins/public/ui-debugger/types.tsx

@@ -16,7 +16,9 @@ export type StreamState =
       retryCallback: () => Promise<void>;
     }
   | {
-      state: 'UnrecoverableError';
+      state: 'FatalError';
+      error: Error;
+      clearCallBack: () => Promise<void>;
     };
 
 export type Events = {