How to fix 'Status and headers already sent' when refreshing react-app/webflux?

Question

I was following steps given in webflux-websocket-okta-blog, with R2DBC and spring-data.

After I had finished all the steps and tested the expected outcome in between, I expected to have the react webpage where the inserted records via a create script into the DB would be directly presented on screen.

This would be made possible via the reactive websocket that sends messages out when an insert is done. This should lead to the message arriving at the listener side in the react-app. The messages contain a header with an access-token.

But instead of messages arriving I get the:

'IllegalStateException: Status and headers already sent'

in the console when I open localhost:3000 (react-app page). The app still functions and I can refresh, but this just triggers the getAll and not via the expected (without F5) direct websocket/message way.

I read that this problem has come across earlier after the Spring-boot upgrade to 2.1.5, but had been resolved in later versions. I downgraded to 2.2.1 but still had the same problem. My project is: github-reactive-spring-tour

I get following in my stacktrace:

java.lang.IllegalStateException: Status and headers already sent at reactor.netty.http.server.HttpServerOperations.addHeader(HttpServerOperations.java:192) ~[reactor-netty-0.9.4.RELEASE.jar:0.9.4.RELEASE] at org.springframework.http.server.reactive.ReactorServerHttpResponse.applyCookies(ReactorServerHttpResponse.java:97) ~[spring-web-5.2.3.RELEASE.jar:5.2.3.RELEASE] at org.springframework.http.server.reactive.AbstractServerHttpResponse.lambda$doCommit$11(AbstractServerHttpResponse.java:238) ~[spring-web-5.2.3.RELEASE.jar:5.2.3.RELEASE] at reactor.core.publisher.MonoRunnable.subscribe(MonoRunnable.java:49) ~[reactor-core-3.3.2.RELEASE.jar:3.3.2.RELEASE] at reactor.core.publisher.Mono.subscribe(Mono.java:4105) ~[reactor-core-3.3.2.RELEASE.jar:3.3.2.RELEASE] at reactor.core.publisher.FluxConcatArray$ConcatArraySubscriber.onComplete(FluxConcatArray.java:207) ~[reactor-core-3.3.2.RELEASE.jar:3.3.2.RELEASE] at reactor.core.publisher.FluxConcatArray.subscribe(FluxConcatArray.java:80) ~[reactor-core-3.3.2.RELEASE.jar:3.3.2.RELEASE] at reactor.core.publisher.MonoFromFluxOperator.subscribe(MonoFromFluxOperator.java:72) ~[reactor-core-3.3.2.RELEASE.jar:3.3.2.RELEASE] at reactor.core.publisher.MonoDefer.subscribe(MonoDefer.java:52) ~[reactor-core-3.3.2.RELEASE.jar:3.3.2.RELEASE] at reactor.core.publisher.MonoIgnoreThen$ThenIgnoreMain.drain(MonoIgnoreThen.java:153) ~[reactor-core-3.3.2.RELEASE.jar:3.3.2.RELEASE] at reactor.core.publisher.MonoIgnoreThen$ThenIgnoreMain.ignoreDone(MonoIgnoreThen.java:190) ~[reactor-core-3.3.2.RELEASE.jar:3.3.2.RELEASE] at reactor.core.publisher.MonoIgnoreThen$ThenIgnoreInner.onComplete(MonoIgnoreThen.java:240) ~[reactor-core-3.3.2.RELEASE.jar:3.3.2.RELEASE] at reactor.core.publisher.Operators$MultiSubscriptionSubscriber.onComplete(Operators.java:1871) ~[reactor-core-3.3.2.RELEASE.jar:3.3.2.RELEASE]

async componentDidMount() {
  this.setState({
    isLoading: true
  });
  const headers = {
    headers: {
      Authorization: 'Bearer ' + await this.props.auth.getAccessToken()
    }
  };

  const response = await fetch('http://localhost:8088/renners', headers);
  const data = await response.json();
  this.setState({
    renners: data,
    isLoading: false
  });

  const socket = new WebSocket('ws://localhost:8088/ws/renners');
  socket.addEventListener('message', async(event: any) => {
    const renner = JSON.parse(event.data);
    this.state.renners.push(renner);
    this.setState({
      renners: this.state.renners
    });
  });
}

Answer 1

I've had the same issue. I've just bumpbed spring-boot version to 2.4.0 and it started working.