handle error when device disconected

Summary: Log views were being generated, this seems like a reasonable solution.

Reviewed By: zats

Differential Revision: D49547368

fbshipit-source-id: 575dd81a7c9b9a831d1dfb46088c2f5e1d731f22

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

@@ -19,6 +19,10 @@ export type Events = {
   setTraversalMode: SetTraversalModeEvent;
 };
 
+export type Methods = {
+  onTraversalModeChange(params: {mode: TraversalMode}): Promise<void>;
+};
+
 export type SetTraversalModeEvent = {
   mode: TraversalMode;
 };

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

@@ -46,7 +46,7 @@ export type UIState = {
   filterMainThreadMonitoring: Atom<boolean>;
 
   supportedTraversalModes: Atom<TraversalMode[]>;
-  currentTraversalMode: Atom<TraversalMode>;
+  traversalMode: Atom<TraversalMode>;
 };
 
 //enumerates the keys of input type and casts each to ReadOnlyAtom, this is so we only expose read only atoms to the UI
@@ -113,7 +113,7 @@ export type UIActions = {
   onCollapseAllNonAncestors: (nodeId: Id) => void;
   onCollapseAllRecursively: (nodeId: Id) => void;
   ensureAncestorsExpanded: (nodeId: Id) => void;
-  setCurrentTraversalMode: (mode: TraversalMode) => void;
+  onSetTraversalMode: (mode: TraversalMode) => void;
 };
 
 export type SelectionSource =

desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx

@@ -52,7 +52,7 @@ export const TreeControls: React.FC = () => {
 
   const frameworkEventMetadata = useValue(instance.frameworkEventMetadata);
 
-  const currentTraversalMode = useValue(instance.uiState.currentTraversalMode);
+  const currentTraversalMode = useValue(instance.uiState.traversalMode);
   const supportedTraversalModes = useValue(
     instance.uiState.supportedTraversalModes,
   );
@@ -65,6 +65,8 @@ export const TreeControls: React.FC = () => {
     }
   };
 
+  const isConnected = useValue(instance.uiState.isConnected);
+
   const menus = supportedTraversalModes.map((mode) => ({
     key: mode,
     label: labelForMode(mode),
@@ -74,18 +76,18 @@ export const TreeControls: React.FC = () => {
     <Layout.Horizontal gap="medium" pad="medium">
       {supportedTraversalModes.length > 1 ? (
         <Dropdown
+          disabled={!isConnected}
           menu={{
             selectable: true,
             selectedKeys: [currentTraversalMode],
             items: menus,
             onSelect: async (event) => {
               const mode = event.selectedKeys[0] as TraversalMode;
-              instance.uiActions.setCurrentTraversalMode(mode); // update UI
-              await instance.onTraversalModeChange(mode); // update mobile client
+              instance.uiActions.onSetTraversalMode(mode); // update UI
             },
           }}>
-          <Tooltip title="Debugger Mode">
-            <Button shape="circle">
+          <Tooltip title={isConnected ? 'Debugger Mode' : 'App disconnected'}>
+            <Button disabled={!isConnected} shape="circle">
               <AppstoreOutlined />
             </Button>
           </Tooltip>

desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx

@@ -51,7 +51,7 @@ export const Visualization2D: React.FC<
   const hoveredNodes = useValue(instance.uiState.hoveredNodes);
   const hoveredNodeId = head(hoveredNodes);
   const wireFrameMode = useValue(instance.uiState.wireFrameMode);
-  const traversalMode = useValue(instance.uiState.currentTraversalMode);
+  const traversalMode = useValue(instance.uiState.traversalMode);
 
   const [targetMode, setTargetMode] = useState<TargetModeState>({
     state: 'disabled',

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

@@ -19,6 +19,7 @@ import {
   SnapshotInfo,
   ClientNode,
   FrameworkEventMetadata,
+  Methods,
 } from './ClientTypes';
 import {
   UIState,
@@ -40,14 +41,6 @@ import {uiActions} from './plugin/uiActions';
 import {first} from 'lodash';
 import {getNode} from './utils/map';
 
-type TraversalModeChangeEvent = {
-  mode: TraversalMode;
-};
-
-export type Methods = {
-  onTraversalModeChange(params: TraversalModeChangeEvent): Promise<void>;
-};
-
 export function plugin(client: PluginClient<Events, Methods>) {
   const rootId = createState<Id | undefined>(undefined);
   const metadata = createState<Map<MetadataId, Metadata>>(new Map());
@@ -82,6 +75,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
     nodesAtom,
     snapshot,
     mutableLiveClientData,
+    client,
   );
 
   const perfEvents = createDataSource<PerformanceStatsEvent, 'txId'>([], {
@@ -107,7 +101,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
       event.currentTraversalMode &&
       uiState.supportedTraversalModes.get().includes(event.currentTraversalMode)
     ) {
-      uiState.currentTraversalMode.set(event.currentTraversalMode);
+      uiState.traversalMode.set(event.currentTraversalMode);
       console.log(
         `[ui-debugger] Unsupported debugger mode ${event.currentTraversalMode}.`,
       );
@@ -285,9 +279,6 @@ export function plugin(client: PluginClient<Events, Methods>) {
   });
   client.onMessage('frameScan', processFrame);
 
-  const onTraversalModeChange = async (mode: TraversalMode) =>
-    client.send('onTraversalModeChange', {mode});
-
   return {
     rootId,
     uiState: uiState as ReadOnlyUIState,
@@ -300,7 +291,6 @@ export function plugin(client: PluginClient<Events, Methods>) {
     metadata,
     perfEvents,
     os: client.device.os,
-    onTraversalModeChange,
   };
 }
 
@@ -343,6 +333,6 @@ function createUIState(): UIState {
 
     // view-hierarchy is the default state so we start with it until we fetch supported modes from the client
     supportedTraversalModes: createState<TraversalMode[]>(['view-hierarchy']),
-    currentTraversalMode: createState<TraversalMode>('view-hierarchy'),
+    traversalMode: createState<TraversalMode>('view-hierarchy'),
   };
 }

desktop/plugins/public/ui-debugger/plugin/uiActions.tsx

@@ -7,9 +7,16 @@
  * @format
  */
 
-import {Atom} from 'flipper-plugin';
+import {Atom, PluginClient} from 'flipper-plugin';
 import {debounce} from 'lodash';
-import {ClientNode, FrameworkEventType, Id, SnapshotInfo} from '../ClientTypes';
+import {
+  ClientNode,
+  Events,
+  FrameworkEventType,
+  Id,
+  Methods,
+  SnapshotInfo,
+} from '../ClientTypes';
 import {
   TraversalMode,
   LiveClientState,
@@ -27,6 +34,7 @@ export function uiActions(
   nodes: Atom<Map<Id, ClientNode>>,
   snapshot: Atom<SnapshotInfo | null>,
   liveClientData: LiveClientState,
+  client: PluginClient<Events, Methods>,
 ): UIActions {
   const onExpandNode = (node: Id) => {
     uiState.expandedNodes.update((draft) => {
@@ -190,9 +198,17 @@ export function uiActions(
     searchTermUpdatedDebounced(searchTerm);
   };
 
-  const setCurrentTraversalMode = (mode: TraversalMode) => {
-    tracker.track('traversal-mode-updated', {mode});
-    uiState.currentTraversalMode.set(mode);
+  const onSetTraversalMode = (newMode: TraversalMode) => {
+    tracker.track('traversal-mode-updated', {mode: newMode});
+    const currentMode = uiState.traversalMode.get();
+    uiState.traversalMode.set(newMode);
+
+    try {
+      client.send('onTraversalModeChange', {mode: newMode});
+    } catch (err) {
+      console.warn('[ui-debugger] Unable to set traversal mode', err);
+      uiState.traversalMode.set(currentMode);
+    }
   };
 
   return {
@@ -213,6 +229,6 @@ export function uiActions(
     onExpandAllRecursively,
     onCollapseAllRecursively,
     ensureAncestorsExpanded,
-    setCurrentTraversalMode,
+    onSetTraversalMode,
   };
 }