How to Understand Code Error Messages (and Fix Your Problems)
Skills:
AI Pair Programming70%
Key Takeaways
Explains how to understand and fix code error messages, including common and confusing error messages
Full Transcript
hey how's it going everyone hello everyone yes welcome to today's live stream on a Wednesday yeah I bet some people are like whew Thank God It's Friday this is not a life coding session yeah yeah but I felt 10 minutes ago as well I was like oh I think it was Friday and then I thought oh no it's not Friday sorry to disappoint however we will make up for it with today's error message workshop yeah yeah we've all been there as coders error messages are annoying every day and often not helpful they're not something that's really taught that much we thought yeah people don't have to deal with it yeah yeah these are error messages and when you come across them well good luck finding out what it is which is why I've asked Michael along today yes because as a senior developer yeah man he has more than five years in the industry now oh really yeah I've seen many many error messages oh many and fun fact partly that's why I have short hair because I've been pulling my longer hair so much reading all the error messages it's not actually joking yeah so um in the next hour we'll give you a message masterclass and Michael's gonna compact his five years of knowledge into one hour and I've never promised that but we'll do what we can we'll talk about the most common error messages confusing error messages saying that's all of them there Michael's today error message Odyssey that was fun that was fun how to troubleshoot error messages HTTP status codes error messages you can ignore error messages you cannot ignore how to show errors to users and my personal favorite so-and-so isn't a function yes I get that all the time when I know full while it is a function and it drives me nuts and uh some resources for understanding error messages yeah they exist who knew but of course we do these things live so that you can ask the questions you want the answers to so any questions or comments about error messages put them in the chat and we'll do our best to address them the first use a big hello to all of you who have dropped him Carlos computer says no yes think that's a good summary of this entire screen yes Mohammed is back Turner stream no turns to rent will there be a bit of this stream they will there's a bit more about trips um happy Wednesday to candy coat everyone say to you too and Freddie is here and many others of you timsey Mesa oh our code reviewer Mika good to see you here as well and Wesley who says error messages are making me crazy let us know which ones yeah let me know where you're tuning from always seems um always interesting to see that so uh yeah give me a shout with a flag if you can yeah or just a comment first how can we find out Michael what the most common error messages are let's talk about in JavaScript oh I think well I would say that probably the most common ones I've found are usually something like properties not defined or um you're trying to reach for something and it's just like uh like for example there is no property XYZ of undefined and that just usually it's usually um like for most beginners It's usually the most confusing one because it doesn't particularly tell you where it might be especially if it's like a very common object like for example like authentication context or something and it could be anywhere in your code so it would be quite useful to start reading what property is being accessed and preferably there is a file reference and stuff uh but I think the most confusing part is when this JavaScript error gets thrown to you as a response to the API and in which case uh you have no idea what went wrong or how to fix it and stuff like that so do you mean you don't have an idea if it's if it really doesn't exist or it's not defined yeah well accessing it in the right way like in a way with if it's inside of your code and you see that error then it would be a little bit easier to track to trace it down basically you know you're you're expecting that an object should be there when it's when it's not so you need to double check your logic to make sure that it's actually there as you expected quite often when I get that one it's because I think I've set a variable but yeah I've forgotten the keyword so you might just say it can't blah equals yeah like you haven't extracted it properly or the distraction syntax didn't work out the way you expected it or something something along those lines uh but if you for example call an API request and all of a sudden you get the error message because they didn't quite check their errors properly and they just throw an exception back at you uh then there's not much you can do to debug that because it's not your code it's somewhere else and they have that error so you're just trying to frantically see which particular property that you send causes this and stuff uh can you debug with an API then I suppose when I've had lots of trial error docs yeah message the developers uh overflow if it's yeah and other people would have run into the same thing hopefully yeah it could be it could be you it could be it could be the API itself so you have to kind of find a way but suppose if it's a well-known API or at least you know that other people are using it you can be fairly sure that it does work so it's you yeah yeah if it's unfortunately yeah if it's if it's very well known API like for example GitHub API is the most common like learner API that people advise to use because it's uh most similar to the real world uh kind of thing that you would have to interact with in life and it's very well documented so it's usually yeah yeah it's usually very well documented so people say basically it looks like it's a proper rest API and at the same time most race apis don't have very good docs so for example you go to work and there is some obscure corporate API that you've never used before and they say hey you need to integrate with this yeah so this is what you would recommend for kind of practicing apis in a realistic way is it yeah pretty much like whenever whenever you would be uh chatting about rest with uh in interviews uh people would be mostly thinking about something like GitHub API interesting yeah they're they're arrested however question from I need Gray he troubleshoot in the terminal yeah I'm from New York by the way yeah well I mean again it depends like what you what areas you get so you can get errors inside of your program you can get errors to do with like if you're working with JavaScript it could be errors to do with npm it could be some script errors so for example you have some script setup scripts written in Bash you can get errors there uh so you know literally on every step there could be errors anyway like even your laptop itself there might be something wrong with it I think I've heard that before actually but in the end I don't remember what it was so this won't be very helpful but in the end it was something with my machine that was blocking stuff so yes always worth trying stuff out on a different machine if things get really bad hahaha yeah interesting Wesley says so if the API docs are good it's you if the API docs are horrid it's probably them uh no I would probably say that uh the API talks could be good and you can still find a bug um because you know people change an API forgot to update the docs it can happen can happen uh but most of the time you know the more used apis so for example you're using GitHub or it's like a Google Cloud API or AWS API or basically any kind of very large high volume API at that point uh you know before you write that support ticket to the company you should probably double check that it's not something on your side good afternoon all it says Dave which reminds me of our weekly pop you are new to sprimber live stream please put a bunny rabbit into the chat if you've been before hit me with that tiger I think someone already did actually hello Angel and wave hello to you and hello to everyone watching the replay in the future yes hello from the past so let's talk a bit about confusing error messages some error messages are pretty easy to understand some are not yeah why is that and what can you do when you come across one that doesn't actually help you uh uh I would say that usually the confusion of an error message comes from uh unexpected context so if you if you go to like for example if you go to Twitter or you go to any other website and all of a sudden instead of like a 404 page or some error page with description of what happened you see something like I think I went to the last time 20 hours down or some website was done um it was saying something so obscure like some very system level error something like uh yeah that usually uh you probably remember an outage which was probably a year ago where people were saying it's cloudflare Cloud for let down and it was like 50 of websites on the internet went down yeah or something was that when Facebook locked themselves out because they I know because relied on it that was that was a different one but when clever went down there was a very a lot of websites had very cryptic error messages to something to do with like uh XYZ not available like check cash or whatever and most people had no clue what it meant and quite frankly even I had no clue what it meant because I never delve that deep into like networking and stuff but I think it was something to do like with a networking error with uh like CDN or I don't know DNS setup or something uh and basically usually that's what's confusing you don't know if it's too far deep away from you and this area just bubbled up it usually confuses people so for example when you get uh undefined errors in your JavaScript code you're kind of expecting because it's about the same level where you're working but if it goes further deep like for example you would get some kind of Linux kernel error or something you would not expect it and it would become really confusing so it's kind of nothing to do with you really and there's no real way you can fix it I mean it could be to do with you let's not like uh but because it prompted an error somewhere further deeper than you're expecting it uh it kind of creates this imbalance of expectations to your life it's something to do with me I somehow found it but I don't know where it's coming from so if you're for example a front-end developer and you get some very obvious react error even on the website that you know very well it's not going to cause you that much problem because you know exactly where it's coming from and roughly what causes it uh but if it's further deeper away from you it would become more and more confusing I think that's kind of what it means so what's the solution then I would say that unfortunately for you as a user there is no solution but for you as a developer the reason solution uh when you write error messages try to explain why an error is an error so why could it have possibly happened so for example if you are writing some kind of validation on your website and the user has input wrong details try to explain the user why that detail is wrong or where you have found it so for example the user ports uh some kind of details into your form uh I don't know you're booking football matches or something and then you know the user instead was trying to book on the wrong date or something similar there is no football match there you know don't return them invalid date because that makes no sense to them they don't understand like what's what's invalid about the date is it the format of the day that's invalid is it like what Fridays don't exist what does it mean uh so you should say like for example uh you trying to book a football match on this date but on this day there are only basketball matches or something like that you know helpful that after reading your error message user at least knows roughly what to do rather than click away and try again to see if it works or not yes we've all been there like especially in things like forms which is yeah I suppose if you're a front-end student that's the kind of thing that you're likely to come across the most when it just either doesn't do anything it just doesn't submit or it just says form cannot be validated and you're like yeah okay exactly is that me is that you what do I do with this and if you're a frontier developer you have a very tricky job of trying to translate back and errors into something very lame on times for the end user something very Universal that your end user will understand someone who has no technical background whatsoever yeah you'll still need to explain to them why something cannot be saved uh or something along those lines candy coat says I've found the cause of many an error by copying and pasting the actual error message into Google have fun yes yeah it does work with a lot of problems but also you're like eventually after doing this you will start finding the patents where the air is too generic to give you any meaningful result and in which case before copy pasting the error message into Google I would say I know this sounds super trivial but you know it has given me heaps of benefits actually sitting down and reading the error message line by line I know it's it sounds awful and excruciating and it's really impatient to just copy and paste it but like just sitting down looking at the screen and reading line by line what the error actually says a lot of it is rubbish but sometimes there will be one or two sentences or like a file name that you recognize and you're like ah I know exactly what that is and then you know you'll basically save yourself from Googling also reading your own code because quite often you think you know what you've written but then when you actually go and read it as though you're reading something for the first time you've missed things or you're like oh that's like Mr line or whatever yeah interesting um I have a question sometimes you get error messages and you see the same error message over and over in the console do you know what I mean it like shows you the same one oh 80 times so why is it doing that um it depends it could be that uh my story time to be honest it could be like you have some kind of uh cookie blocker or something yeah and uh the the pop-up is trying to work but it throws an error saying that you couldn't work because it got blocked or you know some because there are a lot of script blockers cookie blockers and so on so most of the time uh it could be something to do with that or if it's your error that gets constantly shown for example in the react uh app it might mean that you know component tries to be rendered it encounters an error so it tries to get re-rendered and then that area enters into the loop and they eventually disappears because react is clever enough to kind of stop the endless loop for you uh but you know it could be something to do with that yeah and apparently I've got some interesting news maker is learning Java finding it incredibly difficult however the error messages are super helpful so you know in your experiences some language is better on the error message helpfulness level than others uh yeah um it could be like some languages are a little bit better with certain types of error messages yeah like I personally don't have much experience with Java like I would say C sharp is pretty good um although some error messages like to do with like accessing wrong item in an array could be a little bit obscure for newbies um uh JavaScript is like notorious for the undefined areas that are super unhelpful um and also like error stack traces so for example an error occurred in a certain bit of your code and then basically the stack Trace is where it lists all the calls they have done to reach that error uh and I noticed that a lot of different languages have different ways of formatting it um so some languages can be again I wouldn't say that some of you have better than others but some people find some languages are more intuitive than others like I know that I know people who say who tell me that golang has amazing error traces but I really struggle to read them uh so yes who knows Vegas says it tells you exactly where the error is yeah which is interesting because yeah JS says it does that but then you know it tells you that error's online 13 and then you go to line 13 and it's an empty line and you're like well yeah that could be uh yeah that's kind of the peculiarity of JavaScript ecosystem because like for example you write typegrip and then that gets transpiled into JavaScript so when you read the JavaScript error message that is uh your kind of that is not corresponding line in your typescript necessarily it is like the version that is the transport version of JavaScript so you should go into your it's probably like dist or bin folder find that Javascript file that it's complained about and then find that like there although cool quick caveat that it could be it could be minified so it will look awful and it will be hard to read it but you know this has happened to me in vanilla JS but sometimes it's a missing end bracket or something cool yeah easy enough to resolve but yeah also that you get used to stacker traces uh in any language like as long as you spend and actually read the error messages from time to time you can kind of get used to it nice Daniel says can I just cancel log error to string that would be nice yeah Eric don't make it make sense um um you're well kind of on some on some you can and I think that when we talk about errors it's also useful to see you know it's a very generic concept uh you know areas just something went wrong but things can go wrong anywhere uh in the stack and then for example uh it's sometimes useful to learn other languages to see how they treat errors like in JavaScript uh errors are usually uh Throne while I quite like that Daniel says uh kind of just console log error like for example golang doesn't really throw errors you kind of just pass them about until you decide where to show it uh that's kind of like an expected pattern in the language that you always have like most of the time you get two values which is uh like the value that you want or an error and you always have to handle both it's quite quite neat pattern but I think uh probably somewhat similar to try catch that people do in JavaScript but then usually what like most tutorials that we do like we usually go like try execute function catch error and then in a catch we say Throw error so that's not quite catching you're just like literally dropping the ball further down oh well candy code says npm error messages give you a lot of information and usually give you the exact cause of the error well that sounds good yeah and pure mirrors are pretty good uh I will tell you if you are from someone familiar with a webpack those errors could be good but again like all tools you have to get used to the language or the errors that is used in those tools and if you're just getting started with the tool it's kind of expected that a lot of Errors will be really confusing uh it's kind of as I like to often say that as a developer you get paid to be uncomfortable a lot uh so if doesn't that just describe work in general oh yeah yeah probably I mean I'm not uncomfortable yeah DT Lola says failed to load resource the server responded with a status of 500. this is the error I see now mainly for react projects it's annoying because there's no suggestions after the error message yeah interesting what does this failed to load resource mean I get this quite a lot ah so that kind of that again you see this is a very generic message uh that it really depends on the context where that message occurs so it's like when you're trying to open a website and it gives you that or is it when you're trying to call an API within react project and you get that error uh so yeah a little bit let's go with the second scenario what could it mean then uh that could mean that you have made a request and like if you are making a request API and you get a 500 error it means that you have found a bug in their system so usually yeah usually if you tell uh in react system no in in the API no right yeah because uh basically it's like consider you either return people 200 and the correct response or you return them at 400 and explain why something is not the way it's expected but at 500 response from an API usually means that the server tried to process your request something went wrong and it basically it fell over itself so he didn't handle some Edge case that you have provided so this brings me on nicely two TTP status code yes this is the same thing right yes right so we've got 500 which is what you just said but basically I think that means internal surveyor 400 is what can you run us through the ones you know and come across regularly feel free to Google so I would say well 200 is okay two one created 202 accepted uh 203 I don't think so either something two or three is there maybe it is but I don't remember what it means two or four no content um 302 I think means moved okay okay yeah let's let's see yeah Okay 201 Creator two to accept it oh no authoritative information okay I've never used that one see you're like what does that mean so okay uh here's the thing um the best thing is usually when people go HTTP status codes uh you come across like that kind of list and it's not very descriptive so I would I would recommend my favorite place uh is HTTP RFC I mean you just Google HTTP rot the first one that uh hypertext protocol probably the second one yeah the later one 2014. so uh it's super style I know I know look okay I know what you're all thinking it's a bit dense to read but it's actually really good what is this so this is an actual location no this is an actual uh like underlying dock for HTTP 1.1 protocol so yeah well the PE in HTTP is protocol but never mind uh it basically tells you how to use methods correctly so like get post put delete and stuff and then the other ones it tells you like how to negotiate uh content and stuff like that how to do Authentication uh and then there is part six which is response status codes and it's really well laid out when to use which well I say it's really well laid out sometimes it's a bit like you have to argue a bit like a lawyer about it but most of the time it describes you know it gives you a good rule of thumb what to do so if you're not entirely sure which code to use I would just go to this RFC and read up roughly what you want to use so for example we are saying yeah uh so you see like in the what was it HP stage scopes and then for example yeah two or three normal hurricane information so I think yeah okay so two or three is here you can go in there and then it will explain to you that two or three status codes indicates their request was successful but on close payload has been modified from that of the origin server so effectively effectively what that means is that you have requested something and whoever has given it to you has modified the very original thing this is kind of like I asked person a about something but person a actually went and asked you about it but then instead of just giving your response person a kind of really told the story a little bit as maker says two hundreds of the happy coats uh yeah and like the beauty of it it's very well sums them up as well so it's basically successful r200s redirection our 300s client errors are 400 so it's basically the areas that I've got handled for you and they are usually the ones that give the reason why something is wrong 410 gone yeah 14 is gone that could be anything well actually well there you go is it anything uh 410 status indicates that access to the Target resource is no longer available the origin and that this condition is likely to be permanent so basically somebody has deleted this forever he likes yeah is it you will not find it that's it but how is that different to 404 for example so 404 is like you're trying to access something but it just doesn't exist but for 10 you can use if you want to be a little bit specific like well you're asking for this it used to exist but don't ask about it now like we don't talk about it but if it's really deleted how would you be able to tell that it had been there well because you there is like a hard delete and a soft delete so self-delete is like it's marked as deleted but it's still saved in database it's just not returned to you or there is some record of saying that it used to exist but we don't have the details anymore so when do you actually use these codes uh well it depends on your context whatever you're trying to write so for example you have an API request so for example you're requesting user details right so you're like uh oh there is a user Michael who is it like get Michael you know like get slash people slash Michael and then for example if you found Michael you say okay uh and if you didn't you would say foreign or like for example uh well we don't want to talk about Michael whatsoever gone like he doesn't exist here and never will be 46. and then for Alexa for example 500 It's usually the errors that indicate something like for example if you call an API and it gives you a 503 then it means that it's down while if you get a 500 it usually means that the inputs you have provided caused some error on the server um so yeah it's uh well like 501 for example that usually means that you call the name point but it doesn't exist so you're calling the wrong one you should check docs once again to see if a page like that exists so what do these codes actually do or are they just literally codes to Express this information do they have any other purpose other than that uh uh yeah it's basically in these codes think about it like a very big traffic light you know so it basically like what's the point of traffic light codes like red means stop yellow means get ready and green go uh so it's somewhat similar in that way how often do you use these all the time yeah well I work as a back-end developer and yeah I use it all the time well as a front-end developer I used to use it all the time as well uh because when you request some information from the server it's useful to know what's actually going on so for example um if you requested for example if I am building a screen for a UI then I would have something like four or four not found like I request users to display a page and I get a 404 and I found so to the user I might want to show a corresponding page saying like you tried to request this user but it doesn't exist or for example like with when you're writing a form right and then you submit a form you might get 200 or 201 or 202 and then you show a corresponding page saying congrats you have just did something it's very good for you nice yeah Earth Dave says that is simply 406 not acceptable that's how you could practice these only communicate with HTTP codes so 406 more acceptable status codes indicates Target resource does not have current representation that would be acceptable to the user agent ah okay so this is when you request something and you say I want to get adjacent but they say well we don't have Jason we only have XML so you would get that thing saying not acceptable or like for example you are sending Jason but it wants only XML or you're sending XML once onto Json well basically whatever interesting and Elias wants to know should you know all status codes without reading the docs how many are there and not not that many uh you can remember them I I would say that I probably you can not that many yeah I probably remember some uh but I wouldn't say everyone will all like I don't remember any of the 100 so a couple here uh none of the 300s a couple of four like I would probably remember that far and that's kind of it and then well then a couple of 500s yeah this is basically all of them that I will remember nice I'll be testing you on that really I hope not error 420 is that actually one uh no I don't think so no no actually there is one seriously Skips from 417 to 426. why does it skip there is uh let me see uh 2.8 oh I've heard of this oh it's 4 18 okay sorry it's not uh it's I think it's kind of uh beneficial HTTP I think it used to be like uh an April Fool's joke but I think they accidentally made it uh like into the actual spec I know that Microsoft does support it officially okay yeah nice yes um if you're working with apis they're knowing status codes is fundamental no uh understanding them yeah I would say I would say the understanding what they mean and like the use case for most used ones I suppose but the rest of you can just look up in the RFC because it's like a lot of things in code you don't actually have to know it yeah off by heart but as I said you know it's a bit of a dense Doc and it takes a bit of reading to actually understand what it does uh but generally you know if you do you should get get along quite well nice let's talk now about fatal errors okay I see this sometimes yeah and it seems scary where that yeah context is important it's not that scary yeah usually it just means that something broke but it's not on your computer so it's good what is what is a fatal error fundamentally uh basically whatever process was going on didn't finish and occasionally some uh OS was Operation system errors are usually like Windows specifically likes to say hello so for example like if you're running a browser and it quits it usually says fatal error which is very dramatic yeah and to be fair it was Faisal to the browser that was running and no longer is yeah but it's not fatal to the user you know yes so this is going back to what you said about it's saying errors in a way that users understand yeah exactly so like uh I noticed the other day that for example when a browser like quits in on MacBook it just says the browser unexpectedly quit and it's kind of a little bit better because it's actually what happened yeah uh although it doesn't tell me why that's the problem I mean that is kind of a problem I'm not gonna lie but it doesn't tell me why that happened a bit but maybe because it doesn't know uh but yeah like when you're writing error messages also try to avoid this like really dramatic or worrying language uh like try to explain in plain terms why something happened and what to do to fix it um good price oh no one of Dave's groomer mugs had a fatal error yesterday I dropped it and the handle broke into three pieces only to handle I don't know that sounds like a partial error oh yeah you can still use it yes Pavan asks for the front end any status code apart from two and three hundreds are considered errors right is that right um again they're kind of like the client error and server errors is it this yeah yeah so the server errors are the 500 ones and the client errors are the 400 ones so for front end any status code apart from 200 and 300s are considered errors um yeah but generally like for example if you get a 200 then you're proceeding to show some information to the user with what they're asked about redirection means that you just need to make another request so for example um if you get if you call for like slash people slash Michael and it says permanently moved then it means that you now need to request another API so like another endpoint so instead of Slash people slash Michael is now slash people slash one two three you know um so what are the 100 ones for uh so one continues seems kind of yeah so continuous which protocol usually these would be handled for you on a browser level so as a developer most of the time you're not going to use it but like for example switching protocols usually means that uh you requested page in like HTTP I think and it tells you that you should basically the browser will switch it out for you to https or something here so it's switching to all like a newer version of HTTP so like an API receives a request in HTTP one one but it says switch protocol to two because reasons so that's kind of what you might want to do good to know and question actually this was a while ago from Wesley the word deprecated when this comes up in an error message what does it mean and what can you do uh I would imagine that this happens when you do something like npm start of your react app and it says deprecated so I think Leanne wanted to talk about error messages that you want to ignore oh yeah and uh here we go that that could be one of them like for uh because it's not I mean again it depends how much you want to learn and uh how bothered you are by it uh but usually there are reasons why in create react app or something those error messages are so persistent because there's usually some dependency that it's really hard to switch out of uh so create react tab takes a long time to fix whatever is causing this deprecated message basically at some point somebody has changed some code and said please use this new version and this not this old version because there's something wrong with it and then they put deprecated warning messages saying you have sometimes a switch because it's either bad to use it because there's some bug or there is some vulnerability or it's easy to hack it uh and you should stop using it so basically those messages but you can usually just like read you can't even know those sometimes you can ignore them because it's like switching so for example react tells you uh you know you're using a really old version and it just says we no longer want to support this version uh it's not deprecated please don't use it just switch like there is nothing no vulnerability with it everything works but because people are moving along and they can't dedicate people to support old stuff they just want you to stop using it Internet Explorer type of vibe I mean there are more probabilities than exploring than just Microsoft's not wanting to support her but yeah effectively hmm good to know so what about the error messages you should never ignore error messages you should never ignore are usually the ones that stop you from getting something done so you know like uh you're trying to build some kind of app uh and then you're getting some kind of webpack error and then you can not really go any further until you fix that then you you should never ignore those because you can't really uh but usually like vulnerability like security security errors are usually not something you should ignore um what do they typically look like uh so I would say that uh for example when you do hmm like audits like for example your company occasionally would get um and like pen test where people explore your vulnerabilities and they usually tell you what's wrong with various aspects of your application uh those that are marked severe you should not ignore or well I mean to be fair you shouldn't ignore all of them but again it's uh it depends on the circumstance yes candy coat mostly ignores reacts warning messages I like to live dangerously yeah I would say most of the time people ignore npm errors uh react errors uh like node Pap errors you know the build tool errors um you you can ignore them like for example typescript builds usually people ignore warnings from them even though quite often it usually specifies like it tells you about an error that is wrong with your type and that actually oftentimes I remember a couple of times we fixed those up and we said actually that that did save us from a couple of bucks fixing those uh so yeah could be quite helpful and at least have a read about all of those errors and then you know if you either don't quite know what to do with it or you decided that it's not an important warning you can then ignore it isn't it react will completely break if you miss this semicolon so you can't figure out even the tiniest era says candy coat and then Dave says I do not like react I'm learning it like a demon just for the job prospects but I much prefer for you what's your take on that do you think react has a lot more error messages than other alternatives it's embarrassing to say but uh I've only really used react on the job I have never used actually no I haven't written a little bit of you but that was like just pushing a bug you know like slightly updating bits and Bobs nothing major uh but mostly I only work with react um yeah it could be a little bit tricky sometimes with with errors it could be they could be sometimes not very helpful but I noticed that a lot of react errors are usually just JavaScript errors so it's like once you get used to JavaScript errors react errors would be a little bit easier going back to our status codes Andy Wood asks yeah what is best practice when returning an HTTP status code when building a rest API for example what other info should you provide uh okay so well I'm so glad you asked so going back to the HTTP RFC I'm telling you it's it's a it's a gold mine that people are just purposefully ignoring and are they or do they just not know about it I mean maybe maybe they don't anyway yeah ah come on what are you trying to do there's this scroll bit go with your finger ah but I don't want to oh there you go I want to drag it to you there you go ux issues aside yeah so uh for example you know you are returning something like you're returning 200 okay yes that's what we would be returning so in 200 UK it says something status in the case request was uh has succeeded the payload send depends on the request method so payload is like your body uh for the methods defined by this specification the intended meaning I mean again it's a bit full of legal speak because it's like you know an official standard but you know in simple languages get uh gives you your position of Target resource which basically means when you get you return whatever you've asked for post you send a representation or result obtained from the action so basically when you post something it tells you that you basically you return back to the user where you have saved or whatever happened in the very end so you need to send the result of it and then put a delete representation of the status of the actions so for example if you send a request with the lead you don't need to return a body with it you just say you need to return the status whether it has succeeded or it hasn't so basically you know related or not deleted yeah so usually people go on stack Overflow and then you can see there is this whole holy war about what is supposed to happen and whatnot so you can you know circumvent the core flow and just read you know at the source what what you should or should not do if it's still ambiguous uh then okay fair enough go to the whole flow I hope that helps yeah hope that helps yes Dave is often found that some error messages a due to an extension installed in my browser oh yes there isn't it a flag and chrome stop playing videos in udemy no errors just no playing videos yeah yeah it could be sometimes you get another error messages yeah it's quite often worth um trying things out in incognito yes because you don't you don't have any plugins in there yes good stuff and that's helpful thanks says Andy that's good um X is not a function uh I get this in JavaScript quite often see if you are trying to call a variable that is not a function you will get X is not a function no it's I know this thing is a function usually one of the built-in ones I think it's because I'm trying to call it on the wrong thing yeah like sometimes if you're trying to for example use uh fetch in node.js like on a server it would tell you that it's not a function because fetch only exists in the browser hmm so usually when you get that error you have reached somewhere in the code where whatever you're trying to call cannot be called so you should go back to the stack error and try to find out what we're actually doing I think I've had it in just JavaScript where I tried to run let's say to stream right ah well in that case Okay name a variable dot to string and then it says to string is not a function and I'm like well yeah so that could mean that for example you tried to I don't know like a Boolean or something I actually don't remember is bullying is there two string on a Boolean I don't I don't remember let's see come in now true Dot okay there is one door two string I think a lot of them have a lot of them have uh maybe if it's already a string ah for example okay that still has to stream it affects taken gut aha so const a equals a DOT two string okay that's another one we should talk about object object so yeah so you can huh interesting okay maybe two string is not but for example two number right and you call it yeah there we go there it is yes it's not a function foreign so we know that actually is to number a function I don't think it is it's not that's what that is one crazy but if you're getting an error on that something is not a function you really need to look at what you're calling it so you have a function that you're trying to call on this thing on some object number Boolean whatever some entity you need to have a look at that entity once again and then double check because there is quite a big chance that JavaScript is correct and what you whatever you're trying to call is indeed not a function well I've definitely had it though when it is a function and I've used it in the same code previously and then it says you should you should send it to me because I can't I can't think of a good example how to replicate that yeah let's go back to this object object yes so uh uh was it a a to yeah oftentimes when you for example there it is yeah if you want to maybe consoled off log okay so in Chrome it's actually clever enough to show you the insides of an object but when you're for example write in node.js code and sometimes I saw that somebody say that console log is the best debugger so for example the only one as far as I'm concerned but so sometimes you write in your node.js code you would go something like I can't a log and then you just put this object and then you look at the command line in your terminal uh oops sorry yeah and then instead of console log a instead of showing you like a night object like in the browser you would get yeah like object object yeah you would get something like similar to this it would just say looking at object object and you're like ah what is this what's inside of that object well basically what JavaScript does is just in in the server it calls this tostring method on the object uh but what you really want to do is you want to see inside of that object so you want to have a look at the properties of the object which means that I think most of the time you actually want not to console log but you want to console there it's an object and then it should like output what's inside of it with like properties and stuff can you also use that three dot thing three dot thing [Music] what's that called I don't remember so like hey why am I called one something like that like hey okay so and then what did you say find an object maybe it's not an object there's this [Music] another thing uh not on an object you can do an array no it's under an array yeah you can do it on an array or you can if you want to disrupture an object into another object yeah you can do that mm-hmm anyway good stuff yeah so when it says X is not a function uh quite likely it's not um people say I love react sometimes it's a method on a data type that's different to the one you're trying to call it yes yeah I think this is what I've had so quite often you expect that something is a number but it could be a string or you you expect a string but it's a Boolean or you know it could be just basically you need to convert it to the type that you want and then call that method that's what it usually means that's exactly what it is you're calling a function that's not allowed for example if you want to map an object versus an array type error yes there we are yes more issues with react they're a mismatch oh you have a dependency I think that's what puzzles me about this X is not a function because it's not really like it is a function it's just not yeah I expect I expect it to be a function but for some reason it's not to number is not a JS method no it is it is it yeah it is a GS method is it well that's what Elias says it's not they sounded all right the other one says it's not I don't think it is spread operator thank you yes that was me I said it yeah cool I don't know what you said um hello there let us know again yeah I'm not yeah I think it got buried in the comments and we can't find it um resources for understanding error messages I came across I don't know like read your console this recently oh wow mdn Jazz crypto reference list of Errors oh wow I know I never knew the success did huh reference error X is not defined you strict not allowed in function with non-simple parameters I mean if I read that I would be very confused oops here we go um yeah I don't know if this is all possible ones it wasn't available but it's a lot of them you're straight not a lot exception you strip not allowed in function occurs when you straight directives used at the top of a function with default parameters rest parameters or distraction parameters oh I see interesting huh oh I see how interesting well I'm definitely bookmarking this resource never heard of it that's amazing yeah tell me you live alone and I found another one the most common ones top 10 most common JavaScript error messages syntax error expected or missing Ah that's that's a common one yeah are they actually the same uh well they they mean the same thing but it depends on I think depending on the browser it basically will give you expected or missing word itself okay well unexpected end of input or missing thingy yeah these errors usually come up like when you forgot to close a brace uh or a bracket somewhere yeah X is not defined X has no properties no is that no it is unterminated string constant time for these messages mean you begin a string literal with a quotation mark but forgot to close it really so you see what I mean unterminated string constant why not just say missing you forgot the missing you forgot the closing quote there's no consistency yeah anyway you can check this out enjoy um one final thing not related to error messages I would like to share because this extension tab modifier I discovered today you know when you have several tabs open and maybe they're all from the same site or maybe they're just don't really explain what's in the tab in a way that is easy to understand cool well now yeah Michael's listening you can use tab modifier to change that for example I can go here rename tab top 10 errors okay oh clever wow yes that's nice um tip for the week here's the charge of writing this error message verbiage yes very good question indeed I think it's written somewhere in the spec I am pretty sure the when when it sounds so legalese it's usually a specification error uh specification wording so people are trying to like how can we make this to sound as unambiguous as possible and as a result and to have achieved the opposite and that yeah it's usually the absolute total opposite unterminated string literal next Friday not this one the following month Michael and I are back coding a JavaScript number guessing game that will be fun I hope you can join us for that yeah how do you how do you code that what do you mean I'm kissing game oh I'll see sorry it's surprising like you input one and it says higher and your input three and it says lower then you input two and it says you've won huh that sounds nice but a little bit more complicated maybe we'll go up to ten whoa and then the following week I will be joined by rocket Scrambler designer to talk design tips for developers oh that'll be nice indeed any closing thoughts Michael uh usually I wanted to say enjoy your weekend but I guess you can no you're going to come up with something original yeah enjoy the rest of your week yeah if you enjoyed this please consider giving us a thumbs up and hitting subscribe so you don't yes future streams that's all we have time for will Michael have more hair no because I have a lot of error messages in my code so uh yeah no I can't zoom because I'm just sitting there doing this but now I can so you know I'm not like it's kind of gone this far and it's not going any further so I'm happy with it I'm happy with my short haircuts [Applause] my closing thought don't be afraid of Paris yes correct words yes embrace them and read them yes I might get that as a poster on the wall behind me don't be afraid of errors michaelian are always good times thank you everyone see you next time I just hope Pilots are not watching us foreign [Music]
Original Description
🎓 View our courses: https://scrimba.com/links/all-courses
In this live stream, senior developer Michael shares his advice on how to read and understand code error messages.
We'll talk about:
💻 The most common error messages
💻 Confusing error messages
💻 Michael's two-day error message odyssey (it was a journey)
💻 How to troubleshoot with error messages
💻 HTTP status codes
🪦 Fatal errors
💻 When to ignore error messages
🚨 Which error messages you should NEVER ignore
💻 Showing errors to users
💻 "X is not a function" 🤬
💻 Resources for understanding error messages
ABOUT SCRIMBA
Scrimba's goal is to create the best possible coding school at the lowest possible cost for students. If we succeed with this, it’ll give anyone who wants to become a software developer a realistic shot at succeeding, regardless of where they live or the size of their wallets.
Learn more and sign up for free 👉 https://scrimba.com
🌳 Scrimba’s Linktree: https://linktr.ee/scrimba
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Scrimba · Scrimba · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
CSS Grid Course: Learn the Basics in 3 Minutes
Scrimba
CSS Grid Course: Positioning Items
Scrimba
CSS Grid Course: Why Learn It And How It Compares To Bootstrap
Scrimba
CSS Grid Course: auto-fit & minmax
Scrimba
CSS Grid Course: Implicit Rows
Scrimba
CSS Grid Course: Fraction Units And Repeat
Scrimba
CSS Grid Course: Justify Items and Align Items
Scrimba
CSS Grid Course: An Awesome Image Grid
Scrimba
CSS Grid Course: Named Lines
Scrimba
CSS Grid Course: auto-fit vs auto-fill
Scrimba
CSS Grid Course: Justify Content and Align Content
Scrimba
CSS Grid Course: Template areas
Scrimba
27. Setting up the structure - Responsive CSS Tutorial
Scrimba
25. Making the navigation responsive - Responsive CSS Tutorial
Scrimba
36. Playing with the title's position and negative margins - Responsive CSS Tutorial
Scrimba
31. Starting the CSS for our page - Responsive CSS Tutorial
Scrimba
26. Taking a look at the rest of the project - Responsive CSS Tutorial
Scrimba
15. Spacing out the columns - Responsive CSS Tutorial
Scrimba
33. Starting to think mobile first - Responsive CSS Tutorial
Scrimba
22. Making our navigation look good - Responsive CSS Tutorial
Scrimba
37. Changing image size with object-fit - Responsive CSS Tutorial
Scrimba
44. Module Wrap up - Responsive CSS Tutorial
Scrimba
16. Controlling the vertical position of flex items - Responsive CSS Tutorial
Scrimba
39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
Scrimba
42. Setting up the About Me page - Responsive CSS Tutorial
Scrimba
35. Changing the visual order with flexbox - Responsive CSS Tutorial
Scrimba
23. Adding the underline - Responsive CSS Tutorial
Scrimba
21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
Scrimba
20. Creating a navigation - Responsive CSS Tutorial
Scrimba
40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
Scrimba
43. Fixing up some loose ends - Responsive CSS Tutorial
Scrimba
32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
Scrimba
24. A more complicated navigation - Responsive CSS Tutorial
Scrimba
28. Feature article structure - Responsive CSS Tutorial
Scrimba
34. Styling the featured article - Responsive CSS Tutorial
Scrimba
18. Making layout responsive with flex direction - Responsive CSS Tutorial
Scrimba
19. flex direction explained - Responsive CSS Tutorial
Scrimba
41. Creating the recent posts page - Responsive CSS Tutorial
Scrimba
17. Media Query basics - Responsive CSS Tutorial
Scrimba
30. Home Page. HTML for the aside - Responsive CSS Tutorial
Scrimba
38. Styling recent articles for large screens - Responsive CSS Tutorial
Scrimba
29. The home page. HTML for the recent articles - Responsive CSS Tutorial
Scrimba
10. ems and rems an example - Responsive CSS Tutorial
Scrimba
1. Starting to think responsively - Responsive CSS Tutorial
Scrimba
4. Controlling the width of images - Responsive CSS Tutorial
Scrimba
5. min width and max width - Responsive CSS Tutorial
Scrimba
3 CSS Units. Percentage - Responsive CSS Tutorial
Scrimba
11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial
Scrimba
12. Basic Styles and setting up the columns - Responsive CSS Tutorial
Scrimba
8. The Solution Rems - Responsive CSS Tutorial
Scrimba
14. Setting the columns widths - Responsive CSS Tutorial
Scrimba
2 CSS Units - Responsive CSS Tutorial
Scrimba
7. The problem with ems - Responsive CSS Tutorial
Scrimba
6. CSS Units. The em unit - Responsive CSS Tutorial
Scrimba
13. Adding the background color - Responsive CSS Tutorial
Scrimba
9. Picking which unit to use - Responsive CSS Tutorial
Scrimba
Tutorial to Learn Alpine JS - Full Course for Beginners
Scrimba
Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Scrimba
Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Scrimba
Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Scrimba
More on: AI Pair Programming
View skill →Related Reads
📰
📰
📰
📰
The AI That Out-Forecasted Europe’s Best Supercomputers-Using a Single Chip
Medium · AI
Day 4 of 100 Days of GenAI for DevOps🚀
Dev.to AI
Local LLMs for agentic coding: a real-world viability report
Dev.to AI
Beyond Replication: Theo Browne on AI's 'Skeuomorphic Phase' and the Future of Development
Dev.to AI
🎓
Tutor Explanation
DeepCamp AI