nothing to see here

[aidenybai]

Monitoring Feature List

• [ ] Component Monitoring View (p50, p99, p999) # of Renders, Total Time (in dev), Self Time (in dev).
• [ ] Interaction Monitoring View (p50, p99, p999) # of Renders caused, Time, Interaction Type ("click", "scroll", "keypress"), and Interaction Name ("CustomButton"). Display ${interaction.type} : ${interaction.name}, i.e click : CustomButton
• [ ] Divide Components, Interactions, and Paths by Good, Needs Improvement, Poor sections
• [ ] Countries, Devices, Operating Systems
• [ ] Total Interactions over Time

Technical List

• [ ] Unique Interaction Id - A unique interaction should be groupable across deployments and sessions.
• [ ] Normalized Dynamic Routes - Paths with dynamic params are normalized from /branch/123/category/456 to /branch/:brandId/category/:categoryId. Use Vercel Analytics approach to having different imports for each framework with custom route and URL prop. https://github.com/vercel/analytics/blob/main/packages/web/src/nextjs/index.tsx
• [ ] Add API KEY support where the key is sent via the "X-API-KEY" header

Data Structure

export interface Session {
  id: string; // nanoid
  url: string; // flush everytime route changes for accuracy
  device: 0 /* desktop */ | 1 /* tablet */ | 2 /* mobile */
  agent: string; /* user agent */
  wifi: string; /* idk if necessary */
  cpu: number;
  gpu: string | null;
  mem: number;
}

export interface IngestRequest {
  interactions: Interaction[];
  components: Component[];
  session: Session;
}

interface Interaction {
  id: string; // a hashed unique id for interaction (groupable across sessions)
  name: string; // name of interaction (i.e nav#top-menu.sc-601d0142-19.gHiJkL) or something useful
  type: string // type of interaction i.e pointer
  time: number; // time of interaction in ms
  timestamp: number; 
  //... anything you might need here
}

interface Component {
  interactionId: string; // grouping components by interaction
  name: string;
  renders: number; // how many times it re-rendered / instances (normalized)
  instances: number; // instances which will be used to get number of total renders by * by renders
  totalTime?: number;
  selfTime?: number;
}