Alright so this is one of the most crucial questions for me which caused me a lot of self doubt. So I decided to write a little bit about it and help others just to tell how I overcome this. It is noteworthy to mention that I still am facing the same circumstances. In other words, errors nowadays, are so frequent that if you write a code without errors, chances are that you have made a mistake somewhere in your code.
Programming has evolved a long way since the inception of these new web technologies. Many new architectures are being developed and hence the developers need to adapt to those architectures and change their codebases to adhere to these conditions. Software Engineering has come to a point where its handbook states “Change is Inevitable” at its cover page. So many modules are being added to repositories every single day, codebases are modified every second, and modules are replaced as well. This is the world of Software Engineering these days. It is a rapidly changing field which sometimes confuses a new developer who starts his venture.
Simply speaking, errors occur because you have done something wrong in your codebase. This of course, you don’t do by purpose. You do this unknowingly. So when the compiler/interpreter tries to read the code, it throws an error/exception and that is what you see in this horrifying error which I think most of you people have encountered and tampered with before.
So how do we recognize where our error has occurred?
Usually, modern programming languages use Stack Traces to give a brief overview of where your error is. In the previous example, those lines which displays a list of lines is called a Stack Trace. This is a great way of understanding the error and where the error has located.
So the real question is, how do we read this?
Well, you should know that these days, errors are more organized than your source code, believe me.
Stack traces are read in a top-to-bottom approach. Each method in each line of the stack trace implements the method in the line above. Thus, if you’re going to find the core of the error/exception, you need to go through the stack trace and find the cause.
This is the typical error trace thrown by NPM. As you may have already noticed, the last portion of the error does not really depict what the error is. It says that you can get information from somewhere and it describes about error logging.
So, to understand which error has occurred in your application, read from the TOP of the error trace, and not from the bottom. Make that a habit. You’ll feel much more easier to debug the code that way.
NPM actually tells you what the error is in plain English. So you don’t need to worry about understanding the error (Debugging it is another matter which we will come later on).
Java frameworks like Spring, also provides nice error displaying features once they get in touch with the error.
Here they provide a nice stack trace as well for you to go deep into the error.
3. Angular/ React / Vue
These frameworks are front end frameworks. So you don’t have a serious communication between the terminal of your machine and these frameworks. These frameworks use the terminal for themselves only to get built (In production environment) or served (In a development environment). So if you want to find the error trace in these kinds of front end frameworks, you need to check the Browser console.
I have used Firefox and Chrome browsers and they provide a really nice console for displaying error traces.
Usually when you use these frameworks in your development environment, make a habit of opening the developer console (In Chrome its Ctrl + Shift + I) before you send any request from browser to your development servers. That way, you are able to capture all the errors if there are any.
One thing to note here that it is futile to look for errors in the terminal because these frameworks are not going to give you errors in the terminal.
Another tip would be to be familiar with the developer console. It is a really nice tool to check HTTP requests, responses and your response times, local caches, etc.
From the boring stuff to good stuff.
So we’ve identified what is wrong with our code. How do we correct it?
Okay so this is the real deal. There can be plenty of scenarios in this case.
- You might have made a mistake and changed some business logic.
- You might have not sent the request properly (Including headers, parameters, etc)
- CORS issues (Cross Origin Resource Sharing)
- You might have provided an incorrect value for conditional statements
- Passing empty (Undefined) value to the response.
And et cetera.
I follow some general steps which I have adhered myself when I come across these kinds of situations.
- Run a brief check on the incorrect line of your program which is specified in the stack trace. If you understand what is wrong, correct it.
- Using “console.log( )”
Well, this is a simple approach I take. If I have some error with some data parsing, I need to check what kinds of data am I getting. To do this, I generally use
console.log() or, a similar semantic from the language/framework that I work on.
console.log( ) is another great way to check whether conditional statements or specially, callbacks work. Before assigning any attribute in my class to a value which I get from a callback, I usually log it and check what kind of an object it is. I think it is better if you first check a console.log ( ) to a function if it returns a value and that particular value is fed into another function. If the former function fails to return a value, then the latter function will also get an error because of the fact that it cannot get any input from the former function.
3. Check the documentation
This is the most effective method which I’ve came across so far. Sometimes, you write code not understanding or reading everything that the documentation tells you. What happens because of this fact is that you miss most of the newer stuff and the stuff that the documentation tells you to stay away from. If you accidentally do something which the documentation specifically specified not to do, you might have made an error there.
Another good example for this is outdated dependencies. Most of the developers do not go through the blogs of official framework vendors like Angular which they constantly keep updating the community about their recent products and updates.If you’re a web developer, you need to keep track with these updates because the livelihood of your software depends on it. If some core update has came across, you need to redesign your code to adhere to those modules.
- If you’re watching a tutorial series, please look at the comments in those websites. Usually those comments include the errors which are encountered by the people who followed the tutorial.
- Google is your friend.
When you’re having an error/exception which you can’t even solve trying about 45 mins – 1 hr, chances are the same question has occurred somewhere else. This is why these amazing threads like Stackoverflow exist. Check the official website for more information.
When you’re searching in google, be a little smart. Do not copy and paste the whole stack trace because it would not match any regex which the google understand. Make sure you search for the correct terms. For example, in our first example, what you should Google is “Unable to find Grunt File”. It should not include those information which the terminal gives about your directory structure anyway. This is primarily because anyone does not have the same folder structure in your laptops/computers. Make sure to include only the language specific terminology in your search query. This way Google will crawl through and search for those terminologies inside web sites. Always keep in mind that you’re searching for something that someone already has searched for.
If you still can’t get the proper answer, use StackOverflow. It is a professional website for the programming community. But please adhere to their rules and regulations. For an example, do not add similar questions. Adding repetitive questions is one way to get scolded from the community. And make sure you add the proper tags for your question. These tags are used to populate your question in other peoples’ home pages. Let’s say that I am interested in Spring Framework, Node.js and Angular. If so, in my StackOverflow profile, I have given those information. Using these tags, StackOverflow will crawl through their servers and will fetch me all the questions tagged for these specific tags which I am interested in. There are some ML (Machine Learning) and traversal trees involved but let’s not get carried away.
- Ask from a professional/senior
It is noteworthy to mention that most of the newcomers to development lack the ability to seek help. Don’t be afraid or reluctant to ask for help. Nowadays, people have absorbed the essence of what Linus Torvalds gave to the world. That is, Open Source Software. Because Open Source Software (I call it FOSS – Free Open Source Software) are developed using a shared codebase through thousands of contributors, it is very important to have a wide community to get things right. Because of this community, a large variety of websites have been started to help one another within this community. Stack Overflow is one hell of an example for this.
However, there can be rare occasions that you might not get a clear answer. In this case, you are left with only one choice, that is to ask from one of your supervisors or seniors. This is what most of the developers are not good at. Inter-networking skills amongst people is one large aspect that programmers need to enhance their ability on.
Some tips from a “Never Giving Up” developer (He is a small developer – not a lot of experience at hand)
Because of all these new technologies like frameworks and libraries, technology stacks are getting pretty complicated. But you should know that each of these frameworks are built to abstract away most of the repetitive or complicated stuff for the developers. For an example, if you take a framework like Laravel, the main goal of it is implementing a nice MVC web application. So you do not need to lament on the fact that it has a pretty complex file structure. The file structure is a little bit complex because they abstract away most of the stuff that you have to do manually. And since I talked about laravel, I should mention that most of the people use some external server like Apache (From XAMPP/WAMPP/MAMPP) to run Laravel – which is not really required. Use their in built server. You can run it using
php artisan serve.
Let’s get on with this Laravel example I took. Why do people always copy their project folder to high privileged (If you’re using a UNIX environment)
/opt/lampp/htdocs folder? I think that is because they watch a video tutorial first and do the same thing in their projects. Well, this is not the case. Laravel documentation recommends using their own in built server for applications. It is pretty easy to set up as well.
It is quite essential that you read stuff. Reading makes a man perfect. In this case, reading makes a developer perfect. I usually read at least two blogs in the bus when I go to the university. Technology is now so advanced that some of these blogging sites will send you daily emails about the new blogs that you have preferred. Examples for these kinds of sites are Medium, WordPress, FreeCodecamp blog, Angular Blog, etc. By reading you’ll know about other peoples work and you’ll learn a lot about new tech, best practices and how to do things easily.
Elaborating this further, one thing that you have to learn is to read documentations. People are so busy that they want to watch a 20 minutes video and do their whole project – which is not possible. You are left with bad coding practices, incorrect data structures and quite possibly, you can create and remove files which destructs the whole purpose of the framework itself.
So one tip is if you’re watching a video tutorial for any of these new technology, make sure you watch a professional level video. Here are some professional websites which allow you to have a good fundamental coverage for technologies.
- Free code camp
These are recommended by the professionals. You’ll find that if you’re in an internship, the first few weeks they give you one of the courses from one of these sites and provide you with a timeline to do it. People who make these videos are professionals by their profession. Just as a quick exercise, just search for Simon Allardice who is one of the greatest instructors I’ve ever had (Well, I’d never met him but I’ve watched a lot of his training videos) and you’ll know the capability of these professionals.
If you really want to watch a video, or if you want to clarify something, or if you do not understand what the documentation says, it would be okay to reach out to a YouTube video. I recommend these channels.
- Traversy Media – Brad traversy is one of my core inspirations and a great tutor. He has all these positive thinking videos as well. Do not miss to check those out.
- The Net Ninja
But the thing is, what most of the other channels do is just read out the documentations. I think it is better if you’d read it by yourself. This would be useful because many of the youtube videos are out of date. For an example if you use angular Services, now you don’t use Http module which was a core hit in Angular 2. Instead, you use a different module called HttpClient which is far better (I won’t go into details here). But I have not seen youtube videos adjusted even to this little fact. This is not good for coding practice. You must know that these giants like Google and Facebook rapidly changes their frameworks for reasons.
Another thing for I recommend for a good coding practice is to use an intelligent IDE. Well, this is debatable but I think since nowadays tech keeps changing, we cannot write code without intellisense. The codebases are too complicated and there are dependencies flying all over the place. So I think you need a good IDE. One advantage of using a good IDE is that they provide you with this feature where they indicate if you use a deprecated module. And they give suggestions for you to replace it with the newer one.
Here are my suggestions.
- JetBrains – Some of the IDEs provided by them are free. But purchasing the ultimate versions won’t do you any bad. Trust me.
- Visual Studio Code – This is one hell of a text editor. I’m reluctant to say that it is a text editor. I prefer the name IDE for this. It is fast, has a integrated terminal (Which I love) and VCS facilities are employed. If you’re into web development and need a small scale text editor/IDE use this.
- Sublime – This is for machines with low RAM. Sublimes’ codebase is C++ so it is good for your machines.
- Atom – Well, I would say this is okay. But I found out that it runs a little slow. And you don’t have an inbuilt terminal so you have to install a third party one.
Another tip I would give is using Git. Git is a version controlling system and using this, you can keep track on the changes of your project. After doing all the changes you can push it to the main repository and be done with it. This is widely used in Open Source projects because almost all the contributions occur with pull requests. Merging pull requests is the primary way of improving a FOSS project.
One other tip I would give is that always think about your code quality. This is really important when you’re working in a FOSS project. Other contributors need to know what you write. And stick with the overall architecture. Have a good understanding about the architecture of the framework you’re using. Read through their docs and you’ll be able to do this.
Finally, never give up. Programming is one of the most exhausting exercises to perform sometimes. It is not easy. It will let you down, expose you to imposter syndrome, and eventually, beat you to death. But remember that all of these great great programmers walked on fire like you are doing now. They have been mentally down, scolded by their superiors, had to leave their job and starve for days, and had hard times with their code. But the only thing that they did was NEVER GIVING UP. This is the only thing you need to be a better programmer. Always remember that. I don’t believe in all these college/university degree stuff even I am a Computer Engineering student. I’m still learning and I might be way worse than you are. What you gotta have is this NEVER GIVING UP attitude. You gotta do stuff. That’s how you learn. Don’t be afraid to make mistakes. Make frequent mistakes and learn from them. Be smart on searching for answers and most importantly, do not be reluctant to search for answers.
Comment out if you have any questions, or you don’t agree with my opinions. I’d like to get them both. I’m still at an early stage of a developer so I make mistakes. But I like to make mistakes.
NEVER GIVE UP!