Issue 1: sharing nine bugs on the front end


The purpose of sharing bugs

Bugs often accompany me in the development process. If I can’t fix or reproduce them, I will ignore these problems. So I plan that whenever I encounter nine valuable and thoughtful bugs, I will share them together, so as to think about the work itself in an extensible way and constantly improve my awareness. After all, the bugs encountered in the improvement of ability must be different, And if there are fewer and fewer bugs, it can only show that one’s work task and learning task are ‘standing still, and not saturated’. In this case, let’s rely on bugs to witness one’s growth

1: Element UI: El card tag

Bug phenomenon:
One day, the test suddenly told me that there was a bug on a page that had not been moved in the current version. Some data on the page was empty, and some button clicks were invalid
Bug tracing:
First analysis: Well, if there is a problem with the page that hasn’t been moved at all, that is, the problem left over by history or the problem returned by the back-end, then go to check it. But the process of checking makes me dumbfounded. The back-end returns the value, but somehow it has been reporting the error of ‘null value’. Moreover, this is a three-year old project or other project groups. To tell you the truth, the code is rotten and messy, A lot of mixins are used and part of the logic goes into the node_ There are no documents in the modules. At this time, we can only crack them violently. We can trace them step by step with a debugger. After a long time, we found that the key point is that a certain sub component did not get a value, and then the sub component would pass a value to the parent component, which caused some values in the parent component to be empty, thus reporting an error. Looking at the online project, we found no such problems, If there is a problem with my version, someone must have moved the code of this page, or a global attribute of the overall environment has been tampered with. The problem is extensive. Call up the code of the previous version of the current page of gitlab, (here is a trick) commit the current code, generate a cache, and then cover the current code with the code of the previous version, In deff, you can see the difference between the two versions of the code. I found that the original root tag was < div >… < / div >, but this time it was < El card > < / El card >. My thinking was a bit blocked: I just changed the tag, which did not involve any attributes and variables. How could it cause data crash??
Bug reason:
The culprit is thisthis.$parentIt turns out that the previous student used the instance of the parent component to get the data passed by the parent. Then the problem is clear. If the < El card > < / El card > tag becomes his parent, then it can’t get the data of a higher level, so the data is empty and the ‘killer’ is it
Bug resolution:

  1. changethis.$parentFor the ‘value between lines’ form, and test whether easy to use
  2. Find out if there are similar situations in the whole situation and correct them one by one
  3. Find the classmate who added < El card >, explain the reason, and ask if he has changed the code in other places in this way, and give up other projects

Bug thinking:
this.$parentOr is itthis.$childrenIt’s very inappropriate to obtain and transfer data in this way, because there is no clear data source and user, which will make it difficult to check the problem. This “parent-child” relationship is very fragile, and it’s easy to suddenly turn the ‘parent component’ into a grandparent component, and the bug will follow. Therefore, it’s not recommended to use it when it’s not necessary or in a highly encapsulated environment
If you change a piece of code at will, it doesn’t affect your knowledge, but it doesn’t mean it doesn’t really affect you. Don’t ignore the link of “verification”. You need to be responsible for your own code, OK?

2: Antv: line chart flashback

Bug phenomenon:
Previously, ecarts was used to develop charts. In this version, antv was used to develop charts. But strange things happened. The ‘Y-axis’ of the line chart was flashback, that is, the strange arrangement of 10, 5 and 0 led to the chart upside down
Bug tracing:
There was no similar problem before, but this version appeared. There is no dynamic interface at the back end of this version. So the problem lies in the use of this component. First, analysis: is there such an attribute that controls the positive and negative of the y-axis? Go to see the document did not find, the second analysis: go to see the example of the official website, a letter is not bad copy, but still reverse, the third analysis: so the problem is in the data, but the data does not change, so the problem is in the two sets of plug-in data processing mechanism, careful observation and careful observation, found! The original number returned by the background is’ string type ‘
Bug reason:
It turns out that antv will only sort ‘number’ from small to large, and Chinese characters will be displayed in the order of receiving. I’ll just add the group data once
Bug thinking:
Different component libraries have different forms of data processing. Don’t think it’s OK to change the API method of component library knowledge. There will be a lot of ‘original sin’
Through the use of three different chart libraries, I benefit a lot. It’s not the gorgeous effect of the chart, but the thinking of each chart calling way, which makes me understand the design pattern more deeply

3: Regular: forward looking matching vs Firefox

Bug phenomenon:

All of a sudden, the project can’t run on the Internet Explorer, but I still want to explore this phenomenon
Bug tracing:
This time, the order of troubleshooting is not quite right. I first looked at whether the last version could run in Firefox. If I found that the last version had no problem, I would locate the problem in the current version. In fact, I should first look at the console to report an error. However, because the page is blank, I naturally thought it was completely collapsed, or the background returned an error, (next time, we must trace the error information of the console first) that is, this paragraph “syntax error: invalid regexp group” is a problem with forward-looking matching. I used the following code on the filter of adding a semicolon to the value (in fact, what I wrote is to flip the character string and add ‘,’)

export default {
  Install (VM) {// if it is followed by a multiple of 3, then add a ','
    vm.filter('formatThousand', (num) => {
      if (!num) return 0;
      const reg = /\d{1,3}(?=(\d{3})+$)/g;
      return (`${num}`).replace(reg, '$&,');

So if you comment out this code, you won’t report an error? The answer is no, and the error reporting is still going on. I open the vscode search desk and input the forward-looking matching syntax, but I can’t find anything. Thinking… The vscode search desk also has limitations, for example, it won’t go deep into the node_ The search in modules is also for performance, so it must be the newly introduced plug-in. In addition to the problem, the search is really because the ‘3D view’ component made by our own company uses regular forward-looking matching, but in order to better promote the development of the company’s technology, we must also use the company’s technology. Now it’s not a complaint but feedback, Make this problem clear with the visualization department. Fortunately, the current project doesn’t need to be compatible with Firefox, but other projects should pay attention to it
What is prospective matching
Regular is the basis of JS, if the unskilled students need to introspect,? You can also get rid of greedy mode
(?= Exp) matches the position following the expression exp
(?! Exp) matches the position where the expression exp is not satisfied
Bug reason:
The original IE and Firefox browser do not support forward-looking matching

Bug thinking:
Most of the time, we will ignore the compatibility of some methods, and even some plug-ins don’t take care of the compatibility, so we must choose the technology according to the requirements of the project. If we develop plug-ins ourselves, we should also write a good compatibility range for everyone to use

4: SCSS: importing SCSS file is invalid

Bug phenomenon:
We need to change the style of the table globally. I took out a single SCSS file and put it on the outermost layer. But something strange happened. The nested writing method in the SCSS file doesn’t work. We have to take it out and write it like a CSS file
Bug tracing:
Positioning problem: if the nested writing method is invalid, is the variable valid? The answer is also invalid. That is to say, I have no problem importing SCSS files, and the system also parses them, but I don’t know how to write SCSS. Is my SCSS loader broken?? It’s OK to write lang =’scss’ in each Vue file, so it’s still not OK to copy and paste the previous project
Bug reason:
There are two ways to introduce CSS. One is provided by SCSS, as follows:
Using the second method can correctly parse the SCSS file

@import url('./assets/style/animation.css'); //  Provided by CSS
@import '@/assets/style/animation.scss'; //  Provided by SCSS

Bug thinking:
Don’t underestimate the way of introduction
Writing CSS is a very important part of a project. There are two main ideas: Ben and OOCSS. Some people directly write CSS in HTML file, while others directly write CSS in app.vue file without adding “OOCSS”scoped‘is the overall model, of course, these are no problem, but after all, we are engineers who have pursuit, to achieve’ beautiful ‘and’ engineering ‘, and’ color and fragrance ‘is a good code

5: Vue: don’t call the folder bin

Bug phenomenon:
In my last article, I shared how to engineer mock in a project. However, after putting the mock project into some projects, strange errors occurred. First, it can be started normally, and port 8080 is also started successfully. But… The service of localhost will be terminated in the moment of browser access, and forced exit is OK??
Bug tracing:
To tell you the truth, my mind was blank for the first time, and I couldn’t figure out the specific reason. After several repeated trials, I determined the specific phenomenon of the bug. I typed debugger at each operation, but I still couldn’t trace the cause. But the error was reported in the bin folder, and the files in it didn’t run normally. So, is there something wrong with the bin folder itself? Try changing the name? That’s good~~
Bug reason:
Bin this file name is quite special, change to other immediately good
Bug thinking:
Don’t easily use the common system file names. Once before, I wrote my own ccpack, which is also JS’s index file. It conflicts with the index file in the node environment. You can’t call it all index…. you should be careful when naming it

6: Token: where is better to store it?

Bug phenomenon:
Our token has always been stored in the cookie, but recently we are learning about web security
Bug reason:
CSRF attack is as follows: you log in to website a successfully, and B is a phishing website. When you click B, you will send a request to website a to impersonate yourself. At this time, the browser will send it with the cookie information you log in to website a by default. This request can not only use img tag to make get request, but also use form form to make post request, So this token can’t be placed in the cookie, and it’s not httponly. It’s more reasonable to put it in the local storage. Every request is attached to the header, and it’s ready to update at any time. In this way, CSRF can’t get the value of local storage
Bug feedback:
We talked about this problem with related students, because adding token to cookie is the back-end direct operation, but because of this problem, the back-end students have been encapsulated in a unified middleware. If it is modified, it will involve a wide range of aspects, but other ways can play a remedial effect, such as verifying the referer source information, white list, secondary verification and so on
The Enlightenment on this issue is that many core logic can not be formulated hastily and can be better. Why not do that?

7: PM2: restart is not reliable

Cause of the bug:
At present, there are many server-side rendering projects. Most of the front-end engineers use node, and most of them use PM2 for thread protection. After all, PM2 is concise and has its own ‘load balancing’
Bug phenomenon:
In the local and test environment, there is no problem. In the evening of going online, I performed the following operations

sudo -s
CD / home / XXXX / XXXX // / online environment directory
git pull 
npm run build
pm2 restart all

But a strange thing happened. When I started it, it was’ successful ‘. After 2 seconds, four servers became error. (why four servers, because four cores were allocated). I rebuilt the project and started it againpm2 restart allIt’s still invalid. We should be excited at the beginning when the bug comes, but we are all in a hurry to launch the project, so we need to be nervous. First, we need to look at the onerror log. Because it’s in the server environment, we can only look at it by cat, but the log is in a mess. After looking at it for a while, we can’t find the real reason. Is there a big problem with build? Test is good. At that time, I fell into the silly operation of repeatedly building and restart. Calm down. Is it possible that this problem is not a packaging error but a service error? The problem is not in our code, but in PM2 itself. Suppose that ‘restart’ can’t solve the problem, I will delete four servers by PM2 delete ID, and thenpm2 start ./server.js -i 4Restart really OK

Bug analysis:
It’s a good quality to find out the reason from yourself, but you can’t just doubt yourself. You should also consider that maybe other technologies are out of order
PM2 is also just a system. Occasionally, instead of restarting the project it monitors, it restarts itself

8: Vue: the use of the $variable

Cause of the bug:
A set of components developed by the 3D technology team of the company. When receiving an instance, the name must be ‘$a’, not ‘a’
After consulting the students of the visualization team, we learned that $and_ The first variable will not be monitored by Vue, so we can monitor the variable by ourselves, which is more flexible
Use $:
Define the $TXT variable in data and report the following error between the lines < span > {{$TXT}} < / span >:

`Property "$txt" must be accessed with "$data.$txt" because properties starting with "$" or "_" are not proxied in the Vue instance to prevent conflicts with Vue internals.`

You must use “$data. $TXT” to access the property ‘$TXT’ because “$” or “” is not a proxy in a Vue instance To prevent conflicts within Vue.

Defined in data_ Txt variable and between lines < span > 0{{_ The error is as follows:

`Keys starting with with '_' are reserved`

With ” The first key is reserved

Learn ‘bug’:

    return {
    this.$txt = {n:2};
    Console. Log (this. $txt) // {n: 2} however, the value in the span tag will not change

Let’s monitor him

  created() {
    this.$txt = { n: 2 };
    let n = 2;
    Object.defineProperty(this.$txt, "n", {
      get() {
        return n;
      set(val) {
        return (n = val);
  mounted() {
    this.$txt.n = 3;
    console.log(this.$txt.n); // 3

This is achieved: data can be obtained by hanging on the data, but the data is not monitored by Vue, so there are more ways to play, which is a very good thinking
Because my use of ‘a’ will cause conflict between Vue’s observation and 3D team’s observation, so the error ‘$a’ will not conflict
I have given feedback to the 3D team on this technical point, hoping to make it clear in the document to prevent other students from scratching their heads

9: dom: ResizeObserver

Bug display:
I found a problem when using the icon component developed by the visualization team. When the window size changes, the icon will automatically adjust its layout width, but… This icon is 100% full of parents, or flex:1 Full of father, when his father changes and does not start the windw. Onresize event, the mutation does not adjust its width
Cause of the bug:
It only monitors the size change of the window and ignores the size change of the parent itself
Bug solution 1:
I add a CB to the function that can change the width of its parent, so that I know that every time the parent changes, but this needs to be added one by one in the function that can affect the change of the parent
Bug solution 2: limited to Google
The magic sizeobserver is easy to use

    <div ref="wrap" class="wrap">
      <div class="box">1</div>

export default {
   const wrap = this.$refs.wrap;
   //Create monitoring instance
   const resizeObserver = new ResizeObserver((item)=>{
     Console.log ('change ', item) // item is an array, and the changers
   //Invest in the observed DOM
   //Of course, you can remove the observation, and you don't have to worry about the performance
   // resizeObserver.unobserve(wrap);

   border: 1px solid red;
   width: 50%;
   border: 1px solid black;
   margin: 20px;

End: Thank you for watching, welcome to exchange, and wish you progress every day