Join our Live Demo: "Advanced Error Monitoring & Debugging" on 8/6/2020 12:00PM PDT. Register here
December 18th, 2019 • By István Erdő
It's Friday afternoon and you decide to check on your web logs one last time before you go out for the weekend. Since you've deployed recently, you want to make sure everything is going smoothly. You open your tool and suddenly you find your screen flooded with TypeErrors. Does this sound familiar?
What often makes fixing these problems difficult is the wide range of exception messages coming from different browser types, versions and languages. Looking at a list of TypeErrors in your logs makes it difficult to decide if it is one problem materializing in different forms or different issues altogether.
According to the TypeError docs it's thrown “when an operation could not be performed, typically (but not exclusively) when a value is not of the expected type”.
This can easily happen during a code refractor, when you reworked a function but didn't consider it being used in another part of your app that is now breaking.
There are a number of different cases but we've found that the vast majority of errors can be categorized into one of the following.
This means that the object you are calling is
null or you haven't defined it. Depending on the browser where the error got thrown the message can be different.
Other messages that mean the same thing:
There is more info in the official documentation.
You will get this error if the object method or property you are calling does not exist. Similarly to Case 1 the message will be browser specific.
Other messages that you may see:
For more information on this case, please visit the official documentation.
There are of course other cases besides those mentioned here but we've found that among Rollbar users these are the most common.
Therefore, when you see TypeErrors in production the first step is to recognize which case they belong to. You need to check all the occurrences to be sure about how many different bugs you need to fix.
Next you should focus on either filtering out languages you don't understand or using a tool like Rollbar that does the grouping properly across languages. This will help you find out what went wrong in your code and proceed to fixing it.
While logging tools allow you to see every event in detail, they don't have a very good understanding of errors. In a logger you’ll see
TypeError: Δεν είναι δυνατή η λήψη της ιδιότητας "bar" με ακαθόριστη αναφορά ή αναφορά null but also
TypeError: Nem lehet lekérni a(z) (bar) tulajdonságot, amelyhez nem definiált vagy null értékű hivatkozás tartozik and hundreds of thousands of more log entries that may or may not mean the same error.
By using an error monitoring tool like Rollbar, alongside your logger, there will be less noise when checking errors. At Rollbar, every time we see a new occurrence we recognize the crash, we group it into the relevant item and send you a notification that can be configured for your personal needs. All of this happens in real time.
In practice we pick out the most important parts of the message, from the
We then group by exception, object and method at the same time.
Due to the nature of these errors, the grouping operation is not trivial and if an error monitoring tool doesn't recognize the different cases, there can be lot of noise. Nonetheless, we've built grouping algorithms that handle these cases using a combination of IE error mapping for different languages (special thanks to Rajasekharan Vengalil) and custom code.
It applies to all TypeError cases mentioned in this article so you don't have to deal with different languages and browsers. The same crashes will be properly grouped together. This results in a clean, actionable view of all of your errors that were created by analyzing the semantics of the errors, which allows you to iterate very quickly.