Skip to content

feat(webui): surface user, client IP and user agent in API traces (#10886, #10887) #10907

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mudler merged 1 commit into from
Jul 17, 2026
+75 −1
Merged

feat(webui): surface user, client IP and user agent in API traces (#10886, #10887) #10907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions core/http/middleware/trace.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@ type APIExchange struct {
Error string `json:"error,omitempty"`
UserID string `json:"user_id,omitempty"`
UserName string `json:"user_name,omitempty"`
// ClientIP is the caller's address as resolved by echo (honours
// X-Forwarded-For / X-Real-IP behind a trusted proxy), and UserAgent
// is the raw User-Agent header. Both are surfaced in the admin Traces
// UI so an operator can tell who/what issued each request.
ClientIP string `json:"client_ip,omitempty"`
UserAgent string `json:"user_agent,omitempty"`
}

var traceBuffer *circularbuffer.Queue[APIExchange]
Expand Down Expand Up @@ -221,6 +227,8 @@ func TraceMiddleware(app *application.Application) echo.MiddlewareFunc {
exchange := APIExchange{
Timestamp: startTime,
Duration: time.Since(startTime),
ClientIP: c.RealIP(),
UserAgent: c.Request().UserAgent(),
Request: APIExchangeRequest{
Method: c.Request().Method,
Path: c.Path(),
Expand Down
44 changes: 44 additions & 0 deletions core/http/react-ui/e2e/traces-metadata.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { test, expect } from './coverage-fixtures.js'

// Pin the API-trace metadata surface (issues #10886 / #10887): the API
// traces table exposes the requesting user in a dedicated column, and the
// expanded row detail lists User, Client IP and User Agent so an operator
// can tell who/what issued each request.
test.describe('Traces - API request metadata', () => {
test.beforeEach(async ({ page }) => {
await page.route('**/api/traces', (route) => {
route.fulfill({
contentType: 'application/json',
body: JSON.stringify([
{
request: { method: 'POST', path: '/v1/chat/completions' },
response: { status: 200 },
user_id: 'user-123',
user_name: 'alice',
client_ip: '203.0.113.7',
user_agent: 'curl/8.4.0',
},
]),
})
})
await page.route('**/api/backend-traces', (route) => {
route.fulfill({ contentType: 'application/json', body: '[]' })
})
await page.goto('/app/traces')
await expect(page.locator('text=Tracing is')).toBeVisible({ timeout: 10_000 })
})

test('shows the User column value in the API traces table', async ({ page }) => {
await expect(page.locator('th', { hasText: 'User' })).toBeVisible()
await expect(page.locator('td', { hasText: 'alice' }).first()).toBeVisible()
})

test('expands the row to reveal Client IP and User Agent', async ({ page }) => {
await page.locator('tr', { hasText: '/v1/chat/completions' }).first().click()

await expect(page.locator('text=Client IP').first()).toBeVisible()
await expect(page.locator('text=203.0.113.7').first()).toBeVisible()
await expect(page.locator('text=User Agent').first()).toBeVisible()
await expect(page.locator('text=curl/8.4.0').first()).toBeVisible()
})
})
24 changes: 23 additions & 1 deletion core/http/react-ui/src/pages/Traces.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,8 +304,27 @@ function BackendTraceDetail({ trace }) {

// Expanded detail for an API trace row
function ApiTraceDetail({ trace }) {
const user = trace.user_name || trace.user_id
const meta = [
['User', user],
['Client IP', trace.client_ip],
['User Agent', trace.user_agent],
].filter(([, v]) => v)
return (
<div style={{ padding: 'var(--spacing-md)', background: 'var(--color-bg-secondary)', borderBottom: '1px solid var(--color-border)' }}>
{meta.length > 0 && (
<div style={{
display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '0.25rem var(--spacing-md)',
alignItems: 'baseline', marginBottom: 'var(--spacing-md)', fontSize: '0.8125rem',
}}>
{meta.map(([label, value]) => (
<React.Fragment key={label}>
<span style={{ fontWeight: 600, color: 'var(--color-text-secondary)' }}>{label}</span>
<span style={{ fontFamily: 'var(--font-mono)', wordBreak: 'break-all' }}>{value}</span>
</React.Fragment>
))}
</div>
)}
{trace.error && (
<div style={{
background: 'var(--color-error-light)', border: '1px solid var(--color-error-border)',
Expand Down Expand Up @@ -360,6 +379,7 @@ export default function Traces() {
const TRACE_SORT = {
method: (a, b) => (a.request?.method || '').localeCompare(b.request?.method || ''),
path: (a, b) => (a.request?.path || '').localeCompare(b.request?.path || ''),
user: (a, b) => (a.user_name || a.user_id || '').localeCompare(b.user_name || b.user_id || ''),
status: (a, b) => (a.response?.status || 0) - (b.response?.status || 0),
type: (a, b) => (a.type || '').localeCompare(b.type || ''),
time: (a, b) => new Date(a.timestamp || 0) - new Date(b.timestamp || 0),
Expand Down Expand Up @@ -615,6 +635,7 @@ export default function Traces() {
<th style={{ width: '30px' }}></th>
{sortableTh('method', 'Method')}
{sortableTh('path', 'Path')}
{sortableTh('user', 'User')}
{sortableTh('status', 'Status')}
<th style={{ width: '40px' }}>Result</th>
</tr>
Expand All @@ -626,6 +647,7 @@ export default function Traces() {
<td><i className={`fas fa-chevron-${expandedRow === i ? 'down' : 'right'}`} style={{ fontSize: '0.7rem' }} /></td>
<td><span className="badge badge-info">{trace.request?.method || '-'}</span></td>
<td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}>{trace.request?.path || '-'}</td>
<td style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)', maxWidth: '160px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={trace.user_name || trace.user_id || ''}>{trace.user_name || trace.user_id || '-'}</td>
<td><span className={`badge ${(trace.response?.status || 0) < 400 ? 'badge-success' : 'badge-error'}`}>{trace.response?.status || '-'}</span></td>
<td style={{ textAlign: 'center' }}>
{trace.error
Expand All @@ -635,7 +657,7 @@ export default function Traces() {
</tr>
{expandedRow === i && (
<tr>
<td colSpan="5" style={{ padding: 0 }}>
<td colSpan="6" style={{ padding: 0 }}>
<ApiTraceDetail trace={trace} />
</td>
</tr>
Expand Down
Loading