diff --git a/desktop/plugins/public/ui-debugger/ClientTypes.tsx b/desktop/plugins/public/ui-debugger/ClientTypes.tsx index 94e2c297caa..d58e7151412 100644 --- a/desktop/plugins/public/ui-debugger/ClientTypes.tsx +++ b/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. diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx index d21934efdf7..170952a40f5 100644 --- a/desktop/plugins/public/ui-debugger/index.tsx +++ b/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) { const rootId = createState(undefined); @@ -114,6 +115,8 @@ export function plugin(client: PluginClient) { }); }); + handleTraversalError(client); + client.onConnect(() => { uiState.isConnected.set(true); console.log('[ui-debugger] connected'); diff --git a/desktop/plugins/public/ui-debugger/plugin/traversalError.tsx b/desktop/plugins/public/ui-debugger/plugin/traversalError.tsx new file mode 100644 index 00000000000..7fdadd17003 --- /dev/null +++ b/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) { + 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, + ); + }); +}