formatted network request payload has weird formatting about highlight HOT 7 CLOSED

HIG-4651 formatted network request payload has weird formatting

from highlight.

To resolve the issue with the weird formatting of the network request payload, follow these steps:

1. Locate the Formatting Logic: The formatting logic for the network request payload is likely in NetworkResourceInfo.tsx or NetworkResourcePanel.tsx.

2. Update Formatting in NetworkResourceInfo.tsx:

   • Open the file /frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourceInfo.tsx.
   • Locate the section where the request payload is being processed and rendered.
   • Ensure that the payload is being formatted correctly before rendering. You might need to use a JSON prettifier or similar utility.

   const formattedRequestPayload = JSON.stringify(requestPayloadData, null, 2);

   • Update the rendering logic to use the formatted payload.

   <pre>{formattedRequestPayload}</pre>

3. Check NetworkResourcePanel.tsx:

   • Open the file /frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx.
   • Ensure that any payload data passed to NetworkResourceInfo is correctly formatted.
   • If necessary, apply similar formatting logic as above before passing the data.

4. Test the Changes: Ensure that the payload is now displayed in a readable format.

References

/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourceInfo.tsx
/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx
/frontend/src/pages/Player/Toolbar/DevToolsWindowV2/NetworkPage/NetworkPage.tsx

Ask Greptile

from highlight.

/bounty $30

from highlight.

💎 $30 bounty • Highlight (YC W23)

Payment will be awarded to the first person to successfully merge a PR meeting all requirements. In the event that multiple PRs are submitted for the issue, we will award payment to the highest quality PR (the one that has cleanest code, best test coverage, most thorough, etc.).

Steps to solve:

1. Start working: Comment /attempt #8560 with your implementation plan
2. Submit work: Create a pull request including /claim #8560 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to highlight/highlight!

Add a bounty • Share on socials

from highlight.

/attempt #8560

from highlight.

💡 @jemiluv8 submitted a pull request that claims the bounty. You can visit your bounty board to reward.

from highlight.

🎉🎈 @jemiluv8 has been awarded $30! 🎈🎊

• Share on socials
• Give feedback

from highlight.