Wp-calypso: Server error: Unexpected token { in JSON

[sirreal]

26655 addressed intermittent server-crashing errors that mentioned TypeError: Cannot read property 'style.css' of undefined.

After that landed, I've just observed a new error which outputs the following message.
The server continues to run but only appears to serve this plain text response:

SyntaxError: Unexpected token { in JSON at position 1019639
    at JSON.parse (<anonymous>)
    at parse (…/build/webpack:/server/pages/index.js:87:18)
    at getAssets (…/build/webpack:/server/pages/index.js:129:17)
    at generateStaticUrls (…/build/webpack:/server/pages/index.js:507:9)
    at Layer.handle_error (…/node_modules/express/lib/router/layer.js:71:5)
    at trim_prefix (…/node_modules/express/lib/router/index.js:315:13)
    at …/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (…/node_modules/express/lib/router/index.js:335:12)
    at next (…/node_modules/express/lib/router/index.js:275:10)
    at Layer.handle_error (…/node_modules/express/lib/router/layer.js:67:12)
    at trim_prefix (…/node_modules/express/lib/router/index.js:315:13)
    at …/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (…/node_modules/express/lib/router/index.js:335:12)
    at next (…/node_modules/express/lib/router/index.js:275:10)
    at next (…/node_modules/express/lib/router/route.js:127:14)
    at Layer.handle [as handle_request] (…/node_modules/express/lib/router/layer.js:97:5)

I'm not sure if there's a reliable way to reproduce this.

cc: @Automattic/team-calypso

[flootr]

A note this is possibly the code failing: https://github.com/Automattic/wp-calypso/blob/master/server/pages/index.js#L87

[flootr]

I think there's a problem with our AssetsWriter (which outputs server/bundler/assets.json). I couldn't nail it down precisely yet but here are a few explorations I made:

• assets.json is truncated after a new server start which happens here (createWriteStream replaces existing files).
• AssetWriter writes to assets.json after webpack (re)compiles which produces invalid JSON (you can see an enormous file growth after a few recompilations)

We consume assets.json during runtime in server/pages/index.js but only if the assets variable isn't defined. I think what happens is we consume assets.json (again or for the first time I don't know) after AssetWriter wrote to asset.json more than once which produces the error from above. Mentioned check for assets is the reason this error doesn't occur all the time but only under certain circumstances (which I don't precisely know).

You can artificially reproduce that error if you remove the check for existing assets variable and reload Calypso in the browser after webpack recompiled due to a simple file change in an arbitrary file.

I'm not sure if that description is actually equal to the problem @sirreal described above but I think they have the same reason.

Now I think the solution is to fix AssetWriter and don't have it just appending to assets.json but overwrite the file after every recompile if we need to update assets during dev runtime. However, I think this is questionable as we theoretically only consume it once.

[sirreal]

I've just come across the error again, and I see two adjacent JSON objects which aligns with your suspicions:

{
    "publicPath": "/calypso/",
    "manifests": {
…snip…
}{
    "publicPath": "/calypso/",
    "manifests": {
…snip…
}