Infrastructure for stream interceptor transform nodes

Summary:
Added stream interecptor which gets a chance to augment the messages off the wire. Stream interceptor transformations are async and can fail  due to network errors so added error state with a retry button. The retry button will just call the function again.

I am also handling errors better generally when this method fails unexpectedly, logging more clearly what went wrong and communicating it to the user

Did some refactoring of subtree update event to support this

Reviewed By: lblasa

Differential Revision: D44415260

fbshipit-source-id: a5a5542b318775b641d53941808399a8fa4634d3

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

@@ -0,0 +1,36 @@
+/**
+ * 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 {Button, Result} from 'antd';
+import * as React from 'react';
+
+export function StreamInterceptorErrorView({
+ retryCallback,
+ title,
+ message,
+}: {
+ title: string;
+ message: string;
+ retryCallback?: () => void;
+}): React.ReactElement {
+ return (
+ <Result
+ status="error"
+ title={title}
+ subTitle={message}
+ extra={
+ retryCallback && (
+ <Button onClick={retryCallback} type="primary">
+ Retry
+ </Button>
+ )
+ }
+ />
+ );
+}

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

@@ -31,6 +31,9 @@ import {Tree2} from './Tree';
 export function Component() {
  const instance = usePlugin(plugin);
  const rootId = useValue(instance.rootId);
+ const streamInterceptorError = useValue(
+ instance.uiState.streamInterceptorError,
+ );
  const visualiserWidth = useValue(instance.uiState.visualiserWidth);
  const nodes: Map<Id, UINode> = useValue(instance.nodes);
  const metadata: Map<MetadataId, Metadata> = useValue(instance.metadata);
@@ -53,7 +56,17 @@ export function Component() {
 
  if (showPerfStats) return <PerfStats events={instance.perfEvents} />;
 
- if (rootId) {
+ if (streamInterceptorError != null) {
+ return streamInterceptorError;
+ }
+
+ if (rootId == null || nodes.size == 0) {
+ return (
+ <Centered>
+ <Spin data-testid="loading-indicator" />
+ </Centered>
+ );
+ } else {
  return (
  <QueryClientProvider client={instance.queryClient}>
  <Layout.Container grow padh="small" padv="medium">
@@ -98,12 +111,6 @@ export function Component() {
  </QueryClientProvider>
  );
  }
-
- return (
- <Centered>
- <Spin data-testid="loading-indicator" />
- </Centered>
- );
 }
 
 export function Centered(props: {children: React.ReactNode}) {

desktop/plugins/public/ui-debugger/fb-stubs/StreamInterceptor.tsx

@@ -0,0 +1,28 @@
+/**
+ * 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 {Id, Metadata, StreamInterceptor, UINode} from '../types';
+
+export function getStreamInterceptor(): StreamInterceptor {
+ return new NoOpStreamInterceptor();
+}
+
+class NoOpStreamInterceptor implements StreamInterceptor {
+ init() {
+ return null;
+ }
+
+ async transformNodes(nodes: Map<Id, UINode>): Promise<Map<Id, UINode>> {
+ return nodes;
+ }
+
+ async transformMetadata(metadata: Metadata): Promise<Metadata> {
+ return metadata;
+ }
+}

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

@@ -16,18 +16,23 @@ import {
 } from 'flipper-plugin';
 import {
  Events,
- Id,
  FrameworkEvent,
  FrameworkEventType,
+ Id,
  Metadata,
  MetadataId,
  PerformanceStatsEvent,
  Snapshot,
+ StreamInterceptorError,
+ SubtreeUpdateEvent,
  UINode,
 } from './types';
 import {Draft} from 'immer';
 import {QueryClient, setLogger} from 'react-query';
 import {tracker} from './tracker';
+import {getStreamInterceptor} from './fb-stubs/StreamInterceptor';
+import React from 'react';
+import {StreamInterceptorErrorView} from './components/StreamInterceptorErrorView';
 
 type SnapshotInfo = {nodeId: Id; base64Image: Snapshot};
 type LiveClientState = {
@@ -37,6 +42,7 @@ type LiveClientState = {
 
 type UIState = {
  isPaused: Atom<boolean>;
+ streamInterceptorError: Atom<React.ReactNode | undefined>;
  searchTerm: Atom<string>;
  isContextMenuOpen: Atom<boolean>;
  hoveredNodes: Atom<Id[]>;
@@ -50,7 +56,9 @@ type UIState = {
 
 export function plugin(client: PluginClient<Events>) {
  const rootId = createState<Id | undefined>(undefined);
+
  const metadata = createState<Map<MetadataId, Metadata>>(new Map());
+ const streamInterceptor = getStreamInterceptor();
 
  const device = client.device.os;
 
@@ -106,7 +114,7 @@ export function plugin(client: PluginClient<Events>) {
  perfEvents.append(event);
  });
 
- const nodes = createState<Map<Id, UINode>>(new Map());
+ const nodesAtom = createState<Map<Id, UINode>>(new Map());
  const frameworkEvents = createState<Map<Id, FrameworkEvent[]>>(new Map());
 
  const highlightedNodes = createState(new Set<Id>());
@@ -116,6 +124,7 @@ export function plugin(client: PluginClient<Events>) {
  //used to disabled hover effects which cause rerenders and mess up the existing context menu
  isContextMenuOpen: createState<boolean>(false),
 
+ streamInterceptorError: createState<React.ReactNode | undefined>(undefined),
  visualiserWidth: createState(Math.min(window.innerWidth / 4.5, 500)),
 
  highlightedNodes,
@@ -148,9 +157,9 @@ export function plugin(client: PluginClient<Events>) {
  collapseinActiveChildren(node, draft);
  });
  });
- nodes.set(liveClientData.nodes);
+ nodesAtom.set(liveClientData.nodes);
  snapshot.set(liveClientData.snapshotInfo);
- checkFocusedNodeStillActive(uiState, nodes.get());
+ checkFocusedNodeStillActive(uiState, nodesAtom.get());
  }
  };
 
@@ -162,7 +171,51 @@ export function plugin(client: PluginClient<Events>) {
  };
 
  const seenNodes = new Set<Id>();
- client.onMessage('subtreeUpdate', (subtreeUpdate) => {
+ const subTreeUpdateCallBack = async (subtreeUpdate: SubtreeUpdateEvent) => {
+ try {
+ const processedNodes = await streamInterceptor.transformNodes(
+ new Map(subtreeUpdate.nodes.map((node) => [node.id, {...node}])),
+ );
+ applyFrameData(processedNodes, {
+ nodeId: subtreeUpdate.rootId,
+ base64Image: subtreeUpdate.snapshot,
+ });
+
+ applyFrameworkEvents(subtreeUpdate);
+
+ uiState.streamInterceptorError.set(undefined);
+ } catch (error) {
+ if (error instanceof StreamInterceptorError) {
+ const retryCallback = () => {
+ uiState.streamInterceptorError.set(undefined);
+ //wipe the internal state so loading indicator appears
+ applyFrameData(new Map(), null);
+ subTreeUpdateCallBack(subtreeUpdate);
+ };
+ uiState.streamInterceptorError.set(
+ <StreamInterceptorErrorView
+ message={error.message}
+ title={error.title}
+ retryCallback={retryCallback}
+ />,
+ );
+ } else {
+ console.error(
+ `[ui-debugger] Unexpected Error processing frame from ${client.appName}`,
+ error,
+ );
+
+ uiState.streamInterceptorError.set(
+ <StreamInterceptorErrorView
+ message="Something has gone horribly wrong, we are aware of this and are looking into it"
+ title="Oops"
+ />,
+ );
+ }
+ }
+ };
+
+ function applyFrameworkEvents(subtreeUpdate: SubtreeUpdateEvent) {
  frameworkEvents.update((draft) => {
  if (subtreeUpdate.frameworkEvents) {
  subtreeUpdate.frameworkEvents.forEach((frameworkEvent) => {
@@ -192,23 +245,24 @@ export function plugin(client: PluginClient<Events>) {
  }, HighlightTime);
  }
  });
+ }
 
+ //todo deal with racecondition, where bloks screen is fetching, takes time then you go back get more recent frame then bloks screen comes and overrites it
+ function applyFrameData(
+ nodes: Map<Id, UINode>,
+ snapshotInfo: SnapshotInfo | null,
+ ) {
  liveClientData = produce(liveClientData, (draft) => {
- if (subtreeUpdate.snapshot) {
- draft.snapshotInfo = {
- nodeId: subtreeUpdate.rootId,
- base64Image: subtreeUpdate.snapshot,
- };
+ if (snapshotInfo) {
+ draft.snapshotInfo = snapshotInfo;
  }
 
- subtreeUpdate.nodes.forEach((node) => {
- draft.nodes.set(node.id, {...node});
- });
+ draft.nodes = nodes;
  setParentPointers(rootId.get()!!, undefined, draft.nodes);
  });
 
  uiState.expandedNodes.update((draft) => {
- for (const node of subtreeUpdate.nodes) {
+ for (const node of nodes.values()) {
  if (!seenNodes.has(node.id)) {
  draft.add(node.id);
  }
@@ -223,20 +277,21 @@ export function plugin(client: PluginClient<Events>) {
  });
 
  if (!uiState.isPaused.get()) {
- nodes.set(liveClientData.nodes);
+ nodesAtom.set(liveClientData.nodes);
  snapshot.set(liveClientData.snapshotInfo);
 
- checkFocusedNodeStillActive(uiState, nodes.get());
+ checkFocusedNodeStillActive(uiState, nodesAtom.get());
  }
- });
+ }
+ client.onMessage('subtreeUpdate', subTreeUpdateCallBack);
 
  const queryClient = new QueryClient({});
 
  return {
  rootId,
  uiState,
- uiActions: uiActions(uiState, nodes),
- nodes,
+ uiActions: uiActions(uiState, nodesAtom),
+ nodes: nodesAtom,
  frameworkEvents,
  snapshot,
  metadata,
@@ -391,6 +446,7 @@ function collapseinActiveChildren(node: UINode, expandedNodes: Draft<Set<Id>>) {
 const HighlightTime = 300;
 
 export {Component} from './components/main';
+export * from './types';
 
 setLogger({
  log: (...args) => {

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

@@ -15,6 +15,8 @@ export type Events = {
  metadataUpdate: UpdateMetadataEvent;
 };
 
+export type StreamFlowState = {paused: boolean};
+
 export type SubtreeUpdateEvent = {
  txId: number;
  rootId: Id;
@@ -242,3 +244,18 @@ export type InspectableUnknown = {
  type: 'unknown';
  value: string;
 };
+
+export interface StreamInterceptor {
+ transformNodes(nodes: Map<Id, UINode>): Promise<Map<Id, UINode>>;
+
+ transformMetadata(metadata: Metadata): Promise<Metadata>;
+}
+
+export class StreamInterceptorError extends Error {
+ title: string;
+
+ constructor(title: string, message: string) {
+ super(message);
+ this.title = title;
+ }
+}