toJSON RPC Errors when using `console.log` in the `onMessage` handler of `useAgent` in `agents/react`

[abhi-arya1]

Describe the bug
In agents@^0.3.0, when using agents/react to connect to your agent with the useAgent hook, if you use the console.log function in onMessage, then the stub that is returned by the MessageEvent object tries to fetch the Agent's toJSON method. When that method is not found, an error is raised on both frontend and backend.

In simplest terms, my understanding of this bug is that the server message invokes client toJSON (for the console.log(message) statement) which invokes the server toJSON which isn’t implemented which causes the error

To Reproduce
Steps to reproduce the behavior:

1. Create an agents app with agents@^0.3.0 and any React-based framework.
   • This agent should support sending messages back to the client using the onConnect/onMessage specification
2. Set up your agent, and then set up the frontend connection with the following

import { useAgent } from "agents/react";

const connection = useAgent({
  host: "<YOUR HOST>",
  agent: "<YOUR AGENT>",
  name: "<YOUR AGENT NAME>",
  onMessage: (message) => {
    console.log(message);
  }
})

3. Send a message to the agent and wait for the websocket messages to stream back, while keeping your browser console open
4. See the error in the browser console and the terminal that is running the agents server.

The error looks like this:

✘ [ERROR] RPC error: Error: Method toJSON is not callable

      at null.<anonymous>
  (file://<YOUR_COMPUTER_PATH>/node_modules/.bun/agents@0.3.0+5d5909b47aec19e0/node_modules/agents/src/index.ts:523:23)

Expected behavior
I believe that potentially by providing a direct toJSON method in the class, or the agents/react helper library being able to handle this issue with the stub object without causing errors (and increasing log volume, see below) out of the box, would make things clearer to the user without having to require deeper bug investigations.

Version:
0.3.0

Additional context
I found one existing thread by a user who most likely had the same issue, but did not investigate it further. https://www.answeroverflow.com/m/1390762377942929568

This problem can be fixed by adding the following to your specific agent class, as mentioned in the thread above:

@callable()
toJSON() {
  return this.state; // Or any JSON serializable item
}

However, this increases log volume, as observability events are emitted, which causes this on every single chunk or message that is logged. See https://deepwiki.com/search/tell-me-about-the-observabiliu_6ac80cad-6f57-498b-9a1a-45be29bd6216?mode=fast for more information, and below is an example console snippet of what I saw when I implemented the "patch" above.

RPC call to toJSON
RPC call to toJSON
RPC call to toJSON
RPC call to toJSON
RPC call to toJSON
RPC call to toJSON
RPC call to toJSON
RPC call to toJSON
RPC call to toJSON
RPC call to toJSON
...