Skip to content
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.

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

fix(editor): Fix issues with push connect reconnection #13085

Merged
merged 11 commits into from
Feb 6, 2025

Conversation

tomi
Copy link
Collaborator

@tomi tomi commented Feb 5, 2025

Summary

  • Fix the connection lost message from not being shown if push connection drops
image
  • Remove state duplication from root store and push connection store
  • Separate WebSocket and EventSource to own composables
  • Log to console unexpected websocket disconnects for easier debugging
  • Add a heartbeat message from FE to BE so FE can also notice dropped connections

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/CAT-622/issues-with-websocket-reconnection

Review / Merge checklist

  • PR title and summary are descriptive. (conventions)
  • Docs updated or follow-up ticket created.
  • Tests included.
  • PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

@n8n-assistant n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Feb 5, 2025
Copy link

codecov bot commented Feb 6, 2025

Codecov Report

Attention: Patch coverage is 90.90909% with 20 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
...kages/editor-ui/src/stores/pushConnection.store.ts 58.53% 17 Missing ⚠️
...ditor-ui/src/push-connection/useWebSocketClient.ts 96.00% 3 Missing ⚠️

📢 Thoughts on this report? Let us know!

alexgrozav
alexgrozav previously approved these changes Feb 6, 2025
Copy link
Member

@alexgrozav alexgrozav left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Absolutely beautiful work! 😍

Left a few comments, but feel free to ignore if you think it's unnecessary.

import { useEventSourceClient } from '../useEventSourceClient';

/** Mocked EventSource class to help testing */
class MockEventSource extends EventTarget {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to extract this and MockWebSocket to src/__tests__/mocks.ts?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. Moved the mocks to their own files

Comment on lines 30 to 43
const heartbeatTimer = ref<ReturnType<typeof setInterval> | null>(null);

const startHeartbeat = () => {
heartbeatTimer.value = setInterval(() => {
socket.value?.send(JSON.stringify({ type: 'heartbeat' }));
}, 30_000);
};

const stopHeartbeat = () => {
if (heartbeatTimer.value) {
clearInterval(heartbeatTimer.value);
heartbeatTimer.value = null;
}
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we extract this functionality into a useHeartbeat composable? Could be reused for other polling-type checks later.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 moved out

Copy link
Contributor

github-actions bot commented Feb 6, 2025

⚠️ Some Cypress E2E specs are failing, please fix them before merging

Copy link

cypress bot commented Feb 6, 2025

n8n    Run #9168

Run Properties:  status check passed Passed #9168  •  git commit 0d3b8a0c36: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 tomi 🗃️ e2e/*
Project n8n
Branch Review cat-622-issues-with-websocket-reconnection
Run status status check passed Passed #9168
Run duration 04m 43s
Commit git commit 0d3b8a0c36: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 tomi 🗃️ e2e/*
Committer Tomi Turtiainen
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 5
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 433
View all changes introduced in this branch ↗︎

@tomi
Copy link
Collaborator Author

tomi commented Feb 6, 2025

@alexgrozav addressed the feedback. Please have another look 🙏

alexgrozav
alexgrozav previously approved these changes Feb 6, 2025
Copy link
Member

@alexgrozav alexgrozav left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for addressing all the feedback!

Copy link
Contributor

github-actions bot commented Feb 6, 2025

⚠️ Some Cypress E2E specs are failing, please fix them before merging

Copy link
Contributor

github-actions bot commented Feb 6, 2025

✅ All Cypress E2E specs passed

@tomi tomi merged commit fff98b1 into master Feb 6, 2025
38 checks passed
@tomi tomi deleted the cat-622-issues-with-websocket-reconnection branch February 6, 2025 14:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants