@rozenite/network-activity-plugin 1.0.0-alpha.8 → 1.0.0-alpha.9

package/src/ui/state/derived.ts

@@ -0,0 +1,112 @@
+import { memoize } from 'proxy-memoize';
+import { NetworkActivityState } from './store';
+import {
+  ProcessedRequest,
+  HttpNetworkEntry,
+  WebSocketNetworkEntry,
+  SSENetworkEntry,
+} from './model';
+
+export const getProcessedRequests = memoize((state: NetworkActivityState) => {
+  const { networkEntries } = state;
+  const requests: ProcessedRequest[] = [];
+
+  for (const entry of networkEntries.values()) {
+    if (entry.type === 'http') {
+      const httpEntry = entry as HttpNetworkEntry;
+      requests.push({
+        id: httpEntry.id,
+        type: 'http',
+        name: httpEntry.request.url,
+        status: httpEntry.status,
+        timestamp: httpEntry.timestamp,
+        duration: httpEntry.duration,
+        size: httpEntry.size,
+        method: httpEntry.request.method,
+        httpStatus: httpEntry.response?.status,
+      });
+    } else if (entry.type === 'websocket') {
+      const wsEntry = entry as WebSocketNetworkEntry;
+      requests.push({
+        id: wsEntry.id,
+        type: 'websocket',
+        name: wsEntry.connection.url,
+        status: wsEntry.status,
+        timestamp: wsEntry.timestamp,
+        duration: wsEntry.duration,
+        method: 'WS',
+        httpStatus: 0,
+      });
+    } else if (entry.type === 'sse') {
+      const sseEntry = entry as SSENetworkEntry;
+      requests.push({
+        id: sseEntry.id,
+        type: 'sse',
+        name: sseEntry.request.url,
+        status: sseEntry.status,
+        timestamp: sseEntry.timestamp,
+        duration: sseEntry.duration,
+        method: 'SSE',
+        httpStatus: 0,
+      });
+    }
+  }
+
+  return requests.sort((a, b) => b.timestamp - a.timestamp);
+});
+
+export const getSelectedRequest = memoize((state: NetworkActivityState) => {
+  const { selectedRequestId, networkEntries } = state;
+  if (!selectedRequestId) return null;
+  return networkEntries.get(selectedRequestId) || null;
+});
+
+export const getRequestSummary = (
+  requestId: string
+): ((state: NetworkActivityState) => ProcessedRequest | null) =>
+  memoize((state: NetworkActivityState) => {
+    const { networkEntries } = state;
+    const entry = networkEntries.get(requestId);
+    if (!entry) return null;
+
+    if (entry.type === 'http') {
+      const httpEntry = entry as HttpNetworkEntry;
+      return {
+        id: httpEntry.id,
+        type: 'http',
+        name: httpEntry.request.url,
+        status: httpEntry.status,
+        timestamp: httpEntry.timestamp,
+        duration: httpEntry.duration,
+        size: httpEntry.size,
+        method: httpEntry.request.method,
+        httpStatus: httpEntry.response?.status || 0,
+      };
+    } else if (entry.type === 'websocket') {
+      const wsEntry = entry as WebSocketNetworkEntry;
+      return {
+        id: wsEntry.id,
+        type: 'websocket',
+        name: wsEntry.connection.url,
+        status: wsEntry.status,
+        timestamp: wsEntry.timestamp,
+        duration: wsEntry.duration,
+        method: 'WS',
+        httpStatus: 0,
+      };
+    } else if (entry.type === 'sse') {
+      const sseEntry = entry as SSENetworkEntry;
+      return {
+        id: sseEntry.id,
+        type: 'sse',
+        name: sseEntry.request.url,
+        status: sseEntry.status,
+        timestamp: sseEntry.timestamp,
+        duration: sseEntry.duration,
+        method: 'SSE',
+        httpStatus: 0,
+      };
+    }
+
+    return null;
+  });

package/src/ui/state/hooks.ts

@@ -0,0 +1,44 @@
+import { useStore } from 'zustand';
+import { store } from './store';
+import type { NetworkActivityState } from './store';
+import { getProcessedRequests, getSelectedRequest } from './derived';
+
+export const useNetworkActivityStore = <T>(
+  selector: (state: NetworkActivityState) => T
+): T => {
+  return useStore(store, selector);
+};
+
+export const useProcessedRequests = () => {
+  return useNetworkActivityStore(getProcessedRequests);
+};
+
+export const useSelectedRequest = () => {
+  return useNetworkActivityStore(getSelectedRequest);
+};
+
+export const useHasSelectedRequest = () => {
+  return useNetworkActivityStore((state) => !!getSelectedRequest(state));
+};
+
+export const useSelectedRequestId = () => {
+  return useNetworkActivityStore((state) => state.selectedRequestId);
+};
+
+export const useIsRecording = () => {
+  return useNetworkActivityStore((state) => state.isRecording);
+};
+
+export const useNetworkActivityActions = () => {
+  return useNetworkActivityStore((state) => state.actions);
+};
+
+export const useNetworkActivityClientManagement = () => {
+  return useNetworkActivityStore((state) => state.client);
+};
+
+export const useWebSocketMessages = (requestId: string) => {
+  return useNetworkActivityStore(
+    (state) => state.websocketMessages.get(requestId) || []
+  );
+};

package/src/ui/state/model.ts

@@ -0,0 +1,129 @@
+import { Initiator, ResourceType } from '../../shared/client';
+
+export type RequestId = string;
+export type Timestamp = number;
+export type SocketId = number;
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
+
+export type NetworkEntryType = 'http' | 'websocket' | 'sse';
+
+/* HTTP */
+export type HttpData = {
+  type: string;
+  data: string;
+};
+
+export type HttpRequest = {
+  url: string;
+  method: HttpMethod;
+  headers: Record<string, string>;
+  body?: HttpData;
+};
+
+export type HttpResponse = {
+  url: string;
+  status: number;
+  statusText: string;
+  headers: Record<string, string>;
+  contentType: string;
+  size: number;
+  responseTime: Timestamp;
+  body?: HttpData;
+};
+
+export type HttpStatus = 'pending' | 'loading' | 'finished' | 'failed';
+
+export type HttpNetworkEntry = {
+  id: RequestId;
+  type: 'http';
+  timestamp: Timestamp;
+  duration?: number;
+
+  request: HttpRequest;
+  response?: HttpResponse;
+  status: HttpStatus;
+  error?: string;
+  canceled?: boolean;
+  ttfb?: number;
+  size?: number;
+  initiator?: Initiator;
+  resourceType?: ResourceType;
+};
+
+/* SSE */
+export type SSEMessage = {
+  id: string;
+  data: string;
+  timestamp: Timestamp;
+};
+
+export type SSEStatus = 'connecting' | 'open' | 'closed' | 'error';
+
+export type SSENetworkEntry = {
+  id: RequestId;
+  type: 'sse';
+  timestamp: Timestamp;
+  duration?: number;
+
+  request: HttpRequest;
+  response?: HttpResponse;
+  status: SSEStatus;
+  messages: SSEMessage[];
+  error?: string;
+  initiator?: Initiator;
+  resourceType?: ResourceType;
+};
+
+/* WebSocket */
+export type WebSocketConnection = {
+  url: string;
+  socketId: SocketId;
+  protocols?: string[];
+  options?: string[];
+};
+
+export type WebSocketMessage = {
+  id: string;
+  direction: 'sent' | 'received';
+  data: string;
+  messageType: 'text' | 'binary';
+  timestamp: Timestamp;
+};
+
+export type WebSocketStatus =
+  | 'connecting'
+  | 'open'
+  | 'closing'
+  | 'closed'
+  | 'error';
+
+export type WebSocketNetworkEntry = {
+  id: RequestId;
+  type: 'websocket';
+  timestamp: Timestamp;
+  duration?: number;
+
+  connection: WebSocketConnection;
+  status: WebSocketStatus;
+  error?: string;
+  closeCode?: number;
+  closeReason?: string;
+};
+
+/* Shared */
+export type NetworkEntry =
+  | HttpNetworkEntry
+  | WebSocketNetworkEntry
+  | SSENetworkEntry;
+
+export type ProcessedRequest = {
+  id: RequestId;
+  type: NetworkEntryType;
+  name: string;
+  status: HttpStatus | WebSocketStatus | SSEStatus;
+  timestamp: Timestamp;
+  duration?: number;
+  size?: number;
+  method: HttpMethod | 'WS' | 'SSE';
+  httpStatus?: number;
+};