jamesmosier
commented
3 years ago Hi! Could you please provide a complete reproduction of this issue including a repository? Thanks!
Closed poy4eg closed 3 years ago
jamesmosier
commented
3 years ago Hi! Could you please provide a complete reproduction of this issue including a repository? Thanks!
poy4eg
commented
3 years ago Hi! Could you please provide a complete reproduction of this issue including a repository? Thanks!
Edit topic and add repository and video with reproduction of this issue.
poy4eg
commented
3 years ago I find the problem. It's happend with Image component. As i understand optimizer cache live 60 sec, and after that it's try to reoptimize image and crash. How can i change cache live of optimized images?
millievn
commented
3 years ago Same error and any news here?
devNimi
commented
3 years ago it's hard to reproduce happening for me also in a production app @timneutkens
virskor
commented
3 years ago @dev try next/Image components, and sounds like this. i am using next/image and src="./svg.svg" after visite http://h/_next/image?url=%2Fimages%2Fempty.svg&w=640&q=75, my website crashed with logs.
/www/wwwroot/www.clodra.com/node_modules/next/dist/compiled/send/index.js:1
module.exports=(()=>{var __webpack_modules__={14:e=>{"use strict";e.exports=JSON.parse('{"application/andrew-inset":["ez"],"application/applixware":["aw"],"application/atom+xml":["atom"],"application/atomcat+xml":["atomcat"],"application/atomsvc+xml":["atomsvc"],"application/bdoc":["bdoc"],"application/ccxml+xml":["ccxml"],"application/cdmi-capability":["cdmia"],"application/cdmi-container":["cdmic"],"application/cdmi-domain":["cdmid"],"application/cdmi-object":["cdmio"],"application/cdmi-queue":["cdmiq"],"application/cu-seeme":["cu"],"application/dash+xml":["mpd"],"application/davmount+xml":["davmount"],"application/docbook+xml":["dbk"],"application/dssc+der":["dssc"],"application/dssc+xml":["xdssc"],"application/ecmascript":["ecma"],"application/emma+xml":["emma"],"application/epub+zip":["epub"],"application/exi":["exi"],"application/font-tdpfr":["pfr"],"application/font-woff":[],"application/font-woff2":[],"application/geo+json":
TypeError: e.removeHeader is not a function
at SendStream.removeContentHeaderFields (/www/wwwroot/www.clodra.com/node_modules/next/dist/compiled/send/index.js:1:52146)
at SendStream.notModified (/www/wwwroot/www.clodra.com/node_modules/next/dist/compiled/send/index.js:1:52259)
at SendStream.send (/www/wwwroot/www.clodra.com/node_modules/next/dist/compiled/send/index.js:1:54962)
at onstat (/www/wwwroot/www.clodra.com/node_modules/next/dist/compiled/send/index.js:1:55900)
at FSReqCallback.oncomplete (fs.js:167:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.I find the problem. It's happend with Image component. As i understand optimizer cache live 60 sec, and after that it's try to reoptimize image and crash. How can i change cache live of optimized images?
CanKattwinkel
commented
3 years ago @alula appreciate you looking into this!
I managed to fix it for me by wrapping the call with an additional if check using this patch-approach. In case anyone is hit in production out of the blue and needs an immediate hacky fix. ;-)
File is node_modules/next/dist/compiled/send/index.js
MrNorm
commented
3 years ago @CanKattwinkel Thank you! We'll take a look as we've started seeing this issue after an AMI update on our Kubernetes cluster.
xmonkee
commented
3 years ago @CanKattwinkel can you share your patch file?
IsaiahPapa
commented
3 years ago @CanKattwinkel I'm joining in on the request! That patch file would do wonders.
Sawan1994
commented
3 years ago @CanKattwinkel can you please share a detailed description on how to solve this issue and also share patch file?
tigerbank
commented
3 years ago @CanKattwinkel I'm joining in on this request too.
ImSketch
commented
3 years ago @alula appreciate you looking into this!
I managed to fix it for me by wrapping the call with an additional if check using this patch-approach. In case anyone is hit in production out of the blue and needs an immediate hacky fix. ;-)
File is
node_modules/next/dist/compiled/send/index.js
Can you please share your patched file and explain how to do it? Me and the other folks gonna appreciate it a lot
CanKattwinkel
commented
3 years ago Sorry I didnt share the file yet as it depends on the version of next installed.
node_modules and change the file node_modules/next/dist/compiled/send/index.js (I reformatted it), look for the call to removeHeader, and wrap it in an additional if statement as seen below: if (i.substr(0, 8) === "content-" && i !== "content-location") {
e.removeHeader(i)becomes:
if (i.substr(0, 8) === "content-" && i !== "content-location") {
if(e.removeHeader) {
e.removeHeader(i)
}
}yarn patch-package package-name or npx patch-package package-name and patch-package will auto generate the patch file in the folder ./patches../patches folder into the Docker container before you run npm install (the tool actually gives you a nice output).I did not share my patchfile yet as the filename is different per version of installed next. For me this was 10.2.3, thus the file name is ./patches/next+10.2.3.patch for me. You can also adjust the filename and skip the edit of your node_modules, but you need patch-package installed. shoutout to @ds300 for this cool package, thanks!
"+t+"\n"+"\n"+"\n"}function decode(e){try{return decodeURIComponent(e)}catch(e){return-1}}function getHeaderNames(e){return typeof e.getHeaderNames!=="function"?Object.keys(e._headers||{}):e.getHeaderNames()}function hasListeners(e,t){var a=typeof e.listenerCount!=="function"?e.listeners(t).length:e.listenerCount(t);return a>0}function headersSent(e){return typeof e.headersSent!=="boolean"?Boolean(e._header):e.headersSent}function normalizeList(e,t){var a=[].concat(e||[]);for(var i=0;i
" + t + "\n" + "\n" + "\n" + } + + function decode(e) { + try { + return decodeURIComponent(e) + } catch (e) { + return -1 + } + } + + function getHeaderNames(e) { + return typeof e.getHeaderNames !== "function" ? Object.keys(e._headers || {}) : e.getHeaderNames() + } + + function hasListeners(e, t) { + var a = typeof e.listenerCount !== "function" ? e.listeners(t).length : e.listenerCount(t); + return a > 0 + } + + function headersSent(e) { + return typeof e.headersSent !== "boolean" ? Boolean(e._header) : e.headersSent + } + + function normalizeList(e, t) { + var a = [].concat(e || []); + for (var i = 0; i < a.length; i++) { + if (typeof a[i] !== "string") { + throw new TypeError(t + " must be array of strings or false") + } + } + return a + } + + function parseHttpDate(e) { + var t = e && Date.parse(e); + return typeof t === "number" ? t : NaN + } + + function parseTokenList(e) { + var t = 0; + var a = []; + var i = 0; + for (var n = 0, r = e.length; n < r; n++) { + switch (e.charCodeAt(n)) { + case 32: + if (i === t) { + i = t = n + 1 + } + break; + case 44: + a.push(e.substring(i, t)); + i = t = n + 1; + break; + default: + t = n + 1; + break + } + } + a.push(e.substring(i, t)); + return a + } + + function setHeaders(e, t) { + var a = Object.keys(t); + for (var i = 0; i < a.length; i++) { + var n = a[i]; + e.setHeader(n, t[n]) + } + } + }, 599: (e, t, a) => { + "use strict"; + var i = a(329)("http-errors"); + var n = a(226); + var r = a(664); + var o = a(989); + var p = a(481); + e.exports = createError; + e.exports.HttpError = createHttpErrorConstructor(); + populateConstructorExports(e.exports, r.codes, e.exports.HttpError); + + function codeClass(e) { + return Number(String(e).charAt(0) + "00") + } + + function createError() { + var e; + var t; + var a = 500; + var n = {}; + for (var o = 0; o < arguments.length; o++) { + var p = arguments[o]; + if (p instanceof Error) { + e = p; + a = e.status || e.statusCode || a; + continue + } + switch (typeof p) { + case"string": + t = p; + break; + case"number": + a = p; + if (o !== 0) { + i("non-first-argument status code; replace with createError(" + p + ", ...)") + } + break; + case"object": + n = p; + break + } + } + if (typeof a === "number" && (a < 400 || a >= 600)) { + i("non-error status code; use only 4xx or 5xx status codes") + } + if (typeof a !== "number" || !r[a] && (a < 400 || a >= 600)) { + a = 500 + } + var s = createError[a] || createError[codeClass(a)]; + if (!e) { + e = s ? new s(t) : new Error(t || r[a]); + Error.captureStackTrace(e, createError) + } + if (!s || !(e instanceof s) || e.status !== a) { + e.expose = a < 500; + e.status = e.statusCode = a + } + for (var c in n) { + if (c !== "status" && c !== "statusCode") { + e[c] = n[c] + } + } + return e + } + + function createHttpErrorConstructor() { + function HttpError() { + throw new TypeError("cannot construct abstract class") + } + + o(HttpError, Error); + return HttpError + } + + function createClientErrorConstructor(e, t, a) { + var i = t.match(/Error$/) ? t : t + "Error"; + + function ClientError(e) { + var t = e != null ? e : r[a]; + var o = new Error(t); + Error.captureStackTrace(o, ClientError); + n(o, ClientError.prototype); + Object.defineProperty(o, "message", { + enumerable: true, + configurable: true, + value: t, + writable: true + }); + Object.defineProperty(o, "name", {enumerable: false, configurable: true, value: i, writable: true}); + return o + } + + o(ClientError, e); + nameFunc(ClientError, i); + ClientError.prototype.status = a; + ClientError.prototype.statusCode = a; + ClientError.prototype.expose = true; + return ClientError + } + + function createServerErrorConstructor(e, t, a) { + var i = t.match(/Error$/) ? t : t + "Error"; + + function ServerError(e) { + var t = e != null ? e : r[a]; + var o = new Error(t); + Error.captureStackTrace(o, ServerError); + n(o, ServerError.prototype); + Object.defineProperty(o, "message", { + enumerable: true, + configurable: true, + value: t, + writable: true + }); + Object.defineProperty(o, "name", {enumerable: false, configurable: true, value: i, writable: true}); + return o + } + + o(ServerError, e); + nameFunc(ServerError, i); + ServerError.prototype.status = a; + ServerError.prototype.statusCode = a; + ServerError.prototype.expose = false; + return ServerError + } + + function nameFunc(e, t) { + var a = Object.getOwnPropertyDescriptor(e, "name"); + if (a && a.configurable) { + a.value = t; + Object.defineProperty(e, "name", a) + } + } + + function populateConstructorExports(e, t, a) { + t.forEach(function forEachCode(t) { + var i; + var n = p(r[t]); + switch (codeClass(t)) { + case 400: + i = createClientErrorConstructor(a, n, t); + break; + case 500: + i = createServerErrorConstructor(a, n, t); + break + } + if (i) { + e[t] = i; + e[n] = i + } + }); + e["I'mateapot"] = i.function(e.ImATeapot, '"I\'mateapot"; use "ImATeapot" instead') + } + }, 536: e => { + var t = 1e3; + var a = t * 60; + var i = a * 60; + var n = i * 24; + var r = n * 7; + var o = n * 365.25; + e.exports = function (e, t) { + t = t || {}; + var a = typeof e; + if (a === "string" && e.length > 0) { + return parse(e) + } else if (a === "number" && isNaN(e) === false) { + return t.long ? fmtLong(e) : fmtShort(e) + } + throw new Error("val is not a non-empty string or a valid number. val=" + JSON.stringify(e)) + }; + + function parse(e) { + e = String(e); + if (e.length > 100) { + return + } + var p = /^((?:\d+)?\-?\d?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i.exec(e); + if (!p) { + return + } + var s = parseFloat(p[1]); + var c = (p[2] || "ms").toLowerCase(); + switch (c) { + case"years": + case"year": + case"yrs": + case"yr": + case"y": + return s * o; + case"weeks": + case"week": + case"w": + return s * r; + case"days": + case"day": + case"d": + return s * n; + case"hours": + case"hour": + case"hrs": + case"hr": + case"h": + return s * i; + case"minutes": + case"minute": + case"mins": + case"min": + case"m": + return s * a; + case"seconds": + case"second": + case"secs": + case"sec": + case"s": + return s * t; + case"milliseconds": + case"millisecond": + case"msecs": + case"msec": + case"ms": + return s; + default: + return undefined + } + } + + function fmtShort(e) { + var r = Math.abs(e); + if (r >= n) { + return Math.round(e / n) + "d" + } + if (r >= i) { + return Math.round(e / i) + "h" + } + if (r >= a) { + return Math.round(e / a) + "m" + } + if (r >= t) { + return Math.round(e / t) + "s" + } + return e + "ms" + } + + function fmtLong(e) { + var r = Math.abs(e); + if (r >= n) { + return plural(e, r, n, "day") + } + if (r >= i) { + return plural(e, r, i, "hour") + } + if (r >= a) { + return plural(e, r, a, "minute") + } + if (r >= t) { + return plural(e, r, t, "second") + } + return e + " ms" + } + + function plural(e, t, a, i) { + var n = t >= a * 1.5; + return Math.round(e / a) + " " + i + (n ? "s" : "") + } + }, 226: e => { + "use strict"; + e.exports = Object.setPrototypeOf || ({__proto__: []} instanceof Array ? setProtoOf : mixinProperties); + + function setProtoOf(e, t) { + e.__proto__ = t; + return e + } + + function mixinProperties(e, t) { + for (var a in t) { + if (!e.hasOwnProperty(a)) { + e[a] = t[a] + } + } + return e + } + }, 664: (e, t, a) => { + "use strict"; + var i = a(254); + e.exports = status; + status.STATUS_CODES = i; + status.codes = populateStatusesMap(status, i); + status.redirect = {300: true, 301: true, 302: true, 303: true, 305: true, 307: true, 308: true}; + status.empty = {204: true, 205: true, 304: true}; + status.retry = {502: true, 503: true, 504: true}; + + function populateStatusesMap(e, t) { + var a = []; + Object.keys(t).forEach(function forEachCode(i) { + var n = t[i]; + var r = Number(i); + e[r] = n; + e[n] = r; + e[n.toLowerCase()] = r; + a.push(r) + }); + return a + } + + function status(e) { + if (typeof e === "number") { + if (!status[e]) throw new Error("invalid status code: " + e); + return e + } + if (typeof e !== "string") { + throw new TypeError("code must be a number or string") + } + var t = parseInt(e, 10); + if (!isNaN(t)) { + if (!status[t]) throw new Error("invalid status code: " + t); + return t + } + t = status[e.toLowerCase()]; + if (!t) throw new Error('invalid status message: "' + e + '"'); + return t + } + }, 481: e => { + e.exports = toIdentifier; + + function toIdentifier(e) { + return e.split(" ").map(function (e) { + return e.slice(0, 1).toUpperCase() + e.slice(1) + }).join("").replace(/[^ _0-9a-z]/gi, "") + } + }, 417: e => { + "use strict"; + e.exports = require("crypto") + }, 614: e => { + "use strict"; + e.exports = require("events") + }, 747: e => { + "use strict"; + e.exports = require("fs") + }, 185: e => { + "use strict"; + e.exports = require("next/dist/compiled/debug") + }, 554: e => { + "use strict"; + e.exports = require("next/dist/compiled/fresh") + }, 622: e => { + "use strict"; + e.exports = require("path") + }, 413: e => { + "use strict"; + e.exports = require("stream") + }, 669: e => { + "use strict"; + e.exports = require("util") + } + }; + var __webpack_module_cache__ = {}; + + function __nccwpck_require__(e) { + if (__webpack_module_cache__[e]) { + return __webpack_module_cache__[e].exports + } + var t = __webpack_module_cache__[e] = {exports: {}}; + var a = true; + try { + __webpack_modules__[e](t, t.exports, __nccwpck_require__); + a = false + } finally { + if (a) delete __webpack_module_cache__[e] + } + return t.exports + } + + __nccwpck_require__.ab = __dirname + "/"; + return __nccwpck_require__(342) +})(); ```
CanKattwinkel
commented
3 years ago @jamesmosier this issue might deserves a re-open. But I can not give you an exact reproduction case. To me, this only happened in a live environment and not in matching test environments. In case of error, e is of type Writeable. My suspicion is that it is related with traffic and the images mentioned above as the issue was gone as we removed all our Next Image tags.
It was also noticeable that multiple containers crashed usually at the same time. The issue hit us quite hard as due to the lack of logging available for next (per request) we couldn't point it to a single request.
Sawan1994
commented
3 years ago Run following commands:
npm i patch-package
Goto node_modules/next/dist/compiled/send/index.js
Search for removeHeader in file and add below code:
if(typeof e?.removeHeader === "function"){ e?.removeHeader(i)}
Save the file and run npx patch-package next
add "postinstall": "patch-package" in scripts block in package.json
Commit your code and deploy it on prod.
Note: When the version of the nextjs changes, the patch-package will give you a warning so there is no harm in using this way to solve the issue for now.
thanks @CanKattwinkel for the help. We were struggling for last one month
Sawan1994
commented
3 years ago @timneutkens Please reopen the issue and add the patch in nextjs. Thanks to @CanKattwinkel we have found a temporary fix. It's causing production to go down which is a very big issue and cannot be ignored.
alula
commented
3 years ago I think I have tracked the issue down, it's related to one of nextjs dependencies:
when calling send() there's a chance that if certain conditions are met, the code will attempt to send a "not modified" response: https://github.com/pillarjs/send/blob/de073ed3237ade9ff71c61673a34474b30e5d45b/index.js#L637
...but the res property is not set before calling .pipe() and it's where the crash usually happens:
https://github.com/pillarjs/send/blob/de073ed3237ade9ff71c61673a34474b30e5d45b/index.js#L515 https://github.com/vercel/next.js/blob/canary/packages/next/server/serve-static.ts#L18
timneutkens
commented
3 years ago @Sawan1994 this issue was triaged correctly, no reproduction was provided and still hasn't after it was closed. Please create a new issue that provides a reproduction so that it can be investigated. The changes in the patch are incorrect as removeHeader should always be available on res. It's very likely there is something different wrong that might also be causing other issues as @alula said.
alula
commented
3 years ago I just opened an issue for that and if you dig into code I linked you can see that there's a case where object reference that should have a removeHeader method will be always undefined.
tigerbank
commented
3 years ago 2. If you use docker you must copy the
./patchesfolder into the Docker container before you run npm install
Thanks @CanKattwinkel. I did step1-4 as you mentioned. Looks like changes is not reflect in the production server.
I think it because of the last step (copy the ./patches folder into the Docker container before you run npm install)
Not sure if i'm doing it correctly?
WORKDIR /app COPY package.json ./patches yarn.lock ./ RUN yarn install --frozen-lockfile
valmassoi
commented
3 years ago Link to new issue to follow: https://github.com/vercel/next.js/issues/27724
danjebs
commented
3 years ago I may be able to help identify the issue, due to having two projects that use next/image very differently.
Both are on Next 10.0.1. Next has not had a version update on either in many months. I only started getting this error on one of them in the last 5 days...surprisingly, the one that gets much less traffic.
The difference (this is the kicker) is that they use next/image in very different ways. One uses the it exclusively for assets served from the PHP backend app; the other exclusively for static assets served from /public in Next. The app serving assets from /public is the one that's crashing.
Potential reasons for the failure (that I could think of) could be:
/public via Next are problematicImage for static assets in the header and footer (few images, each served often) while the working app uses dynamic images (many images, each served infrequently)However, as the issue is only happening on production, it could be volume related and therefore I can't provide a repro repo.
Hope that helps narrow it down.
uxname
commented
3 years ago I only noticed this problem when using https, through http or ip:port everything works fine
CanKattwinkel
commented
3 years ago
- If you use docker you must copy the
./patchesfolder into the Docker container before you run npm installThanks @CanKattwinkel. I did step1-4 as you mentioned. Looks like changes is not reflect in the production server. I think it because of the last step (copy the
./patchesfolder into the Docker The patch package requires an additional package to work with yarn, you will fin
- If you use docker you must copy the
./patchesfolder into the Docker container before you run npm installThanks @CanKattwinkel. I did step1-4 as you mentioned. Looks like changes is not reflect in the production server. I think it because of the last step (copy the
./patchesfolder into the Docker container before you run npm install)Not sure if i'm doing it correctly?
WORKDIR /app COPY package.json ./patches yarn.lock ./ RUN yarn install --frozen-lockfile
Did you follow the yarn specific install guide for patch package?
yarn add patch-package postinstall-postinstall
If you did, there is a output after npm install/yarn install command. That should help you debug this. I’m currently only on my phone but maybe your copy command copies the content of the folder into ./ instead of into ./patches/, would check that as well
maxproske
commented
3 years ago Having the same issue here on next 10.0.5.
edit: Fixed in production using following steps: https://github.com/vercel/next.js/issues/19309#issuecomment-891611316
Stack trace:
/app/node_modules/next/dist/compiled/send/index.js:1
module.exports=(()=>{var __webpack_modules__={14:e=>{"use strict";...
TypeError: e.removeHeader is not a function
at SendStream.removeContentHeaderFields (/app/node_modules/next/dist/compiled/send/index.js:1:52146)
at SendStream.notModified (/app/node_modules/next/dist/compiled/send/index.js:1:52259)
at SendStream.send (/app/node_modules/next/dist/compiled/send/index.js:1:54962)
at onstat (/app/node_modules/next/dist/compiled/send/index.js:1:55900)
at FSReqCallback.oncomplete (fs.js:193:5)
error Command failed with exit code 1.Did you follow the yarn specific install guide for patch package?
yarn add patch-package postinstall-postinstall
If you did, there is a output after npm install/yarn install command. That should help you debug this. I’m currently only on my phone but maybe your copy command copies the content of the folder into ./ instead of into ./patches/, would check that as well
Thanks for reply @CanKattwinkel. I'll have a look on that. But for now I just fixed this issue by changed the image thats served from /public to just normal html img tag as what @danjebs has mentioned on the earlier post. Thanks @danjebs also!
balazsorban44
commented
2 years ago This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
Bug report
Describe the bug
I'm run the project on live-server, doing all by this instruction. In first runnig by command
npm run startall correct, but if i restart the server i have next error:To Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
npm installnpm run buildnpm run startctrl+cnpm run startExpected behavior
First start is correct but if restart projext have a problem
System information
module.exports = { trailingSlash: true, distDir: 'build' }