To create a React flowchart overview from a JSON file, focus on fetching the following fields from the log.entries array to capture the sequence and dependencies of network requests:
startedDateTime: Timestamp of when the request started, used to order requests chronologically.
request.url: The URL of the request, used as a node identifier or label in the flowchart.
request.headers: Specifically, the Referer header, to identify dependencies between requests (i.e., which resource initiated another).
timings: Timing details (e.g., wait, receive) to optionally label edges or nodes with performance metrics.
response.status: HTTP status code, useful for coloring or annotating nodes to highlight errors (e.g., 4xx, 5xx).
-
Summary: At a minimum, extract startedDateTime, request.url, and request.headers (for Referer) to build the flowchart structure. Include timings and response.status for additional context or visualization enhancements. These fields allow you to map the sequence and dependencies of requests effectively.
-
React npm library to use: https://reactflow.dev/examples/nodes/custom-node
-
User -> React Website -> upload JSON -> FastAPI -> Return processed data
-
Note: save the json with file name
old.kseb.in_Archive.json