Vaadin 23.0.5会话超时后页面自动重载新建会话问题求助

问题基本信息 #

• 复现场景：VaadinSession发生超时时，页面自动重载并启动新的VaadinSession
• 使用框架版本：Vaadin 23.0.5
• 初步排查情况：Java服务端日志无该行为的相关触发记录，初步怀疑行为由浏览器端发起，疑似Service Worker触发
• 诉求：需要问题排查思路或对应解决方案

会话终止阶段Chrome控制台日志 #

Received push (websocket) message: for(;;);[{"syncId":4,"clientId":2,"meta":{"async":true,"sessionExpired":true},"timings":[5,0]}]
FlowClient.js?2d7e:1004 Handling message from server
FlowClient.js?2d7e:944 Handling dependencies
FlowClient.js?2d7e:193 handleUIDLMessage: 0 ms
vaadinPush.js?v=23.0.4:3323 Mon Jun 06 2022 13:41:09 GMT+1000 (Australian Eastern Standard Time) Atmosphere: beforeunload event
FlowClient.js?2d7e:193 Setting heartbeat interval to -1sec.
FlowClient.js?2d7e:835 Disabling heartbeat
FlowClient.js?2d7e:936 Closing push connection
vaadinPush.js?v=23.0.4:3323 Mon Jun 06 2022 13:41:09 GMT+1000 (Australian Eastern Standard Time) Atmosphere: Closing (AtmosphereRequest._close() called)
vaadinPush.js?v=23.0.4:3323 Mon Jun 06 2022 13:41:09 GMT+1000 (Australian Eastern Standard Time) Atmosphere: Firing onClose (unsubscribe case)
FlowClient.js?2d7e:1006 Push connection closed
vaadinPush.js?v=23.0.4:3323 Mon Jun 06 2022 13:41:09 GMT+1000 (Australian Eastern Standard Time) Atmosphere: Request already closed, not firing onClose (unsubscribe case)
vaadinPush.js?v=23.0.4:3323 Mon Jun 06 2022 13:41:09 GMT+1000 (Australian Eastern Standard Time) Atmosphere: invoking .close() on WebSocket object
FlowClient.js?2d7e:193  Processing time was 5ms
vaadinPush.js?v=23.0.4:3323 Mon Jun 06 2022 13:41:09 GMT+1000 (Australian Eastern Standard Time) Atmosphere: Request already closed, not firing onClose (unsubscribe case)
logger.js?aa4d:46 workbox No route found for: /?v-r=push&v-uiId=0&v-pushId=09139213-af19-48d7-8a55-278da41b839f&X-Atmosphere-Transport=close&X-Atmosphere-tracking-id=3c2a0c76-86d7-4952-a1c4-8078dd19bd0
vaadinPush.js?v=23.0.4:3323 Mon Jun 06 2022 13:41:09 GMT+1000 (Australian Eastern Standard Time) Atmosphere: websocket.onclose
vaadinPush.js?v=23.0.4:3323 Websocket closed, reason: Normal closure; the connection successfully completed whatever purpose for which it was created. - wasClean: true
log @ vaadinPush.js?v=23.0.4:3323
warn @ vaadinPush.js?v=23.0.4:3329
_websocket.onclose @ vaadinPush.js?v=23.0.4:1537
vaadinPush.js?v=23.0.4:3323 Mon Jun 06 2022 13:41:09 GMT+1000 (Australian Eastern Standard Time) Atmosphere: Request already closed, not firing onClose (closed case)
vaadinPush.js?v=23.0.4:3323 Mon Jun 06 2022 13:41:09 GMT+1000 (Australian Eastern Standard Time) Atmosphere: Request already closed, not firing onClose (closed case)
vaadinPush.js?v=23.0.4:3323 Websocket closed normally

页面重载阶段Chrome控制台日志 #

logger.js?aa4d:46 workbox The navigation route / is being used.
logger.js?aa4d:46 workbox Router is responding to: /
logger.js?aa4d:46 workbox Network request for '/' returned a response with status '200'.
logger.js?aa4d:46 workbox Using NetworkOnly to respond to '/'
​ Mon Jun 06 2022 13:41:11 GMT+1000 (Australian Eastern Standard Time) Atmosphere: unload event
logger.js?aa4d:46 workbox No route found for: 
https://api.breadbutter.io/apps/xxxxxxxxxxxxxxxx/prerelease/page_engagement
logger.js?aa4d:46 workbox Router is responding to: /VAADIN/build/vaadin-bundle-52a045587b10cc017547.cache.js
logger.js?aa4d:46 workbox Found a cached response in 'workbox-precache-v2-https://mylocalhost/'.
logger.js?aa4d:46 workbox Precaching did not find a match for /?v-r=init&location=
logger.js?aa4d:46 workbox No route found for: /?v-r=init&location=
logger.js?aa4d:46 

排查结论与方案 #

根因说明 #

该自动重载行为不是Service Worker触发，是Vaadin Flow客户端的默认内置逻辑：
日志首行的websocket推送消息已经携带sessionExpired: true标记，FlowClient.js收到服务端返回的会话过期标识后，会默认执行页面重载，初始化新的用户会话。整个触发逻辑完全在前端执行，因此Java服务端不会留存对应触发日志。日志中出现的workbox相关输出，只是页面重载过程中Service Worker拦截路由请求的正常记录，并非重载的触发源。

排查验证步骤 #

• 在浏览器控制台给window.location.reload方法加断点，会话过期触发重载时查看调用栈，可以直接定位到FlowClient.js内的会话过期处理逻辑，确认触发源。
• 核对服务端会话相关配置，检查server.servlet.session.timeout、vaadin.servlet.heartbeatInterval两个参数的取值，确认会话超时阈值符合业务预期，排除非预期的会话过期问题。

自定义处理方案 #

如果不需要默认的自动重载逻辑，要替换为自定义会话过期交互（比如弹窗提示、跳转登录页），可以通过监听Vaadin内置的会话过期事件阻止默认行为：

window.addEventListener('vaadin-session-expired', function(e) {
  // 阻止默认的自动重载动作
  e.preventDefault();
  // 写入自定义逻辑，例：弹窗提示后手动重载
  if(confirm('当前会话已过期，是否重新加载页面？')) {
    window.location.reload();
  }
});

如果不需要PWA能力、要排除Service Worker缓存的干扰，可以移除项目启动类上的@PWA注解，关闭Service Worker自动注册。

内容的提问来源于stack exchange，提问作者Robert Sutton