Internal server error when deployed to Heroku

Question

I am receiving an internal server error now that my app is deployed to heroku. All was working fine locally. I have been at this for days now so I decided to reach out to the community!!!!

I have tried changing the paths in both express and react but still nothing is working.

Here is my express and route files

const express = require("express");
const mongo_uri = require("./config/db");

const path = require("path");
const bodyParser = require("body-parser");
const MongoClient = require("mongodb").MongoClient;
const helmet = require("helmet");
const cors = require("cors");
const backingRouter = require("./routes/backingRouter");
const chordsRouter = require("./routes/chordsRouter");
const arpeggiosRouter = require("./routes/arpeggiosRouter");

const app = express();

app.use(helmet());
app.use(cors());

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

// Handle CORS
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "*");
  if (req.method === "OPTIONS") {
    res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
    return res.status(200).json({});
  }
  next();
});

app.use("/api/backing-tracks", backingRouter);
app.use("/api/chords", chordsRouter);
app.use("/api/arpeggios", arpeggiosRouter);

// Production mode
if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));
  app.get("*", (req, res) => {
    res.sendFile(path.resolve((__dirname, "client", "build", "index.html")));
  });
}

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server Started`));

MongoClient.connect(mongo_uri, { useNewUrlParser: true }).then(client => {
  const db = client.db("backingTrackData");
  const collection = db.collection("backings");
  app.locals.collection = collection;
  console.log("MongoDb running...");
});

const express = require("express");
const router = express.Router();

router.get("/", (req, res, next) => {
  const { collection } = req.app.locals;
  collection

    .find({ tonality: { $in: ["major", "minor"] } })
    .toArray()
    .then(response => res.status(200).json(response))
    .catch(error => res.status(500).json(error));
});

module.exports = router;

here is a react file

import React, { Component } from "react";
import axios from "axios";

import SelectTonality from "./SelectTonality";
import SelectTempo from "./SelectTempo";
import Dropdown from "./Dropdown";

import ReactAudioPlayer from "react-audio-player";

class backingTracks extends Component {
  state = {
    backingTracksMaj: [],
    backingTracksMin: [],
    toggleMenu: false,
    selectedBtn: "major",
    selectedTempo: "90",
    selectedTrack: "",
    selectedTrackName: ""
  };

  componentDidMount() {
    axios
      .get("/api/backing-tracks")
      .then(res => {
        const backingTracksMaj = res.data
          .filter(track => track.tonality === "major")
          .map(newTrack => {
            return newTrack;
          });
        const backingTracksMin = res.data
          .filter(track => track.tonality === "minor")
          .map(newTrack => {
            return newTrack;
          });

        this.setState({ backingTracksMaj, backingTracksMin });
      })
      .catch(error => console.log(error));
  }

The homepage loads up fine but when I navigate to backingtracks page or any other page I get: GET https://jazz-guitar-woodshed.herokuapp.com/api/backing-tracks 500 (Internal Server Error)

Thanks in advance for any help!!!

EDIT: Heroku Error

2019-05-22T23:34:23.840908+00:00 app[web.1]: TypeError: Cannot read property 'find' of undefined 
2019-05-22T23:34:23.840921+00:00 app[web.1]: at router.get (/app/routes/backingRouter.js:8:6) 
2019-05-22T23:34:23.840924+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5) 
2019-05-22T23:34:23.840926+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/route.js:137:13) 
2019-05-22T23:34:23.840927+00:00 app[web.1]: at Route.dispatch (/app/node_modules/express/lib/router/route.js:112:3)
2019-05-22T23:34:23.840929+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5) 
2019-05-22T23:34:23.840931+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:281:22 
2019-05-22T23:34:23.840933+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12) 
2019-05-22T23:34:23.840938+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12) 
2019-05-23T00:08:42.152915+00:00 heroku[web.1]: Idling 
2019-05-23T00:08:42.157365+00:00 heroku[web.1]: State changed from up to down 
2019-05-23T00:08:43.157938+00:00 heroku[web.1]: Stopping all processes with SIGTERM 
2019-05-23T00:08:43.269315+00:00 heroku[web.1]: Process exited with status 143
2019-05-22T23:34:23.840935+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)

Answer 1

Maybe instead of this

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

Try this:

app.use(express.json());
app.use(express.urlencoded({extended: true})); 

Setting extended to true allows nested JSON objects to be sent through express, which your object clearly is. Vanilla express will also do what bodyParser does. So you don't really need it.

Answer 2

I finally figured it out. It had to go with my mongodb whitelist. I only had my IP address on it so that's was the only way to access the dB. Thank you for your helpful comments!