Reloading page causes stream error

[erlendp]

Describe the bug When reloading the React app, the following error is reported on the console:

Error on stream connection: {"isTrusted":true}, will continue retrying every 1000 milliseconds.

This is causing many errors to flood our logs (the error only appears once per reload of the browser page).

To reproduce

• yarn create react-app launchdarkly-test

• cd launchdarkly-test

• yarn add launchdarkly-react-client-sdk

• Wrap the App component in the withLDProvider HOC:

  export default withLDProvider({
  clientSideID: 'xxxxxxx',
  })(App);

• yarn start

• Reload page, and the error is reported on the console.

Expected behavior No error to be reported on reload.

Logs [LaunchDarkly] Error on stream connection: {"isTrusted":true}, will continue retrying every 1000 milliseconds.

SDK version 2.25.1

[bwoskow-ld]

Hi @erlendp,

That error message indicates that the LaunchDarkly SDK fails to establish a streaming connection to our servers. Although you're only seeing the error once on pageload, the SDK does retry establishing the connection every 1000 milliseconds as the message states. The reason you only see the error once is because we don't want to flood the app logs with errors in the case that a persistent connection error occurs. The SDK only prints that message on the first failed attempt per sequence of establish a connection.

I ran through your steps to reproduce the problem and couldn't. The launchdarkly-test app connects successfully for me without any errors. My guess is that you have a browser plugin, browser setting, or some network condition that is restricting your ability to connect to LaunchDarkly.

As this issue isn't specific to the implementation of the React SDK, I'm going to close this issue. If you need further assistance, feel free to reach out to our support team.

Cheers, @bwoskow-ld

[erlendp]

Thanks for looking into this issue. I'll investigate what could be going on with our network to cause this. It's worth pointing out that despite that error, the API continues to work seamlessly both before and after the page reload, so it can't be anything blocking the network connection. I've also tried in incognito with extensions disabled, and seeing the same behaviour. Will try testing from a non work laptop.

[erlendp]

So I was able to reproduce this on a Linux machine (previously testing on a Macbook), running on a different network, so fairly sure this will be generally reproducible.

What I did notice, is that the error only shows in the console if you have enabled Preserve log in console settings. Presumably this is because the error is occurring on the page that is being torn down, rather than the new page that is being loaded.

I have been able to reproduce this using both Chrome and Firefox.

If you feel this issue is more likely related to the core js library, I'm happy to report the issue there instead.

[bwoskow-ld]

It's worth pointing out that despite that error, the API continues to work seamlessly both before and after the page reload, so it can't be anything blocking the network connection

If you make a change to a flag in the LaunchDarkly web app, is the change propagated out to your React app? If so, then you're right that the network connection is (at least at some point) active. If not, it could be that your SDK is serving your provided application defaults rather than something from LaunchDarkly.

I do still think that the best next step would be to get in touch with our support team. They can always escalate back to our engineering team if they deem it appropriate.

[erlendp]

Yes, I can confirm that the streaming connection is working, and all changes to flags successfully propagate out to the application. We've deployed to production and the only issue we're experiencing is the error in the logs.

Happy to contact the support team if you feel that's be best next step, although I'm skeptical they'll be able to help with this kind of error.

Can you confirm that you tried reloading the page with 'Preserve log' enabled?

[bwoskow-ld]

Confirmed -- I'm able to reload the page with "Preserve log" checked and don't see anything logged to my web console. I'm running Chrome 99.0.4844.74.

[eli-darkly]

This may be browser-dependent behavior. When you reload a page, the browser closes any existing HTTP connections being used by that page, and it may or may not give JavaScript code a chance to notice that those connections have been broken. So it may be that the SDK is perceiving the loss of the stream connection, and has just enough time to log that failure. I'm not sure if it is possible for us to differentiate between this and other broken connection conditions.

[erlendp]

If I get a chance to test this on a Windows machine, I will - wondering if it may be OS specific behaviour. Regarding detection of broken connection, I would assume you could use the beforeunload window event to close the connection gracefully. My guess would be this would be a change required to the core JS library, so happy to post over there instead, if you think that makes sense?

[dylan-chong]

This happens to me on Mac OS Chrome and Safari, when using Adblock Plus from the app store or Adblock plus chrome extension. Disabling the extension and refreshing makes the warning go away