refactor: enhance FlowLogsModal functionality

[deon-sanchez]

How to Test

Run a flow and check the logs

Description

This pull request introduces improvements to both the frontend and backend for flow logs and transaction logging. On the frontend, the flow logs modal now sorts log entries by timestamp and updates data when pagination changes, while also correcting paginator logic. On the backend, transaction and vertex build logging have been enhanced with better error handling, richer data capture, and best-effort persistence when running within Langflow, including lazy imports to avoid unnecessary dependencies.

Frontend improvements to flow logs modal:

• Log entries are now sorted by timestamp (earliest first) for clearer chronological display.
• Data is automatically refetched when pagination parameters change, ensuring the displayed logs are up to date.
• Paginator logic is corrected to use the actual number of pages and local state for page index/size, improving navigation consistency.

Backend improvements to transaction and vertex build logging:

• Transaction logging now performs a best-effort persistence to the database when running within Langflow, using lazy imports to avoid hard dependencies. It captures enhanced input, output, and error details for better traceability.
• Logging functions for transactions and vertex builds feature improved error handling and more robust logging, including richer debug messages and handling for unavailable services. [1] [2] [3]

Minor code style and clarity updates:

• Several backend functions have been refactored for readability, such as clearer type checks and multi-line conditions. [1] [2]

Summary by CodeRabbit

• Bug Fixes

  • Flow Logs modal now sorts entries by timestamp in ascending order for consistent timelines.
  • Pagination automatically refreshes data when page or page size changes while the modal is open.
  • Paginator only appears when there is more than one page, reducing visual clutter.

• Chores

  • Added best-effort, optional persistence of transaction logs when supported, improving observability without affecting runtime behavior.

[coderabbitai[bot]]

[!IMPORTANT]

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Implements client-side sorting and pagination behavior updates in the Flow Logs modal, including refetch on page changes and revised paginator props/visibility. Adds optional, lazy Langflow-backed transaction persistence in log_transaction with structured payload and async DB session, falling back to no-op when Langflow components are unavailable or any step fails.

Changes

Cohort / File(s)	Summary of Changes
Frontend: Flow Logs Modal src/frontend/src/modals/flowLogsModal/index.tsx	- Sort rows by localized timestamp ascending before setting state - Refetch data on pageIndex/pageSize changes while modal is open - Show paginator only when pages > 1 - Pass pageIndex/pageSize from local state to paginator; use data.pagination.pages for pages and totalRowsCount for total
LFX Graph Utils: Optional Langflow Persistence src/lfx/src/lfx/graph/utils.py	- Add best-effort, lazy import path to persist transaction records via Langflow DB if available - Build structured payload (source/target IDs/args, outputs, error details) - Use async DB session; gracefully no-op on import/DB errors - Remove inline noqa suppressions; public signatures unchanged

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant M as FlowLogsModal
  participant API as Logs API
  participant P as Paginator

  U->>M: Open modal
  M->>API: Fetch logs (pageIndex, pageSize)
  API-->>M: Logs + pagination (pages, total)
  M->>M: Convert timestamps to local, sort ascending
  M->>P: Render with {pages, total, pageIndex, pageSize}
  Note over P,M: Paginator visible only if pages > 1

  P->>M: Change pageIndex/pageSize
  M->>API: Refetch with updated params
  API-->>M: New logs + pagination
  M->>M: Convert & sort, update rows
  M->>P: Update paginator props

sequenceDiagram
  autonumber
  participant G as log_transaction
  participant L as Langflow Modules (lazy import)
  participant DB as Async DB Session
  participant S as Storage/Console

  G->>G: Prepare transaction data (source/target args, outputs, error)
  alt Langflow available
    G->>L: Lazy import models/session
    alt Import OK
      G->>G: Build structured payload
      G->>DB: Open async session
      G->>DB: Persist transaction
      DB-->>G: Commit/close
    else Import fails or build error
      Note over G: Skip DB persistence
      G->>S: Proceed with existing storage/logging
    end
  else Langflow not available
    G->>S: Proceed with existing storage/logging
  end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

✨ Finishing touches

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch lfoss-1722

[!TIP]

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example:

"Create a concise high-level summary as a bullet-point list. Then include a Markdown table showing lines added and removed by each contributing author."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions[bot]]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	14.67% (3983/27150)	7.57% (1560/20591)	8.93% (535/5989)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
1630	0 :zzz:	0 :x:	0 :fire:	18.925s :stopwatch:

[codecov[bot]]

Codecov Report

:x: Patch coverage is 36.50794% with 80 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 31.66%. Comparing base (d1d005c) to head (bc8f865). :warning: Report is 54 commits behind head on main.

Files with missing lines	Patch %	Lines
src/lfx/src/lfx/graph/utils.py	12.50%	28 Missing :warning:
...rc/modals/flowLogsModal/config/flowLogsColumns.tsx	0.00%	22 Missing :warning:
src/frontend/src/modals/flowLogsModal/index.tsx	0.00%	16 Missing :warning:
src/lfx/src/lfx/cli/run.py	52.94%	6 Missing and 2 partials :warning:
src/lfx/src/lfx/graph/vertex/base.py	80.00%	1 Missing and 2 partials :warning:
...low/services/database/models/transactions/model.py	86.66%	2 Missing :warning:
...flow/services/database/models/transactions/crud.py	75.00%	1 Missing :warning:

:exclamation: There is a different number of reports uploaded between BASE (d1d005c) and HEAD (bc8f865). Click for more details.

HEAD has 18 uploads less than BASE

Flag	BASE (d1d005c)	HEAD (bc8f865)
frontend	4	1
backend	20	5

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9805      +/-   ##
==========================================
- Coverage   39.10%   31.66%   -7.44%     
==========================================
  Files        1500     1349     -151     
  Lines       86885    61191   -25694     
  Branches    10468     9142    -1326     
==========================================
- Hits        33978    19379   -14599     
+ Misses      51859    40898   -10961     
+ Partials     1048      914     -134     

Flag	Coverage Δ
backend	51.97% <87.50%> (-5.63%)	:arrow_down:
frontend	13.58% <0.00%> (-0.70%)	:arrow_down:
lfx	38.94% <39.06%> (+0.02%)	:arrow_up:

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/backend/base/langflow/api/v1/monitor.py	48.03% <100.00%> (ø)
src/frontend/src/CustomNodes/GenericNode/index.tsx	0.00% <ø> (-4.25%)	:arrow_down:
...mponents/core/logCanvasControlsComponent/index.tsx	100.00% <ø> (ø)
...flow/services/database/models/transactions/crud.py	63.63% <75.00%> (-6.37%)	:arrow_down:
...low/services/database/models/transactions/model.py	90.00% <86.66%> (+8.18%)	:arrow_up:
src/lfx/src/lfx/graph/vertex/base.py	56.76% <80.00%> (+0.48%)	:arrow_up:
src/lfx/src/lfx/cli/run.py	72.41% <52.94%> (-1.45%)	:arrow_down:
src/frontend/src/modals/flowLogsModal/index.tsx	0.00% <0.00%> (ø)
...rc/modals/flowLogsModal/config/flowLogsColumns.tsx	0.00% <0.00%> (ø)
src/lfx/src/lfx/graph/utils.py	36.17% <12.50%> (+1.30%)	:arrow_up:

... and 376 files with indirect coverage changes

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Cristhianzl]

https://www.loom.com/share/f9b90e7fa9cd458d8288f906003443a3?sid=113fffbd-d90c-4442-b1e1-6b12b5a9ee54

When there is only one component on the screen, it's currently capturing only error responses, not successful ones. Additionally, the errors are being duplicated.

The tests related to flow-logs-pagination are also failing.

[Cristhianzl]

hey @deon-sanchez, I was checking the tests why a lot of them are failing and I've found something strange. For some reason, something changed the behavior of the notifications. It’s a bit intermittent, if you keep running components, sometimes the “build successful” notification just doesn’t appear for some reason. I tried to record a video to show you what I mean.

I was using this flow to test: TEST FLOW.json

https://github.com/user-attachments/assets/cde3935f-c8a3-433a-997c-c52ea2fc3177