fix: dev server 504 with chunk loding #1611
Conversation
Walkthrough此次更改主要集中在 Changes
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- packages/bundler-mako/index.js (2 hunks)
- packages/bundler-mako/package.json (0 hunks)
Files not reviewed due to no reviewable changes (1)
- packages/bundler-mako/package.json
| let proxy = createProxyMiddleware({ | ||
| target: `http://127.0.0.1:${hmrPort}`, | ||
| selfHandleResponse: true, | ||
| onProxyRes: (proxyRes, req, res) => { | ||
| if (proxyRes.statusCode !== 200) { | ||
| next(); | ||
| } else { | ||
| proxyRes.pipe(res); | ||
| } | ||
| }, | ||
| onError: (err, req, res) => { | ||
| next(); | ||
| }, | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议将 createProxyMiddleware 的实例移到中间件函数之外以提高性能
当前在每次请求时都会重新创建 proxy 实例，可能会影响性能。建议将 createProxyMiddleware 的实例化移到中间件函数外部，这样只需要创建一次代理，提高效率。
| onError: (err, req, res) => { | ||
| next(); | ||
| }, |
There was a problem hiding this comment.
错误处理时应传递错误对象给 next
在 onError 回调中，应该使用 next(err); 将错误对象传递给 Express 的错误处理中间件，而不是直接调用 next();。这有助于更好地捕获和处理错误信息。
| onProxyRes: (proxyRes, req, res) => { | ||
| if (proxyRes.statusCode !== 200) { | ||
| next(); | ||
| } else { | ||
| proxyRes.pipe(res); | ||
| } | ||
| }, |
There was a problem hiding this comment.
需要在 onProxyRes 中设置响应的状态码和头信息
当使用 selfHandleResponse: true 时，需要手动将 proxyRes 的状态码和头信息复制到 res。当前只使用了 proxyRes.pipe(res);，但未设置状态码和头信息，可能导致客户端无法正确解析响应。建议在管道之前，添加以下代码：
+ res.writeHead(proxyRes.statusCode, proxyRes.headers);
proxyRes.pipe(res);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onProxyRes: (proxyRes, req, res) => { | |
| if (proxyRes.statusCode !== 200) { | |
| next(); | |
| } else { | |
| proxyRes.pipe(res); | |
| } | |
| }, | |
| onProxyRes: (proxyRes, req, res) => { | |
| if (proxyRes.statusCode !== 200) { | |
| next(); | |
| } else { | |
| res.writeHead(proxyRes.statusCode, proxyRes.headers); | |
| proxyRes.pipe(res); | |
| } | |
| }, |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1611 +/- ##
=======================================
Coverage 61.93% 61.93%
=======================================
Files 128 128
Lines 15405 15405
=======================================
Hits 9541 9541
Misses 5864 5864 ☔ View full report in Codecov by Sentry. |
problem
when ensure 5 or more chunks in browser, all the requests are proxied to mako dev server hyper; but hyper will reset connect at tcp level for some connection, at last results in some chunk's request gets 504 in browser.
wordaround
serve chunk files at node side
Summary by CodeRabbit
新功能
express-http-proxy，增强了对响应处理的控制。依赖更新
express-http-proxy的依赖。