React app CodeShip-Heroku deployment: initial build breaks with 503 error code

Question

I'm deploying my React frontend with CodeShip and Heroku. I can open the application, but CodeShip shows that the build has broken, the cause being this:

Trying (1 of 6) 'wget --no-check-certificate --output-document=/dev/null http://******.herokuapp.com'
--2020-03-11 21:59:01--  http://******.herokuapp.com/
Resolving ******.herokuapp.com (******.herokuapp.com)... 52.214.138.78, 54.77.242.148, 54.171.40.67, ...
Connecting to ******.herokuapp.com (******.herokuapp.com)|52.214.138.78|:80... connected.
HTTP request sent, awaiting response... 503 Service Unavailable
2020-03-11 21:59:35 ERROR 503: Service Unavailable.

But when I check my Heroku logs after I open the root url I get this, none of them is Error 503.

2020-03-11T22:12:59.322877+00:00 heroku[router]: at=info method=GET path="/" host=******.herokuapp.com request_id=57f74e93-a951-4179-ae00-3761976d2656 fwd="176.63.10.67" dyno=web.1 connect=0ms service=3ms status=304 bytes=173 protocol=https
2020-03-11T22:12:59.389496+00:00 heroku[router]: at=info method=GET path="/sockjs-node" host=******.herokuapp.com request_id=516c3825-2bc9-4dfd-a4b9-7a84d2b40bf4 fwd="176.63.10.67" dyno=web.1 connect=1ms service=32093ms status=101 bytes=129 protocol=https
2020-03-11T22:12:59.475750+00:00 heroku[router]: at=info method=GET path="/static/js/0.chunk.js" host=******.herokuapp.com request_id=ab42c365-d66e-4439-be0a-525f425ebec5 fwd="176.63.10.67" dyno=web.1 connect=0ms service=32ms status=304 bytes=176 protocol=https
2020-03-11T22:12:59.476304+00:00 heroku[router]: at=info method=GET path="/static/js/main.chunk.js" host=******.herokuapp.com request_id=a78e6524-3792-42d6-8fab-760aa27aea3b fwd="176.63.10.67" dyno=web.1 connect=1ms service=32ms status=304 bytes=174 protocol=https
2020-03-11T22:12:59.451102+00:00 heroku[router]: at=info method=GET path="/static/js/bundle.js" host=******.herokuapp.com request_id=9e4977bc-ab8e-4cd5-8500-b3ebc411feaa fwd="176.63.10.67" dyno=web.1 connect=0ms service=5ms status=304 bytes=174 protocol=https
2020-03-11T22:12:59.793691+00:00 heroku[router]: at=info method=GET path="/manifest.json" host=******.herokuapp.com request_id=3b248e90-9da2-472a-9653-f0d25f840d76 fwd="176.63.10.67" dyno=web.1 connect=1ms service=6ms status=304 bytes=237 protocol=https
2020-03-11T22:12:59.809653+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=******.herokuapp.com request_id=7dab8f56-c457-42a1-a190-37f8a0a687fd fwd="176.63.10.67" dyno=web.1 connect=1ms service=21ms status=200 bytes=9780 protocol=https

The '/' root path returns this in my React code:

//App.js
<PublicRoute exact path='/' component={Home} layout={LandingLayout} />

//PublicRoute.js
const PublicRoute = ({ component: Component, layout: Layout, ...rest }) => (
    <Route {...rest} render={props => (
        <Layout>
            <Component {...props} />
        </Layout>
    )}
    />
);

//Home.js
import React, { Component } from 'react';

export default class Home extends Component {
  static displayName = Home.name;

  render () {
    return (
      <div>
      </div>
    );
  }
}

How should I resolve this issue?

MattSom · Accepted Answer · 2020-03-14T15:44:37.133

The prosaic answer is a bit saddening: I'm using the free version of heroku which might cause the application startup to have less resources and become simply slower.

Also it seems that all heroku application build process has 30 seconds timeout limit which sends back an H12 Request timout error if reached.

If I manually keep calling the application right after the -----> Build succeeded! message is logged to CodeShip from Heroku, I get a faster response for some random reason and the build does not break in this case.

As you can see on the image this is what I've done the previous build. For testing purposes I've restarted the build again and did not open the application manually. Reached 30 seconds timeout and the build had broken.

Trying again, keep refreshing the heroku app url it sends back the 200 OK code again indeed.

Trying (1 of 6) 'wget --no-check-certificate --output-document=/dev/null http://******.herokuapp.com'
--2020-03-14 14:59:15--  http://******.herokuapp.com/
Resolving ******.herokuapp.com (******.herokuapp.com)... 34.255.174.179, 52.18.75.143, 52.208.237.242, ...
Connecting to ******.herokuapp.com (******.herokuapp.com)|34.255.174.179|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 1700 (1.7K) [text/html]
Saving to: /dev/null

Reading heroku docs it is clear there's no exact answer how to handle this issue. Long loops or heavy calculation demands from the app can easily cause a 30 seconds timeout.

Anyway, my application is rather lightweighted with no serious logic, only the lot of dependency by React itself. It is not much of an automated delivery this way, so I'm going to reach out for Heroku and try to find out whether it is truly a problem of the free version or not.

EDIT:

Turns out Heroku does not provide any support for free users, they redirect you to stackoverflow.com instead:

The circle is complete I guess.

React app CodeShip-Heroku deployment: initial build breaks with 503 error code

1 Answers1