App Maintenance, Part II

Sometimes fixing a bug can feel a bit like a good ol' fashioned WHODUNIT!

Michael Scott Caleb Crawdad  - giphy.com

I call this one The Case of the Mustachioed Menace.

The bug in question was a similar case to that discussed in my last post in that (SPOILER ALERT) it was caused by outside influences and updates.

However, this one involved a much different culprit; one I never thought would betray me.

I do declare!

It all started when decided to add a favicon to my React project, Apply Yourself.

Simple enough.
Replace the favicon.ico in the public folder of my project.
git add .
git commit -m 'added favicon'
git push

All looked well – until I went to check it out on the live version. No new favicon.
What the heck? (not that there's anything wrong with the React icon…)

I went to my Netlify dashboard and checked the project. I manually triggered a deploy. The new deploy version had the favicon; awesome!
However…

I attempted to log in and nothing happened. I checked the console, and it appeared that the app was attempting to POST the credentials to localhost rather than the server hosted on Heroku for some reason…
I knew right away that this must have been a problem with my config file, so I checked out config.js

config.js file

Everything looked good. Next, I went over to TravisCI to verify that my environment variable was set up properly. Sure enough, when I logged in, I was greeted with a red Travis icon, signifying a failed deploy - the Mustachioed Menace had broken my project!

So it wasn’t Netlify's fault after all. But what's the deal, Travis?
Looking through the build log, there was no specific error message:

TravisCI build log

The last line simply said that it was deploying…and then that it failed to deploy.

Well, somehow I knew that Netlify had to be at the bottom of this!
I went over to my Netlify dashboard and verified that the API url environment variable was set, complete with its REACT_APP_ prefix to gel with create-react-app. Nothing had changed since I made the app… at least that I could see.

I checked the rest of the environment variables – NETLIFY_SITE_ID, check. NETLIFY_KEY, check.

Next, it was time to check the .travis.yml file. Again, not that anything should have changed, but…

travis yml file

Ah, but what was this I remembered hearing about Netlify's CLI being deprecated?
I promptly removed the npm install netlify-cli command, and…

Nope.

Darn. Maybe you are off the hook, Netlify.

So it was time to investigate this error (or lack thereof) a bit further…

Michael Scott No Idea What To Do - giphy.com

Well, let's see if we can't get some more detail about this error, then.

Back at the Travis build info, I expanded the details regarding the failed status.

Travis build log

What's this about an assertion error?
args[1] -> IsString() ? Never heard of that one…
I was going to need to phone a friend. RING! Hello, Stack Overflow?

Well, it appeared that this business about a string and assertion error was due to a conflict between dependencies and the version of Node used in the build.

I checked the build setup:

Travis build Node version 10

Node version 10.
Alright, Node, what version were you on the night of March 11, 2018??

Travis build Node version 9

NOT version 10…

Looks like node_js: node in the .travis.yml meant automatically updating to the latest stable version of Node available.

Replacing node with "9" reverted Node to the latest stable version of 9, and, surely enough, Travis gave me the green light!

Et tu, Node?

Well, you may have broken my project, but I can't stay mad at you!
You taught me a valuable lesson, after all…

Now that sounds more like a Full House moment.

Full House Hug – giphy.com

All's well that ends well.

Until next time!

* Gifs courtesy of GIPHY

Back to Posts