On the server side, whether we use Node.js, Java, PHP, Python, etc., we log requests and errors as text. This is useful for post-mortems on the back end.

On the other hand, sometimes the front-end problems are actually caused by the backend interface error, abnormal data return. In fact, the front end is directly touched by the user, so a problem, the first is reflected in the front end, the first is to find the front end.

To better determine whether the problem is front-end code or interface, Fundebug’s front-end JavaScript monitoring plug-in is recommended here. The plug-in has supported HTTP request error monitoring since 0.1.0.

example

To test this, LET me write a simple example. No complex framework, just a simple HTML plus web request JS.


      
<html>
<head>
    <meta charset="utf-8">
    <title>Test HTTP Request</title>
</head>
<body>
    <h1>This is a test for HTTP request error !</h1>
    <button onclick="loadRequest()">Click</button>
</body>
<script type="text/javascript">
function loadRequest(a) {
    var oReq = new XMLHttpRequest();
    oReq.open("GET"."http://127.0.0.1:8080/example/");
    oReq.send();
}
</script>
</html>
Copy the code

Then, create a JS monitoring project in Fundebug and copy the access code:

The complete code is shown below:

<! DOCTYPE html><html>
<head>
    <meta charset="utf-8">
    <title>Test HTTP Request</title>
</head>
<body>
    <h1>This is a test for HTTP request error !</h1>
    <button onclick="loadRequest()">Click</button>
</body>
<script type="text/javascript">
function loadRequest(a) {
    var oReq = new XMLHttpRequest();
    oReq.open("GET"."http://127.0.0.1:8080/example/");
    oReq.send();
}
</script>
<script src="https://js.fundebug.cn/fundebug.1.0.3.min.js"
        apikey="YOUR-API-KEY"></script>
</html>
Copy the code

Run it directly using the http-server command (recommended tip: install a simple server using NPM install -g http-server.) To access the page, enter http://127.0.0.1:8080 in your browser.

Clicking the Click button on the page triggers this error. In the console of Fundebug, you can see an error message like this:

Click the error to view the details of the error. A HTTP get request to http://127.0.0.1:8080/example/, and then back to 404. Of course, there are many types of HTTP request errors, not only can catch 404, 401, 403, 500, etc.

In addition, the process of triggering an error can also be seen from user behavior:

Cross-domain problem

If a non-same-origin request is accessed, the status code will not be retrieved, meaning that the status will not be 404, but 0. This one hurts!

conclusion

What are the benefits of monitoring HTTP request errors?

  • The first time an HTTP request condition is detected;
  • Inform the backend server of problems in time and respond quickly;
  • When analyzing other front-end bugs, there is more information reference;
  • When users report that the service is not working, they can quickly know the cause of the problem.