bug: SSE Subscription Never Aborts
Problem
Provide environment information System: OS: Linux 5.0 undefined CPU: (6) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 0 Bytes / 0 Bytes Shell: 1.0 - /bin/jsh Binaries: Node: 18.20.3 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 10.2.3 - /usr/local/bin/npm pnpm: 8.15.6 - /usr/local/bin/pnpm npmPackages: @tanstack/react-query: ^5.59.17 => 5.59.20 @trpc/client: ^11.0.0-rc.608 => 11.0.0-rc.608+f75de97b3 @trpc/next: ^11.0.0-rc.608 => 11.0.0-rc.608+f75de97b3 @trpc/react-query: ^11.0.0-rc.608 => 11.0.0-rc.608+f75de97b3 @trpc/server: ^11.0.0-rc.608 => 11.0.0-rc.608+f75de97b3 next: 15.0.2 => 15.0.2 react: ^19.0.0-rc-7c8e5e7a-20241101 => 19.0.0-rc-fb9a90fa48-20240614 typescript: ^5 => 5.6.3 Describe the bug Subscription never gets aborted Link to reproduction https://stackblitz.com/~/github.com/yspreen/trpc-bug To reproduce https://stackblitz.com/~/github.com/yspreen/trpc-bug Additional information _No response_ 👨👧👦 Contributing - [X] 🙋♂️ Yes, I'd be down to file a PR fixing this bug!
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix SSE Subscription Abortion Logic
The SSE (Server-Sent Events) subscription does not properly handle abort signals, likely due to missing cleanup logic in the subscription management. This can cause the subscription to remain active even after the component unmounts or the user navigates away, leading to memory leaks and unresponsive behavior.
Awaiting Verification
Be the first to verify this fix
- 1
Update Subscription Cleanup Logic
Ensure that the subscription cleanup logic is properly implemented in the component using the SSE. This involves adding an abort signal to the subscription and ensuring it is called when the component unmounts.
typescriptuseEffect(() => { const subscription = subscribeToSSE(); return () => { subscription.abort(); // Ensure the subscription is aborted on unmount }; }, []); - 2
Check for Active Subscriptions
Implement a check to see if there are any active subscriptions before attempting to abort them. This prevents errors in case the subscription was already aborted.
typescriptif (subscription.isActive) { subscription.abort(); } - 3
Test Subscription Behavior
Run tests to confirm that the subscription is properly aborted when the component unmounts. Use a testing framework to simulate component lifecycle events.
typescriptimport { render, unmountComponentAtNode } from 'react-dom'; const container = document.createElement('div'); render(<MyComponent />, container); unmountComponentAtNode(container); // Ensure subscription is aborted - 4
Review Documentation
Review the documentation for the libraries in use (e.g., @trpc/react-query) to ensure that the subscription management aligns with best practices.
Validation
To confirm the fix worked, monitor the application for any lingering SSE subscriptions after component unmounting. Use browser developer tools to inspect network activity and ensure no active connections remain.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep