fix: render object messages as JSON in Network Logs (#6505)

[2003nayan]

Description

Fixes #6505

---

The Problem

In Timeline → Network Logs, some messages were rendered as [object Object] instead of readable text, making the logs hard to understand and debug.

---

The Fix

A small check was added before rendering messages.
If the message is an object, it is converted into a readable JSON string before display.

---

What Changed

File	Change
Network/index.js	Added a formatMessage() helper to stringify object messages
Network/index.spec.js	Added 5 unit tests to cover the new behavior

---

Screenshot (After Fix)

---

Contribution Checklist

• I've used AI significantly to create this pull request
• The pull request only addresses one issue or adds one feature
• The pull request does not introduce any breaking changes
• I have added screenshots or gifs to help explain the change (if applicable)
• I have read the contribution guidelines
• Created an issue and linked it to this pull request

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Enhanced network log message rendering in the Timeline view to safely handle null, undefined, and complex object messages without display errors.
  • Complex objects are now properly formatted as JSON strings.
  • Improved visual stability for consecutive log entries.

• Tests

  • Added comprehensive test coverage validating message rendering behavior and CSS styling for different log types.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR fixes a bug where HTTP responses displayed as "[object Object]" in the Network Logs tab. A new formatMessage() helper safely renders various message types (strings, objects, null/undefined), and the Network component applies this formatting. Corresponding tests validate the fix across multiple input scenarios.

Changes

Cohort / File(s)	Summary
Network component implementation packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js	Introduces formatMessage() helper to safely format messages with JSON stringification for objects, null/undefined handling, and error fallback. Updates NetworkLogsEntry to use formatted message. Wraps output in React.Fragment with key for proper rendering of consecutive entries.
Network component tests packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.spec.js	Adds comprehensive test suite validating string rendering, object-to-JSON conversion, null/undefined handling, and CSS class application based on log type (text-blue-500, text-green-500, text-red-500).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

size/XS

Suggested reviewers

• helloanoop
• lohit-bruno
• naman-bruno
• bijin-bruno

Poem

Objects once hidden in [object Object]'s disguise,
Now shine as JSON with formatting wise,
Nulls handled gracefully, errors softly caught,
Network Logs display what users have sought! 📊✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	Title accurately describes the main fix: converting object messages to JSON in Network Logs, directly addressing the reported issue.
Linked Issues check	✅ Passed	PR fully implements the fix for #6505: formatMessage() helper safely renders objects as JSON, eliminating [object Object] rendering and making logs usable for debugging and sharing.
Out of Scope Changes check	✅ Passed	All changes directly address the linked issue: Network component rendering fix and corresponding unit tests with no extraneous modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b41f497 and 5aa49ed.

📒 Files selected for processing (2)

• packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js
• packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.spec.js

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions. () => {} is good
No space between function name and parentheses. func() not func ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly

Files:

• packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.spec.js
• packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js

🧠 Learnings (3)

📚 Learning: 2025-12-05T20:31:33.005Z

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.test.{js,jsx,ts,tsx} : Add tests for any new functionality or meaningful changes. If code is added, removed, or significantly modified, corresponding tests should be updated or created

Applied to files:

• packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.spec.js

📚 Learning: 2025-12-16T07:16:23.647Z

Learnt from: sanish-bruno
Repo: usebruno/bruno PR: 6090
File: tests/scripting/hooks/init-user-data/ui-state-snapshot.json:1-8
Timestamp: 2025-12-16T07:16:23.647Z
Learning: For e2e tests in the bruno repository: Collections that are shared between CLI and UI tests (comprehensive test suites testing core functionality) should be placed in `packages/bruno-tests/` to avoid duplication. The `tests/**/fixtures/collection` pattern should be used for test-specific collections that test particular UI behaviors or are specific to a single test file.

Applied to files:

• packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.spec.js

📚 Learning: 2025-12-17T21:41:24.730Z

Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.

Applied to files:

• packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.spec.js
• packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js

🧬 Code graph analysis (1)

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.spec.js (1)

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js (1)

• Network (22-42)

🔇 Additional comments (6)

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.spec.js (3)

19-34: Good test coverage for the main bug fix.

The test correctly validates that objects are rendered as JSON instead of "[object Object]". The regex assertion on line 33 is acceptable, though it could be slightly fragile if JSON formatting changes.

Based on learnings, tests for new functionality are expected and this test suite provides good coverage.

---

36-52: Solid edge case coverage.

The null and undefined handling tests ensure the component doesn't crash or display incorrect text. Clean and effective.

---

54-66: CSS class verification looks good.

The test validates that different log types receive appropriate color classes. The querySelector approach is suitable for this type of styling verification.

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js (3)

3-20: Well-structured helper function with proper edge case handling.

The formatMessage function correctly handles the reported bug and edge cases (null, undefined, stringify errors). The pretty-printing with 2-space indentation improves readability of JSON objects in the logs. The JSDoc comment clearly explains the purpose and references the issue.

---

33-36: Good addition of key to React.Fragment.

Adding the explicit key prop to the Fragment follows React best practices for list rendering and prevents potential console warnings.

---

44-75: Clean integration of message formatting.

The displayMessage derivation on line 46 and its usage on line 72 cleanly separate formatting logic from rendering. The approach is straightforward and maintains readability.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}