Have you ever had a conversation that went something like this?
Support Rep: “I just heard from a prospective customer that they’ve been trying to add an item to their cart, but the button isn’t working.”
You: “Okay, let me verify.”
A few minutes later, you can confirm that the button the prospect was trying to click is indeed not working.
You: “Hey Developers, there’s an issue on our site. I need it to be fixed ASAP so we don’t lose any more sales.”
Dev Team Manager: “Okay cool. What’s the issue?”
You: “Something about Javascript…”
Honestly, as someone who has never worked in development or engineering, I really never understood some of the errors I would come across while I was troubleshooting a site functionality issue. Someone would mention, “I think Javascript is throwing us an error” and I would have no idea what that meant, just that something had to be fixed and I had to pass it along to the dev team.
Not having a clue into what the Javascript error was, what caused that particular one, or what it looked like made it very difficult for me to properly translate that error to our developers for them to resolve. To put an image in your head, I often felt like I was dropping a baby off on the steps of a church… hoping for the best but not providing them with much information to work with.
I would always feel awful asking my developers for a resolution, without being able to provide them with any useful context or indication of where to start their efforts.
So I decided to jump in and learn the impact of Javascript language and functionalities, hoping that some basic knowledge would enable me to better understand incoming errors that directly affect my job, and so I can be a better teammate to my developers.
In all likelihood, frontend Javascript experience was not listed in your initial job description either. But it’s my philosophy that happy developers make for a happy company… So it may be time to ramp up – even a little – on Javascript knowledge!
What is Javascript
Javascript is an incredibly popular programming language used throughout the web to power interactive features, frameworks, and reactive graphics and animations. Without the introduction of Javascript into the programming world, the web would be a significantly less interesting place.
Used to call on predetermined functionalities and objects set by your programmer, Javascript enables the user-interactivity you see on most web applications.
The community of skilled Javascript programmers is massive, and as more individuals contribute to the space, the language is continuously evolving to become more and more complex and sophisticated.
This evolution is great for internet consumers and users, but it’s not so great for the programmers in charge of your front-end functionality. Because unfortunately, as with anything that increases in complexity, so increases its vulnerability to errors.
What types of errors can occur in Javascript?
While I could write you a 20 page report that covers every single possible bug or error that could occur in Javascript – with the help of my engineering team, of course – as eCommerce managers, we don’t need that level of granularity. We just need to gain an understanding of the most common bugs so we can wrap our heads around new javascript error messages that may pop up.
In a study conducted by the University of British Columbia (UBC) to uncover the root causes of javascript errors, researchers were able to put javascript error messages into 5 categories:
1. DOM-related errors
2. Syntax-based errors
3. Undefined / Null variable usage error
4. Undefined method error
5. Improper usage of the Return statement
What happens when there’s an error in Javascript?
As you can imagine with the above spread of error categories, what actually happens when a bug occurs will vary.
Sometimes it means a small navigation button won’t be clickable on your site, other times it’s the Add To Cart function that isn’t firing anymore. Worst case, a Javascript error can cause an entire website and/or application to not run at all.
Boiled down to basics: There’s something wrong with the code, and it’s stopping your website from functioning as intended. Javascript has thrown a wrench into your plans.
DOM-Related Javascript Error Explained
When we think of Javascript technologies, we will typically think of backend code, similar to that of Node JS. Surprisingly the ability to make web pages interactive is the main reason the Javascript language came to fruition, hence a significant functionality of it is to manipulate the front-end.
Document Object Model (DOM) manipulation refers to a functionality in Javascript that allows programmers to manipulate the structure, styling, and content of a page. This is actually where over 50% of common Javascript errors originate from.
Since Javascript is typically executed in the order of which it appears in the code, DOM errors often occur when programmers make the mistake of trying to reference an element before the DOM contains the element that was referenced.
The quick fix next time a DOM error gets thrown? Ask your dev team to make sure all referenced elements are added into the first few lines of code.
What’s particularly nice about knowing this? Instead of asking your dev team to spend an hour recreating the error to pinpoint what went wrong and where, you can provide them with direction with the root cause so it only takes a few minutes to quickly reorder the code.
Syntax-Based Javascript Error Explained
A syntax-based Javascript error refers to an issue arising from, really, a grammatical error. Every language has its own rules that have to be followed in order to be interpreted correctly. Javascript language is no different.
Commonly occurring when a programmer forgets a parentheses or unmatched bracket, a syntax-based error will be thrown when the interpreter of the javascript code observes an element or token that does not have a standard syntactical match in the JS language.
Example: Your programmer may need to use conditional statements to address multiple conditions. If there is a required parentheses that is missing to properly identify these conditions, a syntax flaw will be detected and reported.
Imagine you were working on a new page and, during the HTML coding process, you forgot to close out your Href tag. Suddenly, you don’t have a phrase that is hyperlinked… You have the rest of your blog hyperlinked. A syntax-based error is sort of similar to that, but almost always significantly less obvious in production.
Another example of a syntax-based error occurs when the programmer has forgotten to properly pass on their coded argument to a function.
Unlike a DOM error, the best way to ensure this doesn’t happen is simply with usage over time. No, not eCommerce manager usage, don’t worry. You’re not expected to be fluent in Javascript.
With any language the more you’re immersed in it, the more fluent you’ll be. So for developers, practice really makes perfect on this one.
Improper Usage of undefined / null Keywords Explained
First things first, “null” is an assignment value assigned to a variable to indicate a non-existent value. Surprisingly, “null” is also a Javascript object.
“Undefined” indicates that a variable or other related element lacks an assigned value, where one is usually expected.
Put into a real-world example. Having a “null” value is like having a display case with nothing in it. An “undefined” is as if the display case itself is missing.
With 2 different meanings of “null” and a similarly defined “undefined”, it’s not a surprise that some javascript developers mix up their usage of the keywords.
In a typical stack trace, an incorrect usage of null / undefined may look something like the following:
Javascript Undefined Methods Error Explained
When an “Undefined Method” error is thrown, the cause can be linked back to the programmer inputting a non-existent function call for an object. Essentially meaning that the Javascript code does not know what to do with the called-upon property or object.
There are 2 Methods that interact with Javascript objects; the instance methods and the static methods. Instance method refers to built-in tasks that can be performed by an object in an instance; static method refers to a task that is directly calling an object constructor.
So how does this help you work with your developers and get a quick fix? Eliminating the need for the development and engineering teams to do a deep dive root causes analysis is a huge time saver. Also, saying something along the lines of, “Hey, something’s not working with Javascript” is a lot different than saying, “Hey, I think there’s a faulty method-call on this part of the site. Could your team take a look to see where there’s a mismatched method function?”
As with the other explanations, even this basic level of understanding will help you direct your development team to where their efforts should be focused.
Similar to the syntax-based errors, the best way to avoid undefined methods from being used is prolonged exposure to the language. As programmers get more used to the intricacies and functionalities of different aspects of the Javascript language, they will be more aware of what functions can be applied to which objects and which method calls will be invalid.
Improper Usage of the Return Statement Explained
A Return statement stops the running of a function so its value can be outputted; it tells a given function when to return with a value. When used incorrectly, inputting a return statement will interfere with application performance.
While programmers can break a javascript statement into two lines and get the same output, breaking the return statement (simplified example below) opens the door to errors.
There are a few ways to “break out of” a function loop to move onto the next element in your code. Programmers can use Break to exit from the loop, and Return to go back to the step where the function was called or to stop further execution and output a value.
How to Automatically Detect Javascript Errors
So now you know what can cause a Javascript error and what it might look like. But when you’re solely relying on customers to flag site errors, there’s a chance you’re missing a whole chunk of unreported bug occurrences.
In fact, I can almost guarantee that if your error handling is dealt with through customers reporting into your support team, you’re missing up to 90% of real onsite errors. Yes, only 10% of customers will ever get frustrated enough to create a support ticket. Oftentimes, they just leave your site; a potential sale is completely lost.
Now obviously it’s neither effective nor efficient to have someone on retainer 24/7 to constantly check site functionality for all entrance avenues, devices, browsers, physical locations, buyer journeys, etc. And other application monitoring tools don’t provide the extra data developers need to actually solve an identified problem.
There is a solution though.
Noibu is the first ever platform to offer real-time error detection for eCommerce brands. The platform streamlines your workflow by automatically prioritizing eCommerce errors (Javascript and more) by their impact to conversion and therefore revenue. It also further helps your developers by packaging up all relevant data and stack traces to help them resolve errors without spending hours stuck in reproduction.
If you’d like to learn more about how Noibu can help – so you don’t need to remember all the Javascript things I just told you – reach out to me at katya.zeisig@noibu.com and I would love to set you up with a free site audit!
