XM Cloud - "Unable to connect to the remote server" when viewing a page in Experience Editor

Question

When viewing a Site's page in the Experience Editor, the Editor does not load and the following error message is displayed;

Unable to connect to the remote server

The CM server logs displays the following entry

ERROR [JSS] Error occurred during POST to remote rendering host: `http://localhost:5000`
ERROR Unable to connect to the remote server
Exception: System.Net.WebException
Message: Unable to connect to the remote server
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)

Nested Exception

Exception: System.Net.Sockets.SocketException
Message: No connection could be made because the target machine actively refused it 127.0.0.1:5000
Source: System
at System.Net.Sockets.Socket.DoConnect(EndPoint endPointSnapshot, SocketAddress socketAddress)
at System.Net.ServicePoint.ConnectSocketInternal(Boolean connectFailure, Socket s4, Socket s6, Socket& socket, IPAddress& address, ConnectSocketState state, IAsyncResult asyncResult, Exception& exception)

However the page loads correctly when browsing the page directly on the Next app

Answer 1

The error in my case was due to the field Predefined application rendering host on the Site's Site Grouping was empty.

Navigate to your Site Grouping - /sitecore/content/<Headless tenant name>/<site name>/Settings/Site Grouping/<site name>

In the Predefined application rendering host select your Rendering Host drop the DropLink.

It's also worth confirming the following fields on the Items listed;

• /sitecore/content/<Headless tenant name>/<site name>/Settings/Site Grouping/<site name>
  • Site name
  • Target hostname
  • Hostname
  • Start Item
  • Predefined application rendering host
• The item referenced by the Predefined application rendering host field
  • Server side rendering engine endpoint URL - this should be the url and port your Next app runs on suffixed by /api/editing/render
  • Server side rendering engine application URL - this should be the url and port your Next app runs on
  • Application name - this should match the Name and AppName in the package.json of your next app