My next.js app on heroku returns Status Code: 503 Service Unavailable on certain routes:

[antonioOrtiz]

Hi there all! I just deployed my Next.js app to heroku (using mongodb atlas as its database). However on certain routes I get Status Code: 503 Service Unavailable The login route seems to work i.e. to check the database if the user exists. But that's it.

This is my server/index file:

var express = require('express');

require('dotenv').config();

var nextJS = require('next');
var cookieParser = require('cookie-parser');
var session = require('express-session');
var MongoStore = require('connect-mongo')(session);
var bodyParser = require('body-parser');
var auth = require('./lib/auth');
var cors = require('cors');
var morgan = require('morgan');
var HttpStatus = require('http-status-codes');
var compression = require('compression');
var helmet = require('helmet');

const MongoClient = require('mongodb').MongoClient;
var PORT = process.env.PORT || 8016;

const { isBlockedPage, isInternalUrl } = require('next-server/dist/server/utils');

function NODE_ENVSetter(ENV) {
  var environment,
    environments = {
      production: () => {
        environment = process.env.PRODUCTION_DB_DSN;
        console.log(`We are currently in the production environment: ${environment}`);
        return environment;
      },
      test: () => {
        environment = process.env.TEST_DB_DSN;
        console.log(`We are currently in the test environment: ${environment}`);
        return environment;
      },
      default: () => {
        environment = process.env.DEVELOPMENT_DB_DSN;
        console.log(`We are currently in the development environment: ${environment}`);
        return environment;
      }
    };
  (environments[ENV] || environments['default'])();

  return environment;
}

var mongoose = require('mongoose');
var env = process.env.NODE_ENV || 'development';

function errorHandler(err, req, res, next) {
  // Set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // Log error
  console.error(err.stack);

  // Render the error page
  res.status(err.status || 500);

  // Default error message by HTTP code
  res.render('error', {
    title: HttpStatus.getStatusText(err.status),
    message: HttpStatus.getStatusText(err.status)
  });
}

async function start() {
  const env = process.env.NODE_ENV == 'production';
  const app = nextJS({ env });
  const server = express();
  await app
    .prepare()
    .then(() => {
      const client = new MongoClient(process.env.MONGODB_URI, { useNewUrlParser: true });
      client.connect(err => {
        const collection = client.db('production').collection('devices');
        client.close();
      });
    })
    .catch(err => {
      console.error(err);
    });

  server.set('view engine', 'html');

  server.use('/uploads', express.static(__dirname + '/uploads'));

  server.use(
    bodyParser.urlencoded({
      limit: '50mb',
      extended: false
    })
  );
  server.use(morgan('dev'));

  server.use(cookieParser());

  server.use(
    session({
      secret: 'very secret 12345',
      resave: false,
      saveUninitialized: false,
      store: new MongoStore({
        mongooseConnection: mongoose.connection
      })
    })
  );
  server.use(compression());
  server.use(helmet());
  server.use(auth.initialize);

  //Compress all routes
  server.use(auth.session);
  server.use(cors());
  server.use('/users', require('./users'));
  server.use('/images', require('./images'));

  // Redirect all requests to main entrypoint pages/index.js
  server.get('/*', async (req, res, next) => {
    try {
      const pathName = req.originalUrl;
      if (isInternalUrl(req.url)) {
        return app.handleRequest(req, res, req.originalUrl);
      }

      if (isBlockedPage(pathName)) {
        return app.render404(req, res, req.originalUrl);
      }
      req.locals = {};
      req.locals.context = {};
      const html = await app.renderToHTML(req, res, '/', {});

      // Handle client redirects
      const context = req.locals.context;
      if (context.url) {
        return res.redirect(context.url);
      }

      // Handle client response statuses
      if (context.status) {
        return res.status(context.status).send();
      }

      // Request was ended by the user
      if (html === null) {
        return;
      }

      app.sendHTML(req, res, html);
    } catch (e) {
      next(e);
    }
  });
  // catch 404 and forward to error handler
  server.use(function(req, res, next) {
    next(createError(404));
  });

  // error handler
  server.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.errorStatus = err.status;
    res.locals.errorMessage = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
    console.log('err.status ', err.status);
    res.status(401).send(err.message);
  });

  if (process.env.NODE_ENV === 'production') {
    server.use(express.static('build/static'));
    // server.use('/static', express.static(path.join(__dirname, 'static')));
    // const path = require('path');
    // server.get('*', (req, res) => {
    //   res.sendFile(path.join(__dirname, 'build/static'));
    // });
    server.get('/*', (req, res) => {
      const parsedUrl = url.parse(req.url, true);
      nextHandler(req, res, parsedUrl);
    });

    server.listen(PORT, err => {
      if (err) throw err;
      console.log(
        `> Ready and listening on PORT:${PORT} in the ${process.env.NODE_ENV} environment`
      );
    });
  } else {
    server.listen(PORT, err => {
      if (err) throw err;
      console.log(`> Ready and listening on http://localhost:${PORT}`);
    });
  }
}

start();

Any help would be appreciated!

[tejas-hosamani]

Hi did you figure out this? I am facing the same issue since yesterday

[antonioOrtiz]

Are you using MongoDB Atlas?

[antonioOrtiz]

That is how I fixed it. Or I should say I wasn't including my IP address:

In your MongoDB cloud account:

You have to go to Network Access > IP Whitelist

There is a default option which will set it as 0.0.0.0/0

But what worked for me is when I looked up mine via one of those online tools; just google Find my IP address.

[tejas-hosamani]

In my case, I was doign this:

const envVars = require("dotenv").config();

if (envVars.error) {
  throw envVars.error;
}

It was breaking the server. Stupid mistake. 😅

---

For those who might encounter these kinds of issues in the future with Heroku, just check the log once!

Since it was on Heroku in my case too, this error wasn't clearly available - at least I don't know where to find it.
Their CLI tool is pretty handly in such cases. To view these "live" logs from the running server, use the following command:

heroku logs -a <project-name>

If you don't have heroku CLI, Install it, Verify installation, Login, use CLI. Run heroku help at any point.

To get a list of your existing projects, use:

heroku apps