Because data is the most important thing, we collect, analyze and classify data 10 JavaScript errors more important. This gives users a good overview rather than a big overwhelming dump like you would see in a log file.
We focus on the errors that are most likely to affect you and your users. To do this, we classify the errors by the number of projects that experience them in different companies. If we look only at the total number of times each error occurred, then high-volume customers could overwhelm the dataset with errors that are not relevant to most readers.
Here are the top 10 JavaScript errors
Each error has been shortened to make it easier to read. Let's dive into each of them to determine what can cause it and how to avoid creating it.
Undetected error type: Cannot read property
If you are a JavaScript developer, you have probably seen this error more than you would like to admit. This happens in Chrome when you read a property or call a method on an undefined object. You can test it very easily in the Chrome development console.
This can occur for many reasons, but a common one is incorrect state initialization while rendering UI components.
TypeError: 'undefined' is not an object
This is an error that occurs in Safari when you read a property or call a method on an undefined object. You can test it very easily in the Safari development console. This is essentially the same error as the one above for Chrome, but Safari uses a different error message.
ERROR TYPE: null is not an object
This is an error that occurs in Safari when you read a property or call a method on a null object. You can test it very easily in the Safari development console.
Interestingly, in JavaScript, null and undefined are not the same, which is why we see two different error messages. Undefined is generally a variable that has not been assigned, while null means that the value is blank.
One way this error can occur in a real world example is if you try to use a DOM element in your JavaScript before the element is loaded. This is because the DOM API returns null for object references that are blank.
Any JS code that runs and deals with DOM elements must be run after the DOM elements have been created. The JS code is interpreted from top to bottom as indicated in the HTML. So if there is a tag before the DOM elements, the JS code inside the script tag will be executed when the browser parses the HTML page. You will get this error if the DOM elements have not been created before loading the script.
(unknown): Script error
The Script error occurs when an undetected JavaScript error crosses domain boundaries in violation of the cross-origin policy. For example, if you host your JavaScript code on a CDN, any undetected errors (errors that bubble up to the error handler window.onerror, instead of being caught in it try-catch) it will be reported as simply a "script error" instead of containing useful information. This is a browser security measure designed to prevent the passage of data through domains that would not otherwise be able to communicate.
TypeError: Object doesn't support property
This is an error that occurs in IE when an undefined method is called. You can test it in the IE Developer Console.
This is equivalent to the error "TypeError: 'undefined' is not a function" in Chrome. Yes, different browsers can have different error messages for the same logical error.
This is a common problem for IE in web applications that use JavaScript name spacing. When this is the case, the 99.9% problem of the time is IE's inability to bind methods within the current namespace with this keyword. For example, if you have the JS Rollbar namespace with the isAwesome.
TypeError: 'undefined' is not a function
This is an error that occurs in Chrome when an undefined function is called. You can test it in the Chrome development console and Mozilla Firefox development console.
As JavaScript coding techniques and design patterns have become increasingly sophisticated over the years, there has been a corresponding increase in the proliferation of self-referencing scopes within callbacks and closures, which they are a fairly common source of this or that confusion.
Uncaught RangeError
This is an error that occurs in Chrome under a couple of circumstances. One is when a recursive function is called that does not terminate. You can test it in the Chrome development console.
It can also occur if a value is passed to a function that is out of range. Many functions accept only a specific range of numbers for their input values. For example, Number.toExponential (digits) and Number.toFixed (digits) accept digits from 0 to 100, and Number.toPrecision (digits) accept digits from 1 to 100.
TypeError: Cannot read property 'length'
This is an error that occurs in Chrome due to the read length property of an undefined variable. You can test it in the Chrome development console.
Normally the defined length is found in an array, but you may run into this error if the array is not initialized or if the variable name is hidden in another context. Let's understand this error with the following example.
Uncaught TypeError: Cannot set property
When we try to access an undefined variable it always returns undefined and we cannot get or set any property of undefined. In that case, an application will throw "Uncaught TypeError cannot set property of undefined".
ReferenceError: event is not defined
This error occurs when trying to access a variable that is undefined or out of current scope. You can test it very easily in the Chrome browser.
If you get this error when using the event handling system, be sure to use the event object passed as a parameter. Older browsers like IE offer a global variable event, and Chrome automatically appends the event variable to the handler. Firefox will not add it automatically. Libraries like jQuery try to normalize this behavior. However, it is good practice to use the one passed to the event handler function.
conclusion
It turns out that many of these are null or undefined errors. A good static type checking system like Typescript it might help you avoid them if you use the strict compiler option. It can warn you if a type is expected but not defined. Even without Typescript, it is useful to use protection clauses to check if objects are undefined before using them.
We hope you have learned something new and can avoid mistakes in the future, or that this guide has helped you solve a head scratch. However, even with best practices, unexpected errors appear in production. It is important to have visibility of the errors that affect users and to have good tools to solve them quickly.
