Fix for rrdt not showing server logs properly

Author: AlemTuzlak

package-lock.json

@@ -2,7 +2,7 @@
 	"name": "react-router-devtools",
 	"description": "Devtools for React Router - debug, trace, find hydration errors, catch bugs and inspect server/client data with react-router-devtools",
 	"author": "Alem Tuzlak",
-	"version": "1.1.6",
+	"version": "1.1.7",
 	"license": "MIT",
 	"keywords": [
 		"react-router",

package.json

@@ -1,5 +1,6 @@
 import chalk from "chalk"
 import type { ActionFunctionArgs, LoaderFunctionArgs, UNSAFE_DataWithResponseInit } from "react-router"
+import { bigIntReplacer } from "../shared/bigint-util.js"
 import { sendEvent } from "../shared/send-event.js"
 import { type DevToolsServerConfig, getConfig } from "./config.js"
 import { actionLog, errorLog, infoLog, loaderLog, redirectLog } from "./logger.js"
@@ -225,6 +226,7 @@ const storeAndEmitActionOrLoaderInfo = async (
 ) => {
 	const responseHeaders = extractHeadersFromResponseOrRequest(response)
 	const requestHeaders = extractHeadersFromResponseOrRequest(args.request)
+
 	// create the event
 	const event = {
 		type,
@@ -245,7 +247,7 @@ const storeAndEmitActionOrLoaderInfo = async (
 	if (port) {
 		fetch(`http://localhost:${port}/react-router-devtools-request`, {
 			method: "POST",
-			body: JSON.stringify(event),
+			body: JSON.stringify(event, bigIntReplacer),
 		})
 			.then(async (res) => {
 				if (res.ok) {
@@ -295,10 +297,10 @@ export const analyzeLoaderOrAction =
 			unAwaited(() => {
 				const end = diffInMs(start)
 				const endTime = Date.now()
-				storeAndEmitActionOrLoaderInfo(type, routeId, response, end, args)
+				storeAndEmitActionOrLoaderInfo(type, routeId, res, end, args)
 				logTrigger(routeId, type, end)
-				analyzeDeferred(routeId, start, response)
-				analyzeHeaders(routeId, response)
+				analyzeDeferred(routeId, start, res)
+				analyzeHeaders(routeId, res)
 				if (!aborted) {
 					sendEvent({
 						type,
@@ -309,7 +311,7 @@ export const analyzeLoaderOrAction =
 						id: routeId,
 						url: args.request.url,
 						method: args.request.method,
-						status: response && typeof response === "object" ? (response as any).status : undefined,
+						status: res && typeof res === "object" ? (res as any).status : undefined,
 					})
 				}
 			})

src/server/utils.ts

@@ -21,7 +21,7 @@ export const loader = async ({ request, context,devTools, params  }: LoaderFunct
      const also = await new Promise((resolve, reject) => {
       setTimeout(() => {
         resolve("test");
-      }, 2000);
+      }, 200);
     });
      return {
       custom: "data",
@@ -31,12 +31,12 @@ export const loader = async ({ request, context,devTools, params  }: LoaderFunct
   const test = await new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve("test");
-    }, 2000);
+    }, 200);
   });
   const test1 = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve("test1");
-    }, 3500);
+    }, 300);
   });
   return  { message: "Hello World!", test, test1, data, bigInt: BigInt(10) };
 };
@@ -50,7 +50,7 @@ export const clientLoader =  async ({ request, serverLoader,  devTools }: Client
     const also = await new Promise((resolve, reject) => {
       setTimeout(() => {
         resolve("test");
-      }, 1000);
+      }, 100);
     });
     return {
       custom: "data",
@@ -60,7 +60,7 @@ export const clientLoader =  async ({ request, serverLoader,  devTools }: Client
   const promise =await  new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve("test");
-    }, 2000);
+    }, 200);
   });
   return serverLoaderResults
 };