at=error code=H10 desc="App crashed" method=GET path="/"

Question

I have been trying to make MEAN application with Heroku but I got this err. I don't know what is problem... I need some help. I looked for many solutions. But I had the same errors. And I also attach my git. https://github.com/handsomehyunsu/resume/tree/heroku Thank you.

2020-11-08T08:59:22.685557+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=hyunsukimresume.herokuapp.com request_id=51fc6ab7-2c9d-431c-b8a2-2a7a82ce79c3 fwd="14.50.155.250" dyno= connect= service= status=503 bytes= protocol=https
2020-11-08T08:59:23.143224+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hyunsukimresume.herokuapp.com request_id=b9cb9676-fd30-4987-9a48-3bf71fa095a3 fwd="14.50.155.250" dyno= connect= service= status=503 bytes= protocol=https

Procfile

web: node server.js

package.json

{
  "name": "my-resume",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev": "nodemon server.js",
    "postinstall": "ng build --output-path dist"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.1.6",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "~10.1.5",
    "@angular/compiler": "~10.1.5",
    "@angular/core": "~10.1.5",
    "@angular/forms": "~10.1.5",
    "@angular/material": "^10.2.7",
    "@angular/platform-browser": "~10.1.5",
    "@angular/platform-browser-dynamic": "~10.1.5",
    "@angular/router": "~10.1.5",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.5.3",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.10.11",
    "mongoose-unique-validator": "^2.0.3",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.6",
    "@angular/cli": "~10.1.6",
    "@angular/compiler-cli": "~10.1.5",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "nodemon": "^2.0.6",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  },
  "engines": {
    "node": "~10.16.3",
    "npm": "~6.14.8"
  }
}

server.js

const { debug } = require('console');
const http = require('http');
const app = require('./backend/app');

const normalizePort = val => {
    var port = parseInt(val, 10);

    if(isNaN(port)){
        //named pipe
        return val;
    }

    if(port >= 0){
        //port number
        return port;
    }
    
    return false;
};

const onError = error => {
    if(error.svscall !== "listen"){
        throw error;
    }
    const bind = typeof addr === "string" ? "pipe " + addr : "port " + port;
    switch(error.code){
        case "EACCES":
            console.log(bind + " requires elevated privileges");
            process.exit(1);
            break;
        case "EADDRINUSE":
            console.log(bind + " is already in use");
            process.exit(1);
            break;
        default:
            throw error;
    }
};

const onListening = () => {
    const addr = server.address();
    const bind = typeof addr === "string" ? "pipe " + addr : "port " + port;
    debug("Listening on " + bind);
};

const port = normalizePort(process.env.PORT || "3000");
app.set("port", port);

const server = http.createServer(app);
server.on("error", onError);
server.on("listening", onListening);
server.listen(port);

backend/app.js

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require("mongoose");

const postsRoutes = require('./routes/posts');
const userRoutes = require('./routes/user');

const app = express();

//mongodb connect
mongoose.connect("mongodb+srv://test_username:" + process.env.MONGO_ATLAS_PW + "@cluster0.utmlm.mongodb.net/myResume?retryWrites=true&w=majority")
    .then(() => {
        console.log('connected to database!!');
    })
    .catch(() => {
        console.log('connection failed');
    })

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

//CORS 
app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader(
      "Access-Control-Allow-Headers",
      "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    );
    res.setHeader(
      "Access-Control-Allow-Methods",
      "GET, POST, PATCH, PUT, DELETE, OPTIONS"
    );
    next();
  });


app.use("/posts", postsRoutes);
app.use("/user", userRoutes);


module.exports = app;

Answer 1

Heroku H10-App crashed can be because of many things so i will try my best to list them and you can try check them.

1. If your server is in server.js and your Procfile points to app.js this would definitely crash your app

2. Setting a PORT as a Heroku environment variable will crash your app. Heroku automatically sets a Port that can be accessed via process.env.PORT. Setting a port yourself would crash your app.

Try to edit your server.js file start your server with just const server = http.createServer(process.env.PORT || 3000); skip normalizePort

if that does not fix it then it may be you are missing required environment variable.

3. Last but not least if none of the above helped try setting a node version in the engine section of your package.json file. like this

ex:

{
 "name": "myapp",
 "description": "a really cool app",
 "version": "1.0.0",
 "engines": {
   "node": "12.11.1",
   "npm":  "6.14.8"
   }
}