nextjs - 💡(How to fix) Fix [bug] Patched console methods stringifies arguments, causing unexpected errors with bigints and unserializable objects [1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#84864Fetched 2026-04-08 02:18:05
View on GitHub
Comments
0
Participants
1
Timeline
2
Reactions
0
Author
Participants
Timeline (top)
issue_type_added ×1subscribed ×1

Root Cause

  1. Start a Next.js app with [email protected].
  2. Attempt to log a non serializable object, such as a tRPC proxy object or an object with bigint values.
  3. Observe that Next.js attempts to JSON.stringify the object, which fails or produces errors (e.g., with DOM elements it may try to serialize the entire React fiber tree, and with tRPC proxy objects it throws because it tries to call .toJSON on it).

Fix Action

Fix / Workaround

Current:

Every object passed to the patched console.log is JSON.stringify'ed. This causes crashes or unexpected errors when logging unserializable objects. In my usecase I'm just doing console.log(domElement) for debugging purpose, but that fails:

Code Example

Operating System: Ubuntu 24.04.3 LTS
Node.js: v24.4.1
next: 16.0.0-canary.4
Other relevant packages:
- TRPC: v11.6.0
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/9x97j5

To Reproduce

  1. Start a Next.js app with [email protected].
  2. Attempt to log a non serializable object, such as a tRPC proxy object or an object with bigint values.
  3. Observe that Next.js attempts to JSON.stringify the object, which fails or produces errors (e.g., with DOM elements it may try to serialize the entire React fiber tree, and with tRPC proxy objects it throws because it tries to call .toJSON on it).

Current vs. Expected behavior

Current:

Every object passed to the patched console.log is JSON.stringify'ed. This causes crashes or unexpected errors when logging unserializable objects. In my usecase I'm just doing console.log(domElement) for debugging purpose, but that fails:

<img width="586" height="278" alt="Image" src="https://github.com/user-attachments/assets/2bf5b864-c23d-4d90-8ab0-9ec40dc2f1fb" />
Expected:

The original log should be done even if the stringify fails.

There could be different approaches here: just catch JSON.stringify errors, or maybe skip the stringify on DOM elements to skip serializing the whole react tree.

Provide environment information

Operating System: Ubuntu 24.04.3 LTS
Node.js: v24.4.1
next: 16.0.0-canary.4
Other relevant packages:
- TRPC: v11.6.0

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

This bug makes debugging and development much harder, especially when working with complex objects, bigints or libraries like tRPC. The serialization result in completely unusable logs. Please consider handling objects in console methods in a way that matches standard console behavior.

extent analysis

TL;DR

Catch JSON.stringify errors or skip serialization on unserializable objects, such as DOM elements, to prevent crashes and unexpected errors when logging.

Guidance

  • Identify the objects that are causing serialization issues, such as tRPC proxy objects or objects with bigint values, and consider implementing a custom serialization method for these objects.
  • Modify the console.log function to catch and handle JSON.stringify errors, allowing the original log to be done even if serialization fails.
  • Consider skipping serialization on DOM elements to prevent serializing the entire React fiber tree.
  • Verify the fix by logging unserializable objects and checking that the console output is correct and does not produce errors.

Example

const originalConsoleLog = console.log;
console.log = function() {
  try {
    originalConsoleLog(...arguments);
  } catch (error) {
    if (error instanceof TypeError && error.message.includes('Converting circular structure to JSON')) {
      originalConsoleLog('Error logging object:', error);
    } else {
      throw error;
    }
  }
};

Notes

This solution assumes that the issue is caused by the JSON.stringify function failing on unserializable objects. The example code snippet provides a basic workaround by catching and handling JSON.stringify errors, but a more robust solution may be needed depending on the specific requirements of the application.

Recommendation

Apply a workaround, such as catching JSON.stringify errors or skipping serialization on unserializable objects, to prevent crashes and unexpected errors when logging. This will allow for more reliable debugging and development, especially when working with complex objects and libraries like tRPC.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING