Monday Jun. 11th 2018
We have a component which allows users to upload an excel document and generates activity schedules in web pages.
Today, an operational person reported the component didn’t work as expected: it just showed an empty area. What that person did was modified some columns of data.
Having been assigned the problem, I asked the operational guy to make a fresh backup in conjunction with his data for me, and the debug journey begun.
To collect enough clues, I opened chrome’s dev tool to observe if any errors occur. After following same steps, an error came into browser’s console without surprise. It was a syntax error. It’s impossible to investigate a messy data with just a less obvious error message. I copied data to a code format and prettifier tool, now it shows a clear message: “SyntaxError: identifier starts immediately after numeric literal.”.
By auditing the data source, the problem has brought above the surface: the operational guy rename a column data, some of them begin with numbers followed by characters, these columns will become object keys which illegal in JavaScript. After correcting these columns, the component operational.
A lesson I can learn from this bug is we should lay a solid foundation on knowledge. I could have figured out the fault if I were sensitive to those basic language rules.
