Skip to main content

Activity

The activity API allows users to compose multiple data sources into a single view that looks and behaves like Chrome's network tab.

Once a data source is provided to aside, you get out of the box:

  • Show events in the activity table.
  • Filter events by type.
  • Filter events by a value or key.
  • Diffing between past and current state snapshots.
  • Event persistence using the storage api.

Usage​

note

This tutorial assumes that you have already integrated your app with aside. If that's not the case, first start by completing the getting started tutorial.

1. Install the activity package​

npm install @aside/activity

2. Create a monitor​

Create a monitor to track past and current states from within your app. The useMonitor hook will create snapshots of any value provided to the hook and make sure to construct activity events.

import {useMonitor} from '@aside/activity';

// ...
const count = useContext(CountContext);
const contextMonitor = useMonitor(
  {CountContext: count},
  [count],
);

3. Create an activity store​

Using the monitor created previously, create an activity store and provide it to the ActivityProvider component.

import {
  useMonitor,
  ActivityProvider,
} from '@aside/activity';

// ...
const appActivity: ActivityStoreDescriptor[] = useMemo(
  () => [
    {
      type: 'react',
      displayName: 'React context',
      monitor: contextMonitor,
      icon: 'https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg',
    },
  ],
  [contextMonitor],
);

return (
  <Aside>
    <Devtools>
      <ActivityProvider activity={appActivity}>
        <AsideApp />
      </ActivityProvider>
    </Devtools>
  </Aside>
);

4. Build the activity view​

Using the components from @aside/chrome-ui-remote we will build the interface to show our app state.

We will leverage three other components from @aside/activity:

  • Activity: Renders the frame and controls of the activity view.
  • ActivityDetails: Renders a specific event or snapshot.
  • ActivityView: Renders the latest event or snapshot for a data type.
import {
  useMonitor,
  ActivityProvider,
  Activity,
  ActivityDetails,
  ActivityView,
} from '@aside/activity';

function AsideApp() {
  const [tab, setTab] = useLocalStorageState('activity', {
    key: 'tab',
  });

  if (tab.loading) return null;

  return (
    <Pane>
      <Tabs defaultValue={tab.data} onValueChange={setTab}>
        <PaneToolbar>
          <TabsList>
            <TabsTrigger value="activity">Activity</TabsTrigger>
            <TabsTrigger value="react">React</TabsTrigger>
          </TabsList>
        </PaneToolbar>

        <TabsContent value="activity">
          <Activity>
            <ActivityDetails type="react" />
          </Activity>
        </TabsContent>
        <TabsContent value="react">
          <ActivityView type="react" />
        </TabsContent>
      </Tabs>
    </Pane>
  );
}