The Function That Ate An Error Message
Tags: frontend, webdev, javascript, testing
Published: 2019-10-14 12:25:22

---
title: The Function That Ate An Error Message
published: true
description: This function was looked at by dozens of competent developers. It wasn't until one of the interns (later hired by the same company) took on this card that the issue was found.
tags: Frontend, WebDev, JavaScript, Testing
series: JavaScript Details
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rzcu1yn4h1tniok9o2n9.png
---

> console.log failed us in this scenario ...

## The Problem

In a previous code-base, we had a problem that seemed to crop up repeatedly. This was one of those problems that was looked at by dozens of developers, with no clear understanding of what the issue was or what was causing it.

Basically, when making a call to the backend, our code was passing a value to another function that did some processing on the data. In the example code below, the majority of the processing is left out since it was not a part of the issue.

This issue, in a code-base of thousands of lines of code, was able to continue without being located because it was a simple issue. This scenario was significantly simplified; the calling code and function called had enough code in place to somewhat mask what was going on.

This issue was extremely difficult to replicate and unfortunately, it got missed as a valid negative test. There was also a ton of additional work that took priority over this issue.

Here is the code ...

```javascript
function test(input) {
    if (!!input) {
        return true;
    } else {
        return false;
    }
}
```

We expected input to be a boolean value or undefined. The return value was used, but that's not what was important here.

Looking at a few scenarios, everything seems fine, there was even good testing against this function.

```javascript
test();      // false
test(true);  // true
test(false); // false
```

## The Actual Problem

As I said, this function was looked at by dozens of competent developers. It wasn't until one of the interns (later hired by the same company) took on this card that the issue was found.

Fortunately for our team, the intern who took the card on was very patient and willing to run through the various permutations to replicate the issue. Once the issue was replicated and appropriate break points in place, the issue became very clear.

Having examined the issue and previous related work, she jumped into Chrome's Developer Tools and marked the line where it returns `true`. Then, she replicated the issue.

Basically, what she found was that we were receiving an error from the backend at times which gets passed to the function as a string. When the input was examined, it was the ***500 Error Message***; HTML.

So now, we look at the following scenario ...

```javascript
test('ERROR'); // true
```

In this case, we SHOULD have gotten `false`. Because of a simple TRUTHY issue, the entire house-of-card came tumbling down.

## The Resolution

A truly simple fix handled the issue that plagued our team for almost three years.

```javascript
function test(input) {
    if (input === true) {
        return true;
    } else {
        return false;
    }
}
```

So, `!!input` became `input === true` and the following occurs ...

```javascript
test('ERROR'); // false
```

### Conclusion

Problem solved!

The code supporting this article is here ...

{% github bob-fornal/code-ate-error-message %}

## Images

<div>Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> from <a href="https://www.flaticon.com/"             title="Flaticon">www.flaticon.com</a></div>