Home App Docs Blog Github

503 Lambda function error when viewing a section model in the visual editor

Hello, I have been running into an error frequently when attempting to access a section model in the visual editor. It is for a header, which I can see successfully rendered on the visual editor for my other pages. The content of the header won’t load when I access it using the editing url, it just renders a popup “We are having trouble connecting to your site. Your site might be responding slower than usual, or you might need to check on your integration” with some troubleshooting steps.

I have gone through the troubleshooting steps, but I still receive this error. Sometimes I will get an option to load the fallback editor, which does render the expected model, but this only happens occasionally.

If I don’t get the option to render the fallback editor, this is the actual error that I see on the iframe:

It is a Lambda 503 error, which I believe is associated with the editing url defined in the model. I assumed I could use any endpoint for this url, and I’m running it through localhost.

This is the implementation in my codebase for this component:

import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import { builder, BuilderComponent } from '@builder.io/react';


export function Header() {
return <>
      <Link to="/">Home</Link>
      <Link to="display-page">Display Page</Link>


Should I be using this header as a page model in builder vs a section model? What is the protocol for creating and then accessing the editing url in the builder visual editor when I’m working on a section model?

Thank you so much for your help!

The editing url defined in my model is localhost:3000/header/builder-editing

Hey @rdonahue, while we’ve been chatting outside of the forum, I wanted to post the response that the 503 Lambda error was due to proxy previews being enabled, which won’t be able to access your localhost.