why my onmessage callback never fired

[johnzhu123]

  @GetMapping(value = "/connect", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
  public SseEmitter connect() {
    //    RequestInfo context = requestContextHolder.getRequestContext();
    //    this.validateContext(context);
    //    return ResponseEntity.ok(
    //        serverSendEventService.connect(context.getBusinessScope(), context.getUserEmail()));
    SseEmitter emitter = new SseEmitter();
    ExecutorService sseMvcExecutor = Executors.newSingleThreadExecutor();
    sseMvcExecutor.execute(
        () -> {
          try {
            for (int i = 0; true; i++) {
              SseEmitter.SseEventBuilder event =
                  SseEmitter.event()
                      .data("SSE MVC - " + LocalTime.now())
                      .id(String.valueOf(i))
                      .name("sse event - mvc");
              emitter.send(event);
              Thread.sleep(5000);
            }
          } catch (Exception ex) {
            emitter.completeWithError(ex);
          }
        });
    return emitter;
  }

I have a api which will send the data every five seconds
if I curl the api, it will send back data correctly, and after about 30s，the thread will stop

however when I tried in browser using our fetchEventSource

import { fetchEventSource } from '@microsoft/fetch-event-source'
 await fetchEventSource(sseUrl, {
        method: 'GET',
        headers: {
          Authorization: `Bearer ${token}`,
          Accept: 'text/event-stream',
          'Cache-Control': 'no-cache',
        },
        signal: abortController.signal,
        openWhenHidden: true,
        onopen: async (response) => {
          console.log('onopen callback triggered, response:', response)
          console.log('Response status:', response.status)
          console.log('Response headers:', response.headers)
          if (response.ok && response.status === 200) {
            console.log('SSE connection opened successfully')
          } else if (response.status >= 400 && response.status < 500) {
            console.error('SSE connection failed with client error:', response.status)
            throw new Error(`Client error: ${response.status}`)
          } else {
            console.error('SSE connection failed with server error:', response.status)
            throw new Error(`Server error: ${response.status}`)
          }
        },
        onmessage: (event) => {
          console.log('SSE message received:', event)
          try {
            if (event.data) {
              ...
            } else {
              console.log('SSE event without data:', event)
            }
          } catch (error) {
            console.error('Error parsing SSE message:', error)
            console.error('Raw event data:', event.data)
          }
        },
        onclose: () => {
         
        },
        onerror: (error) => {
       
        },
      })

it will just close the connection after about 30s，and between the time, there is no data send back.

and the onmessage callback is never fired !!

I can't use EventSource, cause I need to auth the token in the header and I already try to write the fetch by myself. also get the same result, the connection will just close and no intermediate data.
Thanks