feat(network-activity-plugin): show http network requests on boot

apps/playground/src/app/screens/NetworkTestScreen.tsx

@@ -14,191 +14,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import EventSource from 'react-native-sse';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
 import { RootStackParamList } from '../navigation/types';
-
-// Real API service using JSONPlaceholder
-const api = {
-  getUsers: async (): Promise<User[]> => {
-    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
-      headers: {
-        'X-Rozenite-Test': 'true',
-        Cookie: 'sessionid=abc123; theme=dark; user=testuser',
-      },
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    return response.json();
-  },
-
-  getPosts: async (): Promise<Post[]> => {
-    const response = await fetch(
-      'https://jsonplaceholder.typicode.com/posts?_limit=10&userId=1&sort=desc',
-      {
-        headers: {
-          'X-Rozenite-Test': 'true',
-        },
-      }
-    );
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    return response.json();
-  },
-
-  getTodos: async (): Promise<Todo[]> => {
-    const response = await fetch(
-      'https://jsonplaceholder.typicode.com/todos?_limit=15',
-      {
-        headers: {
-          'X-Rozenite-Test': 'true',
-        },
-      }
-    );
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    return response.json();
-  },
-
-  // Simulate a slow API call
-  getSlowData: async (): Promise<User[]> => {
-    // Add artificial delay to simulate slow network
-    await new Promise((resolve) => setTimeout(resolve, 3000));
-    const response = await fetch(
-      'https://jsonplaceholder.typicode.com/users?_limit=5',
-      {
-        headers: {
-          'X-Rozenite-Test': 'true',
-        },
-      }
-    );
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    return response.json();
-  },
-
-  // Simulate an API that sometimes fails
-  getUnreliableData: async (): Promise<Post[]> => {
-    // 20% chance of failure
-    if (Math.random() < 0.2) {
-      throw new Error('Random API failure - please try again');
-    }
-    const response = await fetch(
-      'https://jsonplaceholder.typicode.com/posts?_limit=8',
-      {
-        headers: {
-          'X-Rozenite-Test': 'true',
-        },
-      }
-    );
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    return response.json();
-  },
-
-  // Create a new post
-  createPost: async (postData: Omit<Post, 'id'>): Promise<Post> => {
-    const response = await fetch(
-      'https://jsonplaceholder.typicode.com/posts?someParam=value',
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Rozenite-Test': 'true',
-        },
-        body: JSON.stringify(postData),
-      }
-    );
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    return response.json();
-  },
-
-  // Create a new post with FormData
-  createPostWithFormData: async (postData: Omit<Post, 'id'>): Promise<Post> => {
-    const formData = new FormData();
-    formData.append('title', postData.title);
-    formData.append('body', postData.body);
-    formData.append('userId', postData.userId.toString());
-
-    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
-      method: 'POST',
-      headers: {
-        'X-Rozenite-Test': 'true',
-      },
-      body: formData,
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    return response.json();
-  },
-
-  getLargeFile: async (): Promise<ArrayBuffer> => {
-    const cacheBuster = Date.now();
-    const response = await fetch(
-      `https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson?cb=${cacheBuster}`,
-      {
-        headers: {
-          'X-Rozenite-Test': 'large-download',
-          'Cache-Control': 'no-cache, no-store, must-revalidate',
-          'Pragma': 'no-cache',
-          'Expires': '0',
-        },
-      }
-    );
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    return response.arrayBuffer();
-  },
-};
-
-interface User {
-  id: number;
-  name: string;
-  email: string;
-  username: string;
-  phone: string;
-  website: string;
-  company: {
-    name: string;
-    catchPhrase: string;
-  };
-}
-
-interface Post {
-  id: number;
-  title: string;
-  body: string;
-  userId: number;
-}
-
-interface Todo {
-  id: number;
-  title: string;
-  completed: boolean;
-  userId: number;
-}
+import { api, User, Post, Todo } from '../utils/network-activity/api';
 
 const useUsersQuery = () => {
   return useQuery({
@@ -615,7 +431,7 @@ const HTTPTestComponent: React.FC = () => {
   return (
     <View style={styles.container}>
       <FlatList
-        data={data}
+        data={data as User[] | Post[] | Todo[]}
         renderItem={renderItem}
         keyExtractor={(item) => item.id.toString()}
         ListHeaderComponent={renderHeader()}

apps/playground/src/app/utils/network-activity/api.ts

@@ -0,0 +1,185 @@
+export interface User {
+  id: number;
+  name: string;
+  email: string;
+  username: string;
+  phone: string;
+  website: string;
+  company: {
+    name: string;
+    catchPhrase: string;
+  };
+}
+
+export interface Post {
+  id: number;
+  title: string;
+  body: string;
+  userId: number;
+}
+
+export interface Todo {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+}
+
+export const api = {
+  getUsers: async (): Promise<User[]> => {
+    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
+      headers: {
+        'X-Rozenite-Test': 'true',
+        Cookie: 'sessionid=abc123; theme=dark; user=testuser',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  },
+
+  getPosts: async (): Promise<Post[]> => {
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/posts?_limit=10&userId=1&sort=desc',
+      {
+        headers: {
+          'X-Rozenite-Test': 'true',
+        },
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  },
+
+  getTodos: async (): Promise<Todo[]> => {
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/todos?_limit=15',
+      {
+        headers: {
+          'X-Rozenite-Test': 'true',
+        },
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  },
+
+  getSlowData: async (): Promise<User[]> => {
+    // Add artificial delay to simulate slow network
+    await new Promise((resolve) => setTimeout(resolve, 3000));
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/users?_limit=5',
+      {
+        headers: {
+          'X-Rozenite-Test': 'true',
+        },
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  },
+
+  getUnreliableData: async (): Promise<Post[]> => {
+    // 20% chance of failure
+    if (Math.random() < 0.2) {
+      throw new Error('Random API failure - please try again');
+    }
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/posts?_limit=8',
+      {
+        headers: {
+          'X-Rozenite-Test': 'true',
+        },
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  },
+
+  get404: async (): Promise<Post[]> => {
+    const response = await fetch('https://www.google.com/test');
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  },
+
+  post404: async (): Promise<unknown> => {
+    const response = await fetch('https://www.google.com/test', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Rozenite-Test': 'true',
+      },
+      body: JSON.stringify({ test: 'data' }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  },
+
+  createPost: async (postData: Omit<Post, 'id'>): Promise<Post> => {
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/posts?someParam=value',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Rozenite-Test': 'true',
+        },
+        body: JSON.stringify(postData),
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  },
+
+  createPostWithFormData: async (postData: Omit<Post, 'id'>): Promise<Post> => {
+    const formData = new FormData();
+    formData.append('title', postData.title);
+    formData.append('body', postData.body);
+    formData.append('userId', postData.userId.toString());
+
+    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
+      method: 'POST',
+      headers: {
+        'X-Rozenite-Test': 'true',
+      },
+      body: formData,
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  },
+};