Handle traversal error

Summary: Log as console . error so we get a log view and inform the user

Reviewed By: lblasa

Differential Revision: D50450794

fbshipit-source-id: 0eb1877eec4d602d6673dd2815af2692e89b2523

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

@@ -13,6 +13,7 @@ export type Events = {
   init: InitEvent;
   subtreeUpdate: SubtreeUpdateEvent;
   frameScan: FrameScanEvent;
+  traversalError: TraversalErrorEvent;
   perfStats: PerfStatsEvent;
   performanceStats: PerformanceStatsEvent;
   metadataUpdate: UpdateMetadataEvent;
@@ -34,6 +35,13 @@ export type FrameScanEvent = {
   frameworkEvents?: FrameworkEvent[];
 };
 
+export type TraversalErrorEvent = {
+  nodeName: String;
+  errorType: String;
+  errorMessage: String;
+  stack: String;
+};
+
 /**
  * @deprecated This  event should not be used and soon will
  * be removed. FrameScan should be used instead.

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

@@ -40,6 +40,7 @@ import {checkFocusedNodeStillActive} from './plugin/ClientDataUtils';
 import {uiActions} from './plugin/uiActions';
 import {first} from 'lodash';
 import {getNode} from './utils/map';
+import {handleTraversalError} from './plugin/traversalError';
 
 export function plugin(client: PluginClient<Events, Methods>) {
   const rootId = createState<Id | undefined>(undefined);
@@ -114,6 +115,8 @@ export function plugin(client: PluginClient<Events, Methods>) {
     });
   });
 
+  handleTraversalError(client);
+
   client.onConnect(() => {
     uiState.isConnected.set(true);
     console.log('[ui-debugger] connected');

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

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {notification} from 'antd';
+import {PluginClient} from 'flipper-plugin';
+import {Events, Methods} from '../ClientTypes';
+
+export function handleTraversalError(client: PluginClient<Events, Methods>) {
+  client.onMessage('traversalError', (event) => {
+    notification.warn({
+      key: 'client-traversal-error',
+      duration: 60,
+      message: 'Error fetching UI dump',
+      description: `There was an error  UI dump, ${event.errorType} ${event.errorMessage}. We are aware of this and looking into it. Please try again later.`,
+    });
+    console.error(
+      `[ui-debugger] Client error during traversal: `,
+      event,
+      client.appName,
+      client.device.os,
+    );
+  });
+}