The Function That Ate An Error Message

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 ...

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.

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 ...

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.

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

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

test('ERROR'); // false

Conclusion

Problem solved!

The code supporting this article is here ...

bob-fornal / code-ate-error-message

code-ate-error-messages

This is code that I ran into that cause some odd functionality because it was "eating" the error message that came from the backend as a string of HTML.

The code here is proof of the concepts shown in the article.

To run the tests ...

$ jasmine

View on GitHub

Images

Icons made by Smashicons from www.flaticon.com

Comments

[jappyjan]

That's like js super basics... if I had employees not beeing able to solve such a problem I would definitely start to think if those guys have a right to call them js developers...
Sorry if I'm hurting anyone's feelings with this but this beginners stuff... I just can't understand how a company is able to suffer of it for three years ...

[bob.ts]

Also realize that 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.

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.

[jappyjan]

Well then: nothing said 😜

[bob.ts]

I appreciate the comments ... I probably didn't stress the above points enough in the article and you called them out. Thanks!

[jappyjan]

I appreciate the way you replied to my comments even though they might have been a bit harsh...

[bob.ts]

Not at all ... didn't take the comments as harsh. Like in a code review ... something for me to fix moving forward!

[bob.ts]

It is super basic and that, I believe is where this issue, in a code-base of thousands of lines of code, was able to continue without being located.

This scenario was significantly simplified; the calling code and function called had enough code in place to somewhat mask what was going on.

No feelings are hurt ... just putting this out the ensure that we always go back to those basics and dig in appropriately.