Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to avoid JavaScript errors". In daily operation, I believe many people have doubts about how to avoid JavaScript errors. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to avoid JavaScript errors". Next, please follow the editor to study!

We calculate the number of these errors based on the collected data. Rollbar collects all errors in each project, summarizes the number of times each error occurred, and then groups them by the characteristics of each error.

The following figure shows the top 10 JavaScript errors that have occurred most frequently:

Let's take an in-depth look at what happened to each error in order to determine the cause of the error and how to avoid it.

1. Uncaught TypeError: Cannot Read Property

This is the most common error encountered by JavaScript developers. Such an error is reported in Chrome when you read a property or call a method of an undefined object.

There are many reasons for this error, one of which is that the state is incorrectly initialized when rendering the UI component. Let's look at an example of this happening in a real application.

Class Quiz extends Component {componentWillMount () {axios.get ('/ thedata') .then (res = > {this.setState ({items: res.data});} render () {return ({this.state.items.map (item = > {item.name})});}}

The above code has two important aspects:

One is the state of the component (such as this.state), which is the undefined state before the start of the lifecycle.

Second, when obtaining data asynchronously, whether in the constructor componentWillMount or extracting componentDidMount in the constructor, the component will render at least once before the data is loaded. When you detect the first rendering, you will find that the this.state.items is undefined. An error occurs-"Uncaught TypeError: Cannot read property 'map' of undefined" in the consol ".

The solution is simple: initialize the state with reasonable default values in the constructor.

Class Quiz extends Component {/ / Added this: constructor (props) {super (props); / / Assign state itself, and a default value for items this.state = {items: []};} componentWillMount () {axios.get ('/ thedata') .then (res = > {this.setState ({items: res.data});}) } render () {return ({this.state.items.map (item = > {item.name})});} 2. TypeError: 'undefined' Is Not an Object (evaluating...)

This is an error that occurs when reading properties or calling methods on undefined objects in Safari, which is basically the same as the above error in Chrome, except that Safari uses a different error message.

3. TypeError: Null Is Not an Object (evaluating...)

This is an error that occurs when reading properties or calling methods on empty objects in Safari.

Interestingly, in JavaScript, null and undefined are two different types, which is why two different error messages appear. An undefined variable is usually an unassigned variable, while null indicates that the value is empty. To verify that they are not equal, use the strict equality operator:

In practice, one of the reasons for this error is to try to use the DOM element in JavaScript before the element is loaded. This is because DOM API returns null for blank object references.

Any JS code that executes and processes the DOM element should be executed after the DOM element is created. The JS code is interpreted from top to bottom according to the rules in HTML. Therefore, if there is a tag before the DOM element, the JS code within the script tag is executed when the browser parses the HTML page. This error occurs if the DOM element has not been created before the script is loaded.

In this example, we can solve this problem by adding an event listener, which notifies us when the page is ready. Once the addEventListener is triggered, the init () method can use the DOM element.

Function init () {var myButton = document.getElementById ("myButton"); var myTextfield = document.getElementById ("myTextfield"); myButton.onclick = function () {var userName = myTextfield.value;}} document.addEventListener ('readystatechange', function () {if (document.readyState = "complete") {init ();}}); 4. (unknown): Script Error

A script error occurs when an uncaught JavaScript error violates the cross-boundary principle. For example, if you host JavaScript code on CDN, any uncaught errors (errors issued through the _ window.onerror handler rather than those caught in try-catch) will only be reported as "script errors." This is a security measure for browsers and is mainly used to prevent the transfer of data across domains.

To get real error messages, you need to do the following:

1. Access-Control-Allow-Origin

Setting Access-Control-Allow-Origin to * means that resources can be accessed correctly from any domain. * if necessary, you can also replace it with your own domain name, for example:

Access-Control-Allow-Origin: www.example.com .

Here are some examples of settings in various environments:

Apache

In the JavaScript folder, create an .htaccess file with the following:

Header add Access-Control-Allow-Origin "*" Nginx

Add the add_header directive to the location block that provides the JavaScript file:

Location ~ ^ / assets/ {add_header Access-Control-Allow-Origin *;}

HAProxy

Add the following to the static resource configuration backend that provides the JavaScript file:

Rspadd Access-Control-Allow-Origin:\ *

two。 Set crossorigin = "anonymous" on the script tag

In your HTML source code, set Access-Control-Allow-Origin for each script, and in the set SCRIPT tab, set crossorigin= "anonymous". Before adding the crossorigin attribute to the script tag, make sure that you are sending header to the script file. In Firefox, if the crossorigin attribute exists but the Access-Control-Allow-Origin header does not exist, the script does not execute.

5. TypeError: Object Doesn't Support Property

This error occurs in IE when an undefined method is called.

This is equivalent to a "undefined' is not a function" error in Chrome. Different browsers may have different error messages for the same logic error.

This is a common problem with using JavaScript namespaces in IE's Web applications. Most of the reason for this is that IE cannot bind a method in the current namespace to the this keyword. For example, if you have the namespace isAwesome of the JS Rollbar method. In general, if you are within the Rollbar namespace, you can call the isAwesome method using the following syntax:

This.isAwesome ()

Chrome, Firefox, and Opera accept this syntax, while IE does not. Therefore, the safest thing to do when using JS namespaces is to always prefix them with the actual namespace.

Rollbar.isAwesome (); 6. TypeError: 'undefined' Is Not a Function

This error occurs in Chrome when an undefined function is called.

As JavaScript coding techniques and design patterns have become more complex over the past few years, the range of self-references in callbacks and closures has increased accordingly, which is the main source of this confusion.

As in the following sample code snippet:

Function testFunction () {this.clearLocalStorage (); this.timer = setTimeout (function () {this.clearBoard (); / / what is "this"?}, 0);}

Executing the above code results in the following error: "Uncaught TypeError: undefined is not a function." The reason for the above error is that when you call setTimeout (), you are actually calling window.setTimeout (). The anonymous function passed to setTimeout () is defined in the context of the window object, which does not have a clearBoard () method.

The solution that conforms to older browsers is to simply save references in this as variables and then inherit them through closures. For example:

Function testFunction () {this.clearLocalStorage (); var self = this; / / save reference to 'this', while it's still this! This.timer = setTimeout (function () {self.clearBoard ();}, 0);}

Or, in newer browsers, use the bind () method to pass the reference:

Function testFunction () {this.clearLocalStorage (); this.timer = setTimeout (this.reset.bind (this), 0); / / bind to 'this'}; function testFunction () {this.clearBoard (); / / back in the context of the right'thiskeeper!}; 7. Uncaught RangeError: Maximum Call Stack

This is an error that occurs in Chrome in many cases, one of which is when you call a recursive function that does not terminate.

This can also happen if you pass a value to a function that is out of range. Many functions accept only numeric input values within a specific range. For example, Number.toExponential (digits) and Number.toFixed (digits) accept a range of parameters from 0 to 20, while Number.toPrecision (digits) accepts a range of numbers from 1 to 21.

Var a = new Array (4294967295); / / OKvar b = new Array (- 1); / / range errorvar num = 2.555555; [xss_clean] ln (num.toExponential (4)); / OK [XSS _ clean] ln (num.toExponential (- 2)); / / range erroryognum = 2.9999; [xss_clean] ln (num.toFixed (2)); / / OK [XSS _ clean] ln (num.toFixed (25)); / range errorroomnum = 2.3456 [xss_clean] ln (num.toPrecision (1)); / OK [XSS _ clean] ln (num.toPrecision (22)); / / range errorship 8. TypeError: Cannot Read Property 'length'

This is an error in Chrome because a variable with an undefined length attribute was read.

The defined length can usually be found in an array, but this error can occur if the array is not initialized or the variable name is hidden in another context. Let's use the following example to explain this error.

Var testArray= ["Test"]; function testFunction (testArray) {for (var I = 0; I < testArray.length; iArray +) {console.log (testArray [I]);} testFunction ()

When you declare a function with arguments, those parameters become local parameters. This means that even if you have the name variable testArray, parameters with the same name in the function will still be treated as local parameters.

There are two ways to solve this problem:

1. Delete the parameters in the function declaration statement:

Var testArray = ["Test"]; / * Precondition: defined testArray outside of a function * / function testFunction (/ * No params * /) {for (var I = 0; I < testArray.length; iTunes +) {console.log (testArray [I]);}} testFunction ()

two。 Call the array function passed to us:

Var testArray = ["Test"]; function testFunction (testArray) {for (var I = 0; I < testArray.length; iArray +) {console.log (testArray [I]);}} testFunction (testArray); 9. Uncaught TypeError: Cannot Set Property

When you try to access an undefined variable, undefined is always returned. Nor can we get or set any properties of undefined. In this case, the application will throw a "Uncaught TypeError cannot set property of undefined".

For example, in a Chrome browser, this error occurs if the test object does not exist:

So you need to define the variable before accessing it.

10. ReferenceError: Event Is Not Defined

This error is raised when you try to access an undefined variable or a variable outside the current scope.

If you encounter this error when using the event handling system, be sure to use the incoming event object as a parameter. Browsers such as IE provide global variable events, and Chrome automatically appends event variables to the handler, while Firefox does not automatically add event variables.

Document.addEventListener ("mousemove", function (event) {console.log (event);}) JavaScript development tool recommendation

SpreadJS pure front-end table control is a JavaScript spreadsheet and grid function control based on HTML5, which provides complete formula engine, sorting, filtering, input control, data visualization, Excel import / export and other functions. It is suitable for the development of Excel-like table programs for online editing on .NET, Java and mobile platforms.

At this point, the study of "how to avoid JavaScript errors" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.