Visions In Code

Friends, Sitecorians, countrymen, lend me your ears!

The other day when using the Experience Editor, we suddenly got the following error: The operation has timed out.

Now to the strange thing. The error only occurs on a specific page, which means it works for all the other pages 🤔 And even more bizarre, the “faulty page” works great in “preview mode” in the Experience Editor 😲

And to confuse us even more… We sometimes get the error:

Connection to your rendering host failed with a Not Found error. Ensure the POST endpoint at URL http://xxxxxxxxxxx/api/editing/render has been enabled.

Yet another hiccup for the Sitecore dinosaurs!

The apparent reason would be to check the logs in the NextJS app, but there was NOTHING at all. Hmm… so what to do?

The only thing left to do was to check the logs in the CM, and there it was 🙂

ERROR [JSS] Error occurred during POST to remote rendering host: `http://xxxxxxxxxxx/api/editing/render`
ERROR The remote server returned an error: (413) Body exceeded 2mb limit.
Exception: System.Net.WebException
Message: The remote server returned an error: (413) Body exceeded 2mb limit.
Source: System
   at System.Net.WebClient.UploadDataInternal(Uri address, String method, Byte[] data, WebRequest& request)
   at System.Net.WebClient.UploadString(Uri address, String method, String data)
   at Sitecore.JavaScriptServices.ViewEngine.Http.RenderEngine.Invoke[T](String moduleName, String functionName, Object[] functionArgs)

Great, we have identified the issue! There is some kind of limit somewhere in NextJS. Well, as a Sitecore dinosaur, I did a good old search in the NextJS app(code) and stumbled on the following:

// Bump body size limit (1mb by default) for Experience Editor payload
// See https://nextjs.org/docs/api-routes/api-middlewares#custom-config
export const config = {
  api: {
    bodyParser: {
      sizeLimit: '2mb',
    },
  },
};

This seems to be the culprit! Let’s have a quick read about it at https://nextjs.org/docs/api-routes/api-middlewares#custom-config

bodyParser.sizeLimit is the maximum size allowed for the parsed body, in any format supported by bytes

Could it be that easy? It sure was! Increasing the sizeLimit saved the day 🙂

I hope this will help other fellow Sitecore dinosaurs on their NextJS journey

That’s all for now folks 😊