fix: Improve flow export error handling and validation#8943
Conversation
… export functionality and error handling ♻️ (reactflowUtils.ts): Refactor downloadFlow function to return a Promise and improve error handling
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe export modal's submission logic was refactored to handle asynchronous export operations with proper error handling. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ExportModal
participant reactflowUtils
participant customDownloadFlow
User->>ExportModal: Submit export form
ExportModal->>reactflowUtils: await downloadFlow(flow, name, description)
reactflowUtils->>customDownloadFlow: await customDownloadFlow(...)
customDownloadFlow-->>reactflowUtils: filePath or error
reactflowUtils-->>ExportModal: filePath or error
alt Success
ExportModal->>ExportModal: Set success/notice alert, close modal, track event
else Error
ExportModal->>Console: Log error
end
Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
dosubot
Bot
added
the
size:M
…error in export flow to improve code readability
github-actions
Bot
added
bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/frontend/src/modals/exportModal/index.tsx(1 hunks)src/frontend/src/utils/reactflowUtils.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`src/frontend/**/*.{ts,tsx}`: Use React 18 with TypeScript for all UI components and frontend logic.
src/frontend/**/*.{ts,tsx}: Use React 18 with TypeScript for all UI components and frontend logic.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/modals/exportModal/index.tsxsrc/frontend/src/utils/reactflowUtils.ts
`src/frontend/**/*.{ts,tsx,js,jsx,css,scss}`: Use Tailwind CSS for styling all frontend components.
src/frontend/**/*.{ts,tsx,js,jsx,css,scss}: Use Tailwind CSS for styling all frontend components.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/modals/exportModal/index.tsxsrc/frontend/src/utils/reactflowUtils.ts
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/components/**/*FlowGraph.tsx : Use React Flow for flow graph visualization components.
src/frontend/src/modals/exportModal/index.tsx (3)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{hooks,services}/**/*.{ts,tsx} : All API calls must implement proper error handling, typically using try/catch and setting error state.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/components/**/*FlowGraph.tsx : Use React Flow for flow graph visualization components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Custom React Flow node types should be implemented as memoized components, using Handle components for connection points and supporting optional icons and labels.
src/frontend/src/utils/reactflowUtils.ts (1)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/components/**/*FlowGraph.tsx : Use React Flow for flow graph visualization components.
🧬 Code Graph Analysis (1)
src/frontend/src/modals/exportModal/index.tsx (3)
src/frontend/src/utils/reactflowUtils.ts (2)
downloadFlow(1903-1927)removeApiKeys(472-483)src/frontend/src/constants/alerts_constants.tsx (1)
API_WARNING_NOTICE_ALERT(49-50)src/frontend/src/customization/utils/analytics.ts (1)
track(1-7)
🪛 Biome (1.9.4)
src/frontend/src/modals/exportModal/index.tsx
[error] 58-58: void is confusing inside a union type.
Unsafe fix: Use undefined instead.
(lint/suspicious/noConfusingVoidType)
src/frontend/src/utils/reactflowUtils.ts
[error] 1907-1908: void is confusing inside a union type.
Unsafe fix: Use undefined instead.
(lint/suspicious/noConfusingVoidType)
🔇 Additional comments (3)
src/frontend/src/utils/reactflowUtils.ts (1)
1922-1926: Excellent error handling improvements.The changes to await the
customDownloadFlowcall and rethrow errors instead of swallowing them significantly improve error propagation and debugging capabilities. This aligns well with the PR objectives of improving error handling.src/frontend/src/modals/exportModal/index.tsx (2)
56-110: Excellent async refactoring with proper error handling.The conversion from synchronous to asynchronous handling is well-implemented:
- Proper try/catch error handling
- Conditional logic correctly handles both export scenarios (with/without API keys)
- Success validation using the returned
filePath- Appropriate user feedback through alerts
- Consistent tracking and modal closure on success
This aligns perfectly with the PR objectives of improving flow export error handling and validation.
60-82: Verify consistent behavior between export modes.The conditional logic properly handles both export scenarios, but ensure that the success/failure validation logic is consistent between the two branches. Both branches correctly:
- Await the
downloadFlowcall- Check for truthy
filePathreturn value- Show appropriate alerts and close modal on success
- Track the export event
| flowName: string, | ||
| flowDescription?: string, | ||
| ) { | ||
| ): Promise<string | undefined | void> { |
There was a problem hiding this comment.
Fix confusing void type in union type.
The void type is confusing in union types and should be replaced with undefined for clarity.
Apply this diff to fix the type issue:
-): Promise<string | undefined | void> {
+): Promise<string | undefined> {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ): Promise<string | undefined | void> { | |
| ): Promise<string | undefined> { |
🧰 Tools
🪛 Biome (1.9.4)
[error] 1907-1908: void is confusing inside a union type.
Unsafe fix: Use undefined instead.
(lint/suspicious/noConfusingVoidType)
🤖 Prompt for AI Agents
In src/frontend/src/utils/reactflowUtils.ts at line 1907, the return type
includes a union with void, which is confusing. Replace the void type in the
union with undefined to clarify the return type, so it becomes Promise<string |
undefined> instead of Promise<string | undefined | void>.
| data: currentFlow!.data!, | ||
| onSubmit={async () => { | ||
| try { | ||
| let filePath: string | undefined | void; |
There was a problem hiding this comment.
Fix confusing void type in union type.
The void type is confusing in union types and should be replaced with undefined for clarity, consistent with the downloadFlow function signature.
Apply this diff to fix the type issue:
- let filePath: string | undefined | void;
+ let filePath: string | undefined;🧰 Tools
🪛 Biome (1.9.4)
[error] 58-58: void is confusing inside a union type.
Unsafe fix: Use undefined instead.
(lint/suspicious/noConfusingVoidType)
🤖 Prompt for AI Agents
In src/frontend/src/modals/exportModal/index.tsx at line 58, the variable
filePath is declared with a union type including void, which is confusing.
Change the type annotation to only include string and undefined, removing void,
to match the downloadFlow function signature and improve clarity.
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
…implify logic for exporting flows 💡 (exportModal/index.tsx): refactor code to improve readability and remove redundant code for exporting flows
github-actions
Bot
added
bug
github-actions
Bot
added
bug
) * ✨ (exportModal/index.tsx): Refactor onSubmit function to improve flow export functionality and error handling ♻️ (reactflowUtils.ts): Refactor downloadFlow function to return a Promise and improve error handling * 📝 (exportModal/index.tsx): remove unnecessary comment about handling error in export flow to improve code readability * 🐛 (exportModal/index.tsx): remove unnecessary filePath variable and simplify logic for exporting flows 💡 (exportModal/index.tsx): refactor code to improve readability and remove redundant code for exporting flows
3 participants
This pull request improves the flow export functionality in the
ExportModalcomponent by adding error handling and ensuring thedownloadFlowfunction returns a value. It also updates thedownloadFlowutility function to return a promise, enabling better control over the flow export process.Changes to
ExportModalcomponent:onSubmitmethod insrc/frontend/src/modals/exportModal/index.tsxto handle errors during the export process and check if thedownloadFlowfunction returns a valid file path before proceeding with success or warning notices. [1] [2] [3]Changes to
downloadFlowutility function:downloadFlowfunction insrc/frontend/src/utils/reactflowUtils.tsto return aPromiseofstring | undefined | void, allowing the caller to determine the success of the operation.customDownloadFlowinvocation withindownloadFlowreturns a value and added error propagation for better error handling.Summary by CodeRabbit
Bug Fixes
New Features