Components

The package exports 10 components for displaying logging data. All components support both server mode (with fetch functions) and client mode (with data arrays).

LoggingProvider

Provides TanStack Query context for all logging components. Use this wrapper or provide your own QueryClientProvider.

import { LoggingProvider } from "@millerbyte/react-logging";

<LoggingProvider client={existingQueryClient}>
  {/* Your logging components */}
</LoggingProvider>

Props

JsonDisplay

A reusable component for displaying JSON data with syntax highlighting, copy functionality, and collapsible sections. Used internally by ActionDetail and SessionDetail for formatting complex data structures.

import { JsonDisplay } from "@millerbyte/react-logging";

<JsonDisplay 
  data={actionDto?.CustomData} 
  collapsible={true}
  showCopyButton={true}
  title="Custom Data"
/>

Props

SessionList

Displays a paginated, sortable table of login sessions with filtering.

<SessionList
  fetchSessions={loggingClient.fetchSessions}
  enablePolling
  pollingInterval={15000}
  onSessionClick={(session) => navigate(`/sessions/${session.Id}`)}
/>

Props

ActionList

Displays a paginated table of API actions with status codes, methods, and timing.

<ActionList
  fetchActions={loggingClient.fetchActions}
  onActionClick={(action) => navigate(`/actions/${action.Id}`)}
/>

ActionList has the same props as SessionList, but usesactions and fetchActions instead of sessions.

SessionDetail

Displays detailed information about a single session including all associated actions. Supports both client mode (pass data directly) and server mode (pass fetch functions). Includes LogoutTime, EndReason badges (color-coded by reason type), and properly formatted metadata with JSON support for complex values.

// Client mode — pass data directly
<SessionDetail
  session={sessionData}
  actions={sessionActions}
  onActionClick={(action) => navigate(`/actions/${action.Id}`)}
  formatters={customFormatters}
/>

// Server mode — fetch by ID
<SessionDetail
  sessionId={params.sessionId}
  fetchSession={loggingClient.fetchSessionById}
  fetchActions={loggingClient.fetchActions}
  onActionClick={(action) => navigate(`/actions/${action.Id}`)}
  enablePolling
  pollingInterval={15000}
/>

Props

ActionDetail

Displays comprehensive details of a single API action including request/response bodies, headers, and exception info. Now includes extensive new sections for complete observability.

<ActionDetail 
  action={actionData} 
  formatters={customFormatters}
  enablePolling={true}
/>

New Sections

• Requester Information: IP address, User-Agent, authentication status, user roles, claims, and headers (collapsible)
• Tracing & Diagnostics: TraceId, SpanId, ParentSpanId, CorrelationId, IdempotencyKey for distributed tracing
• Query & Route Parameters: Formatted key-value display of all URL parameters
• Log Messages: Array of log messages captured during the action
• Custom Data: Custom metadata with collapsible JSON viewer
• Enhanced Exceptions: Detailed exception breakdown with Type, Message, StackTrace (collapsible), and recursive InnerException support
• Environment & Metadata: MachineName, EnvironmentName, ApiVersion, SchemaVersion
• HTTP Method Badges: Color-coded badges for HTTP methods (GET=green, POST=blue, PUT=yellow, DELETE=red)

Props

Timeline

Chronological timeline view of sessions and actions with visual indicators.

<Timeline
  sessions={sessionsData}
  actions={actionsData}
  onItemClick={(item) => handleTimelineClick(item)}
  dateRange={{ from: startDate, to: endDate }}
  maxItems={100}
/>

Props

Analytics

Dashboard view with aggregate metrics, status code distribution, and top endpoints. Now includes HTTP Methods Distribution and Actions Over Time charts.

<Analytics
  sessions={sessionsData}
  actions={actionsData}
  dateRange={{ from: startDate, to: endDate }}
  enablePolling={true}
/>

New Charts

• HTTP Methods Distribution: Horizontal bar chart showing action counts by HTTP method (GET, POST, PUT, DELETE, PATCH) with color-coded bars
• Actions Over Time: Line chart displaying action trends over time with date labels (shown when actionsOverTime data is available)

Existing Charts

• Status Codes: Vertical bar chart of HTTP status code distribution
• Top Endpoints: Vertical bar chart showing most frequently called endpoints

Props

UserList

Displays a paginated, sortable table of aggregated user analytics. Shows total sessions, active sessions, last activity, first seen, and total actions per user. Added in v0.1.6.

<UserList
  fetchUsers={loggingClient.fetchUsers}
  onUserClick={(user) => navigate(`/users/${user.UserId}`)}
  enablePolling
  pollingInterval={30000}
/>

Props

Filters

Standalone filter controls for building custom UIs.

<Filters
  filters={filterState}
  onChange={setFilterState}
  config={{
    showSearch: true,
    showUserId: true,
    showStatusCodes: true,
    showDateRange: true,
  }}
/>

FilterConfig Options