fix: 修复 heo 交互渲染与 Notion 请求队列异常#4051
Conversation
✅ Deploy Preview for notionnext-netlify ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
88lin
force-pushed
the
fix/heo-stability-cleanups
branch
from
08852b6 to
d0740f7
Compare
修复内容： - 修复 heo Header 渲染阶段直接访问 document 的 SSR / hydration 风险，并用 useMemo 持有 throttle 实例，清理监听时同步 cancel pending 调用。 - 修复 heo 文章卡片 className 模板字符串三元表达式写错位的问题，避免渲染脏 class。 - 将加密文章密码错误提示从 innerHTML 拼接改为 React 状态渲染，并为输入框 focus 增加空保护。 - 将搜索输入框输入法组合锁从模块级变量改为组件实例 ref，避免多个实例共享状态。 - 稳定 heo 侧边栏路由监听回调，并优化 Swipe 轮播定时器，避免索引变化时反复重建 interval。 - 修复 heo 搜索高亮与 404 延迟跳转 effect 的依赖和定时器清理。 - 收敛 Notion API inflight Promise 清理逻辑，避免 rejected Promise 触发未处理拒绝；同步修复 RateLimiter 中浮动 Promise 与 any 类型。 验证： - yarn next lint --file <本次改动文件> 通过，0 warning / 0 error。 - yarn type-check 通过。 - yarn test --runInBand 通过，12 个测试套件 / 84 个测试全部通过。
88lin
force-pushed
the
fix/heo-stability-cleanups
branch
from
d0740f7 to
fe1882e
Compare
PR #4051 代码审查报告
一、审查结论本 PR 的改动方向是合理的，主要修复 heo 主题中的渲染、交互与 Hook 依赖问题，并收敛 Notion API 请求队列中的 Promise 清理风险。审查后未发现需要阻塞合并的问题。 建议结论：
验证结果：
二、改动总览
三、重点审查意见3.1 Header SSR / Hydration 风险原实现会在 JSX 渲染阶段直接调用 PR 将 DOM 查询移动到
结论：该改动是本 PR 的核心修复之一，建议保留。 3.2 Notion API inflight Promise 清理
PR 改为： promise
.catch(() => {})
.finally(() => globalStore.inflight.delete(key))这里的空 结论：该改动有实际稳定性收益，建议保留。 3.3 PostLock 的
|
修复内容： - 修复 heo Header 渲染阶段直接访问 document 的 SSR / hydration 风险，将文章背景检测移动到客户端 effect 中处理。 - 使用 useMemo 持有 Header 的 throttle 滚动处理实例，并在卸载时 cancel pending 调用，避免残留回调。 - 修复 heo 文章卡片 className 三元表达式写错位的问题，避免渲染无效 class。 - 将加密文章密码错误提示从 innerHTML 拼接改为 React 状态渲染，并为输入框 focus 增加空保护。 - 将搜索输入框输入法组合锁从模块级变量改为组件实例 ref，避免多实例或 SSR 多请求间共享状态。 - 稳定 heo 侧边栏路由监听回调，避免 effect 捕获旧的开关回调。 - 优化 Swipe 轮播定时器，改用函数式 setState，避免每次索引变化都重建 interval。 - 修复搜索高亮、文章目录生成和 404 延迟跳转相关 effect 的依赖与清理逻辑。 - 收敛 Notion API inflight Promise 清理链，避免 rejected Promise 产生额外的未处理拒绝。 - 收窄 RateLimiter 中的 any 类型，并显式标记不需要 await 的异步队列调用。 影响范围： - heo 主题 Header、文章卡片、文章锁、搜索框、侧边栏、轮播和搜索页交互。 - Notion API 请求队列、请求去重和限流相关逻辑。 说明： - 本次提交主要是稳定性与 React 生命周期修复，不改变既有功能入口。 - 当前暂存区改动与 PR notionnext-org#4051 的修复目标一致，但本地 fork 基底与上游代码存在少量差异，因此以本地暂存区内容为准。
2 participants
已知问题
heo主题部分交互存在稳定性隐患Header在 JSX 渲染阶段直接访问document，服务端渲染阶段没有该全局对象，容易导致 SSR / hydration 风险。className三元表达式写在模板字符串外，实际会渲染出脏 class。innerHTML拼接，绕开 React 渲染流程；输入框 ref 未做空保护。Notion 请求队列与 inflight 清理存在异步处理隐患
RateLimiter中部分 async 调用未显式处理返回 Promise。getNotionAPI通过finally清理 inflight 时，rejected Promise 链可能产生未处理拒绝。解决方案
heo主题交互稳定性修复Header中对#post-bg的检测移动到客户端 effect，并缓存到 ref / state。useMemo持有 throttled scroll handler，并在卸载时调用cancel()清理 pending 调用。className模板字符串。PostLock错误提示改为 React state 渲染，并为 focus 增加空保护。useRef。PostHeader动态主题色改为 CSS 自定义属性，减少 styled-jsx 动态内容重建。Notion API 异步链路修复
Promise.resolve().then(execute)统一同步/异步错误传播。RateLimiter中的浮动 Promise 显式标记为void，并收敛any类型。改动收益
具体改动
lib/db/notion/RateLimiter.tspathimport。any收敛为unknown。void。lib/db/notion/getNotionAPI.jspages/[prefix]/index.jsthemes/heo/components/*与themes/heo/index.js测试确认
yarn install --frozen-lockfile成功yarn lint --file lib/db/notion/RateLimiter.ts --file lib/db/notion/getNotionAPI.js --file pages/[prefix]/index.js --file themes/heo/components/BlogPostCard.js --file themes/heo/components/Header.js --file themes/heo/components/PostHeader.js --file themes/heo/components/PostLock.js --file themes/heo/components/SearchInput.js --file themes/heo/components/SideBarDrawer.js --file themes/heo/components/Swipe.js --file themes/heo/index.js通过，0 warning / 0 erroryarn type-check通过yarn test --runInBand通过，12 个测试套件 / 84 个测试全部通过补充说明：
yarn lint全量检查当前会被 upstream main 既有 lint error 阻断，失败点包括pages/api/cache.js、lib/cache/vercel_cache.js、lib/site/**、lib/utils/**等未在本 PR 修改的文件；本 PR 改动文件的 targeted lint 已通过。