Skip to content

fix(ui): Add array validation for provider variables mapping#12031

Closed
Cristhianzl wants to merge 7 commits into
release-1.8.0from
cz/fix-undefined-values
Closed

fix(ui): Add array validation for provider variables mapping#12031
Cristhianzl wants to merge 7 commits into
release-1.8.0from
cz/fix-undefined-values

Conversation

@Cristhianzl
Copy link
Copy Markdown
Member

@Cristhianzl Cristhianzl commented Mar 4, 2026

Objective
Prevent runtime errors when providerVariablesMapping returns a non-array value for a provider name.

Changes

  • Replace truthy check with Array.isArray() guard before accessing .length on apiVariables in useProviderConfiguration hook

Summary by CodeRabbit

Release Notes

  • New Features

    • Added execution tracing and monitoring capabilities with a new Traces sidebar section displaying flow activity.
    • Introduced trace detail viewer with span hierarchy, latency metrics, token usage, and I/O inspection.
    • Added date range filtering, session filtering, and search for traces.
    • Extended Knowledge Ingestion component to accept Message inputs with automatic conversion to DataFrame.
    • Added build cancellation button in the playground chat interface.
  • Improvements

    • Enhanced focus styling across UI components for better accessibility.
    • Improved error handling and messaging for file uploads.

@Cristhianzl Cristhianzl changed the base branch from main to release-1.8.0 March 4, 2026 17:43
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 4, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 54144b8e-7b19-44aa-9d18-044e68162510

📥 Commits

Reviewing files that changed from the base of the PR and between 14e3cf7 and b0c6f69.

📒 Files selected for processing (104)
  • .secrets.baseline
  • src/backend/base/langflow/alembic/versions/3478f0bd6ccb_add_trace_and_span_tables.py
  • src/backend/base/langflow/alembic/versions/59a272d6669a_ensure_trace_flow_id_cascade.py
  • src/backend/base/langflow/api/router.py
  • src/backend/base/langflow/api/v1/__init__.py
  • src/backend/base/langflow/api/v1/traces.py
  • src/backend/base/langflow/initial_setup/starter_projects/Knowledge Ingestion.json
  • src/backend/base/langflow/services/database/models/__init__.py
  • src/backend/base/langflow/services/database/models/traces/__init__.py
  • src/backend/base/langflow/services/database/models/traces/model.py
  • src/backend/base/langflow/services/tracing/formatting.py
  • src/backend/base/langflow/services/tracing/native.py
  • src/backend/base/langflow/services/tracing/native_callback.py
  • src/backend/base/langflow/services/tracing/repository.py
  • src/backend/base/langflow/services/tracing/service.py
  • src/backend/base/langflow/services/tracing/validation.py
  • src/backend/tests/unit/api/v1/test_traces_api.py
  • src/backend/tests/unit/components/files_and_knowledge/test_ingestion.py
  • src/backend/tests/unit/services/tracing/test_formatting.py
  • src/backend/tests/unit/services/tracing/test_native_callback.py
  • src/backend/tests/unit/services/tracing/test_native_tracer.py
  • src/backend/tests/unit/services/tracing/test_repository.py
  • src/backend/tests/unit/services/tracing/test_tracing_service.py
  • src/backend/tests/unit/services/tracing/test_validation.py
  • src/backend/tests/unit/test_setup_superuser_flow.py
  • src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
  • src/frontend/src/components/core/logCanvasControlsComponent/__tests__/LogCanvasControls.spec.tsx
  • src/frontend/src/components/core/logCanvasControlsComponent/index.tsx
  • src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAdvancedToggleCellRender/VisibilityToggleButton.tsx
  • src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAdvancedToggleCellRender/__tests__/VisibilityToggleButton.test.tsx
  • src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAdvancedToggleCellRender/index.tsx
  • src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/session-selector.tsx
  • src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/components/button-send-wrapper.tsx
  • src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/components/input-wrapper.tsx
  • src/frontend/src/components/ui/__tests__/dialog.test.tsx
  • src/frontend/src/components/ui/badge.tsx
  • src/frontend/src/components/ui/dialog.tsx
  • src/frontend/src/components/ui/select.tsx
  • src/frontend/src/components/ui/sidebar.tsx
  • src/frontend/src/controllers/API/helpers/constants.ts
  • src/frontend/src/controllers/API/queries/traces/__tests__/helpers.test.ts
  • src/frontend/src/controllers/API/queries/traces/__tests__/use-get-trace.test.ts
  • src/frontend/src/controllers/API/queries/traces/__tests__/use-get-traces.test.ts
  • src/frontend/src/controllers/API/queries/traces/helpers.ts
  • src/frontend/src/controllers/API/queries/traces/index.ts
  • src/frontend/src/controllers/API/queries/traces/types.ts
  • src/frontend/src/controllers/API/queries/traces/use-get-trace.ts
  • src/frontend/src/controllers/API/queries/traces/use-get-traces.ts
  • src/frontend/src/modals/IOModal/components/chat-view-wrapper.tsx
  • src/frontend/src/modals/flowLogsModal/components/LogDetailViewer.tsx
  • src/frontend/src/modals/flowLogsModal/config/flowLogsColumns.tsx
  • src/frontend/src/modals/flowLogsModal/index.tsx
  • src/frontend/src/modals/modelProviderModal/hooks/useProviderConfiguration.ts
  • src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx
  • src/frontend/src/pages/FlowPage/components/PageComponent/__tests__/MemoizedComponents.test.tsx
  • src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/DateRangePopover.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/FlowInsightsContent.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/SpanDetail.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/SpanNode.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/SpanTree.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/TraceAccordionItem.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/TraceDetailView.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/__tests__/DateRangePopover.test.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/__tests__/SpanDetail.test.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/__tests__/SpanNode.test.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/__tests__/SpanTree.test.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/__tests__/TraceDetailView.test.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/__tests__/spanTestUtils.ts
  • src/frontend/src/pages/FlowPage/components/TraceComponent/__tests__/traceViewHelpers.test.ts
  • src/frontend/src/pages/FlowPage/components/TraceComponent/config/__tests__/flowTraceColumnsHelpers.test.ts
  • src/frontend/src/pages/FlowPage/components/TraceComponent/config/flowTraceColumns.tsx
  • src/frontend/src/pages/FlowPage/components/TraceComponent/config/flowTraceColumnsHelpers.ts
  • src/frontend/src/pages/FlowPage/components/TraceComponent/traceViewHelpers.ts
  • src/frontend/src/pages/FlowPage/components/TraceComponent/types.ts
  • src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarSegmentedNav.test.tsx
  • src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/searchInput.tsx
  • src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarSegmentedNav.tsx
  • src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
  • src/frontend/src/pages/FlowPage/components/flowSidebarComponent/types/index.ts
  • src/frontend/src/pages/FlowPage/index.tsx
  • src/frontend/src/pages/MainPage/hooks/use-on-file-drop.ts
  • src/frontend/src/pages/MainPage/pages/knowledgePage/sourceChunksPage/SourceChunksPage.tsx
  • src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/helpers.ts
  • src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
  • src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/__tests__/EditShortcutButton.helpers.test.ts
  • src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/__tests__/EditShortcutButton.test.tsx
  • src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
  • src/frontend/src/utils/__tests__/dateTime.test.ts
  • src/frontend/src/utils/dateTime.ts
  • src/frontend/tests/core/features/logs.spec.ts
  • src/frontend/tests/core/features/traces.spec.ts
  • src/frontend/tests/core/regression/general-bugs-invalid-json-upload.spec.ts
  • src/frontend/tests/extended/features/flow-logs-modal.spec.ts
  • src/lfx/src/lfx/_assets/component_index.json
  • src/lfx/src/lfx/_assets/stable_hash_history.json
  • src/lfx/src/lfx/components/agentics/__init__.py
  • src/lfx/src/lfx/components/files_and_knowledge/ingestion.py
  • src/lfx/src/lfx/components/llm_operations/guardrails.py
  • src/lfx/src/lfx/graph/graph/base.py
  • src/lfx/src/lfx/services/settings/base.py
  • src/lfx/src/lfx/services/tracing/base.py
  • src/lfx/src/lfx/services/tracing/service.py
  • src/lfx/tests/unit/services/settings/test_runtime_port.py

Walkthrough

This PR introduces comprehensive native tracing support to Langflow, enabling collection and visualization of execution traces directly in the database. It includes database schema migrations, new API endpoints for trace management, backend tracing services with formatting and repository layers, and an extensive frontend UI for traces with tree visualization, filtering, and detail panels.

Changes

Cohort / File(s) Summary
Database Migrations
src/backend/base/langflow/alembic/versions/3478f0bd6ccb_add_trace_and_span_tables.py, src/backend/base/langflow/alembic/versions/59a272d6669a_ensure_trace_flow_id_cascade.py
Create trace/span tables with indexes, relationships, and cascade delete behavior; ensure cascade delete on flow_id foreign key.
Tracing Service Layer
src/backend/base/langflow/services/tracing/native.py, src/backend/base/langflow/services/tracing/native_callback.py, src/backend/base/langflow/services/tracing/formatting.py, src/backend/base/langflow/services/tracing/repository.py, src/backend/base/langflow/services/tracing/validation.py
Implement NativeTracer for in-memory span collection and database persistence; add NativeCallbackHandler for LangChain event bridging; create formatting/IO extraction helpers; add repository for trace querying with pagination and filtering; provide query sanitization.
Tracing Service Integration
src/backend/base/langflow/services/tracing/service.py
Extend TracingService and TraceContext to accept and propagate flow_id; initialize and flush NativeTracer during trace lifecycle.
Database Models
src/backend/base/langflow/services/database/models/traces/model.py, src/backend/base/langflow/services/database/models/traces/__init__.py, src/backend/base/langflow/services/database/models/__init__.py
Define SQLModel ORM classes (TraceTable, SpanTable) with enums (SpanStatus, SpanType, SpanKind); create Pydantic schemas for API serialization; establish relationships and cascade behaviors.
Tracing API Endpoints
src/backend/base/langflow/api/v1/traces.py, src/backend/base/langflow/api/router.py, src/backend/base/langflow/api/v1/__init__.py
Add GET/DELETE endpoints for traces with filtering, pagination, authorization, and error handling; register router in v1 API.
Backend Tests
src/backend/tests/unit/api/v1/test_traces_api.py, src/backend/tests/unit/services/tracing/test_*.py, src/backend/tests/unit/test_setup_superuser_flow.py
Comprehensive unit tests for trace API endpoints, tracing services (native tracer, callback handler, formatting, repository), and superuser setup fixtures.
Frontend Trace UI Components
src/frontend/src/pages/FlowPage/components/TraceComponent/FlowInsightsContent.tsx, src/frontend/src/pages/FlowPage/components/TraceComponent/TraceDetailView.tsx, src/frontend/src/pages/FlowPage/components/TraceComponent/TraceAccordionItem.tsx, src/frontend/src/pages/FlowPage/components/TraceComponent/SpanTree.tsx, src/frontend/src/pages/FlowPage/components/TraceComponent/SpanNode.tsx, src/frontend/src/pages/FlowPage/components/TraceComponent/SpanDetail.tsx, src/frontend/src/pages/FlowPage/components/TraceComponent/DateRangePopover.tsx
Build trace visualization UI with filterable trace list, accordion expansion, span tree rendering, detail panels, date range filtering, search, and status filtering.
Frontend Trace Helpers
src/frontend/src/pages/FlowPage/components/TraceComponent/traceViewHelpers.ts, src/frontend/src/pages/FlowPage/components/TraceComponent/config/flowTraceColumns.tsx, src/frontend/src/pages/FlowPage/components/TraceComponent/config/flowTraceColumnsHelpers.ts, src/frontend/src/pages/FlowPage/components/TraceComponent/types.ts
Provide formatting utilities for status/icons/tokens/dates, AG Grid column definitions, type definitions for spans/traces, and helper functions for UI data transformation.
Frontend API Layer
src/frontend/src/controllers/API/queries/traces/use-get-traces.ts, src/frontend/src/controllers/API/queries/traces/use-get-trace.ts, src/frontend/src/controllers/API/queries/traces/helpers.ts, src/frontend/src/controllers/API/queries/traces/types.ts, src/frontend/src/controllers/API/queries/traces/index.ts
Create React Query hooks for fetching paginated traces and single traces; add helpers for sanitizing query params and converting API responses; define TypeScript types for API contracts.
Frontend Sidebar & Layout
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarSegmentedNav.tsx, src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx, src/frontend/src/pages/FlowPage/index.tsx, src/frontend/src/components/ui/sidebar.tsx
Add "traces" navigation item; implement sidebar animations/transitions when switching to traces view; conditionally render FlowInsightsContent based on active section.
Frontend UI Updates
src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/components/button-send-wrapper.tsx, src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAdvancedToggleCellRender/VisibilityToggleButton.tsx, src/frontend/src/components/ui/badge.tsx, src/frontend/src/components/ui/dialog.tsx, src/frontend/src/components/ui/select.tsx
Add isBuilding prop to button-send-wrapper; create VisibilityToggleButton component for table cells; update focus styling to focus-visible variants throughout UI components; add onOpenAutoFocus handler to dialog.
Frontend Tests
src/frontend/src/controllers/API/queries/traces/__tests__/helpers.test.ts, src/frontend/src/controllers/API/queries/traces/__tests__/use-get-trace.test.ts, src/frontend/src/controllers/API/queries/traces/__tests__/use-get-traces.test.ts, src/frontend/src/pages/FlowPage/components/TraceComponent/__tests__/*.test.tsx, src/frontend/tests/core/features/traces.spec.ts
Add unit tests for trace API hooks, helpers, and React components; add E2E tests for trace UI interactions.
Component Updates
src/frontend/src/initial_setup/starter_projects/Knowledge Ingestion.json, src/lfx/src/lfx/components/files_and_knowledge/ingestion.py
Expand input_df to accept Message type in addition to Data and DataFrame; update metadata hash.
Removed Components
src/frontend/src/components/core/logCanvasControlsComponent/, src/frontend/src/modals/flowLogsModal/
Remove LogCanvasControls component and FlowLogsModal component in favor of new trace visualization UI.
Settings & Configuration
src/lfx/src/lfx/services/settings/base.py, src/frontend/src/controllers/API/helpers/constants.ts
Add runtime_port validator; add TRACES URL constant to API endpoints; update SearchInput ref typing.
Shortcuts & Helpers
src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/helpers.ts, src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
Extract shortcut management helpers and refactor EditShortcutButton to use them; add tests for helpers.
Date/Time Utilities
src/frontend/src/utils/dateTime.ts, src/frontend/src/utils/__tests__/dateTime.test.ts
Add parseApiTimestamp and formatSmartTimestamp utilities for consistent date handling in trace UI.
Metadata & Secrets
.secrets.baseline, src/lfx/src/lfx/_assets/stable_hash_history.json
Update secret detection baselines and component hash history for Knowledge Ingestion and GuardrailValidator.

Sequence Diagram(s)

sequenceDiagram
    participant Client as Client (Frontend)
    participant API as API (traces.py)
    participant Repo as Repository
    participant DB as Database
    participant Cache as ORM Cache

    Client->>API: GET /monitor/traces?flow_id=X&page=1
    activate API
    API->>Repo: fetch_traces(user_id, flow_id, page, size)
    activate Repo
    Repo->>DB: Query traces with filters
    activate DB
    DB-->>Cache: Load TraceTable + spans
    Cache-->>DB: Returns rows
    DB-->>Repo: Trace + span rows
    deactivate DB
    Repo->>Repo: build_span_tree(spans)
    Repo->>Repo: compute_leaf_token_total()
    Repo->>Repo: extract_trace_io_from_spans()
    Repo-->>API: TraceListResponse
    deactivate Repo
    API->>API: Validate authorization
    API-->>Client: 200 + traces list
    deactivate API
    
    Client->>API: GET /monitor/traces/{trace_id}
    activate API
    API->>Repo: fetch_single_trace(user_id, trace_id)
    activate Repo
    Repo->>DB: Query trace + spans
    DB-->>Repo: Loaded data
    Repo->>Repo: build_span_tree(spans)
    Repo-->>API: TraceRead (with span tree)
    deactivate Repo
    API-->>Client: 200 + trace detail
    deactivate API
Loading
sequenceDiagram
    participant Flow as Flow Execution
    participant Tracer as NativeTracer
    participant Memory as In-Memory State
    participant LangChain as LangChain Callback
    participant Queue as Async Queue
    participant DB as Database

    Flow->>Tracer: add_trace(component_name, inputs)
    activate Tracer
    Tracer->>Memory: Store span metadata
    Tracer->>Memory: Set current component context
    deactivate Tracer
    
    opt LangChain Integration
        LangChain->>Tracer: get_langchain_callback()
        activate Tracer
        Tracer->>LangChain: Return NativeCallbackHandler
        deactivate Tracer
        LangChain->>Tracer: on_llm_start(), on_llm_end()
        activate Tracer
        Tracer->>Memory: add/end_langchain_span()
        deactivate Tracer
    end
    
    Flow->>Tracer: end_trace(outputs, error)
    activate Tracer
    Tracer->>Memory: Move span to completed_spans
    deactivate Tracer
    
    Flow->>Tracer: end()
    activate Tracer
    Tracer->>Queue: Schedule async flush
    Tracer-->>Flow: Acknowledged
    deactivate Tracer
    
    Queue->>Tracer: _flush_to_database()
    activate Tracer
    Tracer->>DB: Compute total tokens
    Tracer->>DB: Insert trace record
    Tracer->>DB: Insert all spans
    Tracer->>Memory: Clear completed_spans
    DB-->>Tracer: Success
    deactivate Tracer
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

Suggested labels

lgtm

Suggested reviewers

  • Adam-Aghili
✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch cz/fix-undefined-values

@Cristhianzl Cristhianzl closed this Mar 4, 2026
@github-actions github-actions Bot added bug Something isn't working and removed bug Something isn't working labels Mar 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant