Redo traces to use the traces page

[Vadman97]

query the traces endpoint to get network request payloads

[linear]

HIG-4677 Redo traces to use the traces page

[greptile-apps]

To redo traces to use the traces page and query the traces endpoint for network request payloads, follow these steps:

1. Update TracesPage.tsx:

   • Modify the useGetTraces hook to include network request payloads in the query.

   const { traceEdges, moreTraces, clearMoreTraces, loading, loadingAfter, fetchMoreForward } = useGetTraces({
     query,
     projectId,
     traceCursor,
     startDate,
     endDate,
     skipPolling: !selectedPreset,
     sortColumn,
     sortDirection: sortDirection as SortDirection,
     includePayloads: true, // Add this line to include payloads
   });

2. Update useGetTraces.ts:

   • Modify the GraphQL query to fetch network request payloads.

   const GET_TRACES_QUERY = gql`
     query GetTraces($projectId: ID!, $query: String, $traceCursor: String, $startDate: String, $endDate: String, $sortColumn: String, $sortDirection: String, $includePayloads: Boolean) {
       traces(projectId: $projectId, query: $query, traceCursor: $traceCursor, startDate: $startDate, endDate: $endDate, sortColumn: $sortColumn, sortDirection: $sortDirection, includePayloads: $includePayloads) {
         edges {
           node {
             traceID
             spanID
             payloads @include(if: $includePayloads) // Add this line to include payloads
           }
         }
       }
     }
   `;

3. Update TracePage.tsx, TraceLogs.tsx, TraceHeader.tsx, and TracePanel.tsx:

   • Ensure these components handle and display the network request payloads as needed.

   // Example in TracePage.tsx
   const { trace } = useTrace();
   return (
     <div>
       <h1>{trace.traceName}</h1>
       <pre>{JSON.stringify(trace.payloads, null, 2)}</pre> // Display payloads
     </div>
   );

4. Update TraceProvider.tsx:

   • Ensure the context provides the payloads to the components.

   const TraceProvider = ({ children }) => {
     const { data } = useGetTracesQuery({
       variables: { projectId, includePayloads: true }, // Add includePayloads variable
     });
     return (
       <TraceContext.Provider value={data?.traces}>{children}</TraceContext.Provider>
     );
   };

References

/frontend/src/pages/Traces/TracesPage.tsx
/frontend/src/pages/Traces/TracePage.tsx
/frontend/src/pages/Traces/TraceLogs.tsx
/frontend/src/pages/Traces/TraceHeader.tsx
/frontend/src/pages/Traces/TracePanel.tsx
/frontend/src/pages/Traces

Ask Greptile