Miguel T Rivera

Posted on Aug 18, 2020

Error Handling: Read the console output!

#javascript #webdev #tutorial

I'm currently going through Metric-Imperial Converter project on freeCodeCamp. Furthermore, I'm working on the Error Handling part of the user stories.

I've encountered different types of error, but I'll focus on one for this article.

TypeError: Cannot read property 'includes' of null
    at ConvertHandler.getNum (/home/username/webdev/metric-imperial-converter/controllers/convertHandler.js:24:13)
    at /home/username/webdev/metric-imperial-converter/routes/api.js:21:36
    at Layer.handle [as handle_request] (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/layer.js:95:5)
    at /home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/index.js:335:12)
    at next (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/index.js:275:10)
    at urlencodedParser (/home/username/webdev/metric-imperial-converter/node_modules/body-parser/lib/types/urlencoded.js:91:7)

This seems intimidating at first, but the solution may be located in the first few lines. Let's look at the first line:

TypeError: Cannot read property 'includes' of null

There are two includes methods: one on the String object, and the other the Array object.

Note: the Array includes is case-sensitive when comparing strings and characters.

I should be passing a string or an array as an argument, but its receiving null as the value. Let's if the error message can still help us:

at ConvertHandler.getNum (/home/username/webdev/metric-imperial-converter/controllers/convertHandler.js:24:13)

From this we can gather that it takes place in the getNum method part of the ConvertHandler module.

Let's look at the code:

this.getNum = function(input) {
    var result = null;
    var num = null;
    var numRe = (/\d\.?\d*\/?\d?\.?\d*/g);

    // Check if fraction
    if (num.includes('/')) {
    ...
    }
  };

A simple mistake. I forget to update the num variable. I set it to null at first, since it receives a value later.

Revised code:

this.getNum = function(input) {
    var result = null;
    var num = null;
    var numRe = (/\d\.?\d*\/?\d?\.?\d*/g);

    num = input.match(numRe).join('');    // Fix Type Error

    // Check if fraction
    if (num.includes('/')) {
    ...
    }
  };

I hope this helps you with debugging. The console can be a valuable resource in squashing bugs.

NOTE: Recently, I improved the code. However, I think others might benefit from my mistake, and help with their own debugging.

Resources:
String includes
Array includes

Photo by Franco Atkins from Pexels

Top comments (2)

Jeremy Forsythe • Aug 18 '20

A couple other helpful tips for you:

use const or let instead of var
there's no need to declare the vars at the top of the function - e.g. just declare num on the input.match line
you likely don't need a result variable - 99% of the time you can just return a value directly and it tends to lead to cleaner code - for instance you'll find yourself writing "else" a lot less

Miguel T Rivera • Aug 19 '20

Thanks! I want to be consistent with the style, but can see benefits of leaner code. Some of the helper methods just return a value:

  this.getUnitIndex = function(input) {
    return input.search(/[a-zA-Z]/);
  }

I'll refactor the code after the user stories are satisfied.

DEV Community

Error Handling: Read the console output!

Top comments (2)

Read next

Running a JAX Program from Dart Using C++ FFI

Store UI State in localStorage with Stimulus

Experimental attribute in C# is a powerful tool : Let's explore

Evaluating Medical Retrieval-Augmented Generation (RAG) with NVIDIA AI Endpoints and Ragas