The purpose of this blog is to record the turning points of fixing a crashed web app on Azure, which works locally.

Background

The web app is built with ExpressJS as the backend, sequelize as the ORM, Azure PostgreSQL as the database, React and Redux as frontend. It’s hosted on Azure.

Problem

The web app runs on local browser, but crashes on Azure after it’s deployed. The broken website on Azure shows “HTTP ERROR 500”.

Turning Points

  • Azure log stream

Log stream printed out a detailed error when the deployed web app is browsed from azure portal: “TypeError: Cannot read property ‘use_env_variable’ of undefined”. This error happens on the first line of the following code block on model/index.js:

if (config.use_env_variable) {
var sequelize = new Sequelize(process.env[config.use_env_variable], config);
} else {
var sequelize = new Sequelize(config.database, config.username, config.password, config);
}

  • Debug var values with console.log

The real issue was unveiled by seeing different value of the same var `env` when assessing var values related to “config” in the import-header section:

var env = process.env.NODE_ENV || ‘development’;
var configFile = require(__dirname + ‘/../config/config.json’);
var config = configFile[env];
var db = {};

console.log(“[DEBUGGING] __dirname”, __dirname);
console.log(“[DEBUGGING] configFile: “, configFile);
console.log(“[DEBUGGING] env: “, env);
console.log(“[DEBUGGING] config: “, config);

Specifically, `var` is `development` on local machine, but is `production` on Azure. Whereas the config.json file specifying database configuration doesn’t have the `production` key.

Thoughts

Looking back, I realize the key to fix the “HTTP ERROR 500” error of the Azure web app is precisely identifying the problem. That means, I needed to figure out on which line of code and which vars didn’t work as expected. This statement holds firmly because that’s the nature of an application wrote by a programming language.

Then, what’s the most effective way of precisely identifying the problem? Turns out using debugging tool to log as much related values of the application as possible is the right way, at least for this case.

However, I didn’t take the most effective approach at the first sight! Specifically, for “HTTP ERROR 500”, I searched online, and got hints of logging application states. That directed me to check Azure’s log stream. But for “TypeError: Cannot read property ‘use_env_variable’ of undefined”, I had wrong guess of the cause of the issue: I imagined the compilers on Azure and on my local machine are different – the compiler on local machine ignores the TypeError detected on Azure. Even worse, I firmly believed my imagination of the cause of the issue is true.. It was me randomly logged the var values that helped me unveiling the real issue.

The native approach I took to fix the problem unveils some mistakes I made for solving tech problems:

  • I should’ve directly check Azure’s diagnostic tools when saw “HTTP ERROR 500”. But understanding and learning “HTTP ERROR 500” was necessary.
  • I should’ve realized “TypeError: Cannot read property ‘use_env_variable’ of undefined” means “config” is undefined, and should’ve logged out related vars of “config”, instead of imagining the difference between local machine and Azure compiler. I think what I really miss here is that for a web app, the first priority of debugging is logging out vars, then consider system and compilers issues. But learning “TypeError: Cannot read property ‘use_env_variable’ of undefined” was necessary too.

So, a couple lessons here to solve an issue

  • Learn the error by googling
  • Use the right debugging tool to precisely identify the issue – it should be specific to code level