Skip to content

fix(client): display server stderr logs in Console tab#1290

Open
Julien-ser wants to merge 2 commits intomodelcontextprotocol:mainfrom
Julien-ser:fix/capture-server-stderr-logs
Open

fix(client): display server stderr logs in Console tab#1290
Julien-ser wants to merge 2 commits intomodelcontextprotocol:mainfrom
Julien-ser:fix/capture-server-stderr-logs

Conversation

@Julien-ser
Copy link
Copy Markdown

ConsoleTab was a static placeholder that showed no data. The proxy already forwarded MCP server stderr as notifications/message events, but the UI had no dedicated view for them.

ConsoleTab now receives the notifications array and renders all notifications/message entries in a terminal-style panel: log levels are color-coded, the view auto-scrolls to the latest entry, and a Clear
button lets users dismiss accumulated output without affecting the History/Notifications panel.

Fixes #1283

Type of Change

  • Bug fix (non-breaking change that fixes an issue)

Changes Made

  • client/src/components/ConsoleTab.tsx — Replaced the static placeholder with a working log viewer. Filters the shared notifications array for notifications/message events and renders them in a dark
    terminal-style panel. Log levels (debug, info, warning, error, emergency, etc.) are color-coded. The panel auto-scrolls to the latest entry. A Clear button dismisses displayed entries without touching the
    History/Notifications panel.
  • client/src/App.tsx — Passes notifications as serverLogs prop to ConsoleTab.

Related Issues

Fixes #1283

Testing

  • Tested with STDIO transport
  • Manual testing performed

Test Results and/or Instructions

  1. Start the inspector targeting any MCP server that writes to stderr (e.g. a Python server using logging to stderr, or any server with startup messages)
  2. Connect via STDIO transport
  3. Open the Console tab — stderr output appears in real time, color-coded by log level
  4. Click Clear to dismiss entries; the History/Notifications panel is unaffected

Checklist

  • Code follows the style guidelines (ran npm run prettier-fix)
  • Self-review completed

ConsoleTab was a static placeholder that showed no data. The proxy
already forwarded MCP server stderr as notifications/message events,
but the UI had no dedicated view for them.

ConsoleTab now receives the notifications array and renders all
notifications/message entries in a terminal-style panel: log levels
are color-coded, the view auto-scrolls to the latest entry, and a
Clear button lets users dismiss accumulated output without affecting
the History/Notifications panel.

Fixes modelcontextprotocol#1283

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings May 6, 2026 04:20
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR makes the Client “Console” tab functional by rendering MCP server stderr/logging notifications that were already being forwarded by the proxy, addressing the gap described in #1283.

Changes:

  • Implement a terminal-style log viewer in ConsoleTab that filters and displays notifications/message entries with level-based coloring, auto-scroll, and a local “Clear”.
  • Wire App state (notifications) into ConsoleTab via a new prop so the tab can render incoming server notifications.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
client/src/components/ConsoleTab.tsx Replaces placeholder with a log viewer for notifications/message entries, including formatting, auto-scroll, and local clear state.
client/src/App.tsx Passes the shared notifications array into ConsoleTab for rendering server log output.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread client/src/components/ConsoleTab.tsx
Comment on lines +18 to +33
const ConsoleTab = ({
serverLogs = [],
}: {
serverLogs?: ServerNotification[];
}) => {
const bottomRef = useRef<HTMLDivElement>(null);
const [clearedCount, setClearedCount] = useState(0);

const allLogEntries = serverLogs.filter(
(n) => n.method === "notifications/message",
);
const logEntries = allLogEntries.slice(clearedCount);

useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
}, [logEntries.length]);
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Find a way to capture the logs of the MCP server

2 participants