How to Contribute to Open Source Projects - Live example with the p5.js web editor

[Music] hello friends welcome to coding garden with CJ welcome to how to contribute to open source projects so I was live like 30 minutes ago I did a Q&A session people asked lots and lots of questions but when it came down to what should i do or what should i build this question how to contribute to open source projects was the winner so we're going to a totally separate video on it okay right now I actually have a blank document so everyone everyone in the chat agrees that I should come up with my to-do and stuff like that while I'm while I'm streaming so I'm gonna do that hopefully I think I will edit this down to make it a little bit more consumable but right now we're kind of just hanging out I'll make the to do and then we'll do it and just to mention I do plan to attempt to contribute to the p5.js web editor so if you're not familiar with it this is it if you watch coding train you've probably seen this before but this is a fun little tool where you can actually code in p5.js inside of the browser you can save your projects you can preview them but this is actually an open source project it's written in react j/s the front end is and the front end is completely and totally open sourced it's here on github and anyone can come and contribute and I'm gonna show you how we do that what's the process let's say hello to all the people in the chat hello exception welcome to the stream I don't think I saw you in the last dream welcome hello ed welcome back hello Sergey welcome back hello andreas welcome back hello Danielle welcome hello oh there's another Andreas hello welcome hello Aaron infi says hey there first time catching a live stream awesome welcome to the stream entrances so used to skipping past this part you can't it's live unless you have a time travel machine hello Christopher welcome hello in fee hello jelly they in Fiat expected this to be 30 minutes in but you're early um yeah I took a 30 minute break sat down I was standing for like two hours during the last livestream um hindrance Jesus is saying this could be part one of a series as well yeah I think so yeah because I guess that's another thing like realistically will I be able to fix a bug or complete a feature within this livestream I don't know I have been talking perfect a large amount of today so I'm a little bit tired so maybe I won't be able to you but I definitely will describe the process how do you get set up how do you get started all all that kind of stuff hello men on the run hello Ameet hello Mateus Mateos Mateus I think I'm saying yeah I thought I missed some letters but to use hello hello harsh welcome hello Linus hello hug I couldn't wait for the countdown to be over we're here we're live you pronounce my name surprisingly right considering it's not designed for English awesome okay so let's do it but let me create kind of like have what are we gonna do what are the first steps so step one we should like find a project step two is read the Community Guidelines or I think it's usually called like the code of conduct read the contribution guides so typically every open-source project will have a code of conduct so that is it's typically just like be nice to each other that kind of thing but you want to make sure that you adhere to that because part of this whole open-source thing is you're collaborating with people all over the world on the web and you need to make sure that you're nice about doing that the next thing is reading the contribution guidelines so typically if a project is large enough they'll actually have a document that describes how does this project work like how do you submit an issue how do you create a pull request those types of things we'll also need to read the development setup guide so most projects again will have a guide on how do you get this project up and running locally to start contributing to it because that's typically what you'll need to do it's on github but you'll need to bring it down you'll need to potentially create a branch start working on it all of that about the flow and workflow and everything should be in the contribution guidelines and we'll get the development set up locally see I read the contribution guidelines read the development setup guide and so you get set up locally based on that then after we've done that we're going to need to find an issue find an issue to work on so typically if you're dealing with a github project there is the issue tracker here and depending on the size of the project there may be hundreds of issues there may be very few issues but this is really where you want to look to see what can I work on I'll talk about this when when we get there but typically most projects have labels on them and so there's things like a good first issue this is might where might be where you want to start sometimes that's is simple as like a documentation fix or something like that but the maintainer of the project try to keep things labeled in this way so that if you're totally new to this kind of thing it's really easy for you to like pick that issue and kind of get up and going okay so we find an issue to work on I would probably say add a comment to the issue to say that you are working on it and this is mainly just so there you don't duplicate work let's word wrap this so and and again because something like this is so asynchronous like there's people all over the world working on it somebody could already be working on this but maybe they just haven't submitted a comment I like to just so that other people know that hey someone's working on this and potentially if they want to help or work on it as well they know to look at my Fork of the project to see potentially any work that I've done so add a comment to an issue say that you're working on it begin working then will submit a pull request and then go from there I'm sure we'll we'll expand out this to do a little bit as we as we move along and if you have any questions in the chat about any one of these things please ask them we'll try to talk about all this stuff in depth and I think that's kind of it let's catch up hello the two tests hello Jo Jo from Spain welcome harsh is saying I'm also planning to make an open source project on making a real-world website for a fake restaurant interesting it will have admin panels blog recipe app and more it will help me in managing that project Thanks yeah and so this isn't exactly going to be a stream on how to make your own project open source and do this kind of thing but you definitely can look at some of the more popular projects out there to see how do they do it like how do they get random internet people to start contributing to their codebase cool hello memes welcome back harsh asks how can I make a code of conduct just a few quick tips honestly you can just copy and paste their code of conduct um that's actually what I did for our discord so the the discord channel whenever you join there's actually a code of conduct and I think a link to the code of conduct but I took the code of conduct from the the p5.js organization and kind of just adjusted it slightly to fit coding garden and that's totally okay to do and I'm sure you can find a lot of different examples of code of conducts up there cool exception says I'm sitting here while I wait for my very very big Java project to compile the test have you say have you seen that xkcd comic code is compiling I used to have this printed out and in my workspace at my very first job the number one programmer excuse for legitimately slacking off my codes compiling hey get back to work compiling Oh carry on yeah memes s what is the stream about we are going to attempt to contribute to the p5.js web editor live and we're going to show how all that will work hello Carlos who's from Colombia that's awesome welcome Aaron is s asking will you be answering off-topic questions on the stream potentially but I also don't want to get off track because I have already streamed for like over two hours today yeah in lioness thanks for backing me up it pretty much the same thing it wouldn't hurt to ask it I just may not answer it okay so here we go the first step is to find a project there are tons out there I mean actually github has this Explorer feature and this is just like very popular open-source projects I mean I think I think typically the things that people contribute to are things that they actually use themselves it doesn't have to be that way especially if you're trying to just practice coding or practice collaborating you can really attempt to contribute to anything but a lot of times that's what keeps the open source world going around someone is using a particular open source project or library or framework and it has a bug in it that they need to fix for their own project so they go in and submit a pull request to fix that type of thing so there are tons of open source projects on there github has this Explorer feature you can also check out gitlab I'm sure they have a very similar thing because it's not just specific to github github is one of the most popular things out there and it's what a lot of people use to collaborate but it's not the only thing there are other stuff so there's gitlab let's click explore on here mmm yeah and we can see some trending repos we can see repos that have the most stars so really the first step of finding a project is really just find something that interests you find something that you're already working in or working on and then you can go from there so for this particular thing I'm going to attempt to contribute to the p5.js web editor so I found my project step one done I think someone mentioned I didn't have check boxes and you are correct so let's add some check boxes yeah and I guess I'll also mention I mean it kind of goes without saying but the project should probably be in a language that you know or you're learning it should be something that you're somewhat familiar with um it wouldn't make sense for me to go to some open source C++ project and attempt to make a pull request I could because I maybe know a little bit of C++ but it's it's not my main area of expertise so I would look for something that I already know and this is a react JavaScript project I do that daily so I should be able to help okay next step read the code of conduct so if we look at the repo and actually I would I would start with just like leave the readme before you go any further let's look at the readme let's see what it says because it's gonna have links to all of these other things so let's look at the readme so they described the p5.js web editor that's great they talked about issues so please post bugs and feature requests in the correct repository so the p5.js web editor is specifically this application which is a web editor for editing p5 there are p5.js libraries like the p5 dom the sound library the accessibility library and those are actually separate projects and separate github repos so this is just telling you hey if you want to contribute to those or if you have issues for those you should go to those specific projects as it's not directly related to a p5.js web editor ok cool so they have a get involved section this is great because that's what I want to do I want to get involved and says the p5 GS web editor is a collaborative project created by many individuals and you are invited to help all types of involvement are welcome you can start with the p5.js community section which also applies to this project so let's go to it developers check the developer Docs details about contributing code bug fixes and documentation to start writing code a great place to start is the development guide so this is great so this is an an awesome open source project in that the in their readme they're linking me to all the places I need to go to be able to contribute so that's awesome let's just see like in the code repo here do they have a code of conduct let's see I don't see a code of conduct directly but it's probably because it's under the p5 umbrella so the code of conduct for the p5.js foundation is most likely the code of conduct for this particular project so let's check out this community tab like it told me to so Piaget is as a community interested in exploring the creation of art and design with technology that's great all the people they like these hashtags we're not code snobs so this is kind of like a code a code of conduct we're not code snobs we do not assume knowledge or imply there are things that somebody should know we insist on actively engaging with request for feedback regardless of their complexity we welcome newcomers and prioritize the education of others we strive to approach all tasks with the enthusiasm enthusiasm of a newcomer because we believe that newcomers are just as valuable in this effort as experts we consistently make the effort to actively recognize and validate multiple types of contributions and we are always willing to offer help or guidance this is great so yeah and this is really just about the community itself and it's kind of like a code of conduct let's see if or the processing foundation has a code of conduct where is the OpenStack code of conduct the Jas foundation has a code of conduct cool so this is not specific to p5.js but someone in the chat did ask a question of like I want to start an open source project where do I get my code of conduct as I mentioned you can just look at existing ones and and pick and choose from there and create your own so OpenStack has a code of conduct you can look at that one the Jas Foundation has a code of conduct you could pin to potentially use that one and typically they all have very similar things like be friendly and patient be welcoming be considerate be respect respectful be careful with your wording when we disagree try and understand why I think the thing about open source projects is that people are literally spending their spare time their free time on this project and so if you come in with a hostile attitude of like hey this feature doesn't exist do it right now and you're not respectful to the people working on it that just that just hurts them it makes it makes the the open-source contributors feel bad and potentially not want to even contribute to this thing in the first place so I mean the code of conduct doesn't only apply to people that are actively contributing code it's people that are submitting bugs or making feature requests because we all need to be a nice community and and communicate effectively to keep that community going and keep the project going so that's the code of conduct let's see this is the advocacy for the processing foundation [Music] let's see it's not exactly the code of conduct but I think you get the idea and I think especially this community tab is is a bit of a code of conduct for when we're contributing to this project so step two is done we read the readme we saw everything that they had to offer we also noticed that they linked us to contribution guidelines and development documentation so we can use that in a bit so that's great we read their community guide and potentially their code of conduct if they have it we want to make sure that we're adhering to that we're being nice and open we're not going to be forceful I'm not gonna make a pull request and say hey accept this pull request right now I'm just gonna I'm gonna make the pull request and say hey I tried to fix this I'm like a code review you're all wonderful you're doing great work thank you so we can go on from there all right let's catch up on the chat and then we'll keep moving in faeces I would totally do a super chat but my youtube app refuses to try opening the dialogue that's fine I appreciate the thought lionesses I love get lab gay lab is cool yeah Danielle says basically don't be a jerk yeah just just be nice be nice cool all right next up is reading the contribution guidelines so we saw in the readme that they have developer Docs and development guide I think their developer Docs yeah these are kind of like contribution and guidelines because it has ultimately preparing a pull request let's see the development Docs you have installation tests designs technologies let's look at preparing a pool request you yeah so I mean these are pretty much our contribution guidelines so they're nice enough to actually break down how does get work and how do all these git commands work and how do you make a pull request but it's essentially telling us like how are we gonna submit our changes for review once we actually do submit them so that's great and then these other things are actually like getting it set up locally which is what I'm going to attempt to do next yeah and then this is just a good breakdown of what they're actually using so they're they're using react because I've looked at the code I know that for sure but they're using es6 for common and reusable styles right object-oriented CS CSS or sass it doesn't the project doesn't use CSS modules styled components or other CSS and GS libraries but it does use sass BEM guidelines and naming conventions are followed so if you are contributing potentially some style changes you want to make sure that you adhere to bim guidelines and object oriented sass so that's good to know in terms of contributing for reference to the JavaScript style guide see the Airbnb style guide and the react es lint plugin so when I pull this down locally my editor should have all of that up and running for me but that's another thing for contribution guidelines with like the code that I write shoot it here to the Airbnb style guide and I'm gonna run a linter on the code I'm sure that they have a linting task which will check that and that ultimately will just allow the the pull review the pull request review process to go a lot smoother because when I submit that pull request I'm gonna make sure that my code adheres to all of their guidelines cool they're using just for unit tests and snapshot testing with enzyme awesome so I think it's that's pretty good I'm getting a good idea of how to contribute to this thing so we'll check that off and now we're gonna do the development setup guide so installation a guide for setting up your development environment let's check it out hmm follow these instructions to set up your development environment which you need to do before you start contributing code to this project so they have manual installation which is probably what I can do because I do have node I can clone it down and start it up and then they also have docker setup I think to make this guide more accessible I'm just gonna do the local set up because that's what most people will do docker is actually really cool and would probably be simpler but not everyone has docker some people are in Windows it's not as easy well we'll do the manual setup so first thing we need to do is fork the repository so I didn't mention it here but let's actually add it as something that we need to do which is for the repository mm-hmm so let's do that here so when you go to the project on github you will see this fork button and what the fork button does is it makes a complete copy of this repo on your own personal account and what that allows you to do is make changes like crazy and you're not affecting the main one um right now I wouldn't be able to anyways because they have permissions set up where I can't modify this so a fork is gonna be a copy that I can modify and then later on a pull request is basically a request that says I made a change on my copy will you please merge it into your main one so that way we can fix a bug or have a new feature so I'm gonna make a fork let's click on it i am i belong to a lot of organizations but I'm just gonna fork it under my personal account and it's gonna do what it needs to do Andres is saying teach us doctor on a future stream I definitely will because like I mentioned earlier I am having becoming to love docker cool okay so the the for completed and we can now see if we look at the URL I'm now under my user account and then it has the p5.js web editor so this is a complete and total copy under my username and it's actually like separate from the main one it does say that I forked it but now because it's under my account I can change this code all day and yeah it'll it'll just work at least locally on my copy ultimately what we're gonna do is submit a pull request so those changes can can make their way back into the main repo but for now I have my own copy so that's great so now that I have a copy I'm actually gonna clone this one so let's do it I'm in this folder I'm just gonna say a git clone and it should clone it down cool so I've cloned it it says navigate into the project folder and install all of the necessary dependencies with NPM I think I can do that so let's go into that folder and then I'll just do NPM I and that's gonna download all of the dependencies so if you've ever worked in a react project or a node project it has this package JSON which lists all of the dependencies like react in yes lint and stuff like that and so now I'm downloading all those locally so I can run this project locally Oh infi is saying docker is surprisingly painless on Windows that's good to hear I think it's a more recent development especially with like the Ubuntu subsystem on the docker on on Windows I don't know if it uses that but it's interesting because docker is a containerization technology and which was essentially means it's creating like a small version of your operating system right next to your operating system and typically docker containers are like Linux images so on Windows I think before it had to actually put things in a virtual machine maybe it can do it natively now but yeah so that's good to know cool ondrea's ask question if you pull from origin where would you be pulling from in this case if I do a git remote dash V my origin is set up to be my specific copy of the repo and that's because I did a git clone when you do a git clone the origin is said to be the thing that you cloned it from so if I wanted to add a remote in here which is the like official p5 project on github I could do that and then anytime I wanted to pull in the latest changes which which are going to be on the main repo I could actually pull from there and it is is it is good to note that once you make a fork it is now actually like it's a snapshot in time it's a copy and so if any changes happen on the main repo you actually need to bring those changes in it's not gonna happen off automatically so what I'll show in when we're contributing what I'll show is that before you do make a pull request you're gonna you're gonna want to make sure that you have all of the latest code locally so that way you don't run into any merge conflicts or anything anything like that okay so we installed the dependencies install MongoDB and make sure that it's running so I already have MongoDB installed with brew I need I need to just start it up and make sure that it's running so let's do it MongoDB has already started cool so should be good there this next item says copy Ian V dot example to env so if you're new to node the dot E and V file has environment variables inside of it so let's open this up and we can look at the dot E and V dot example so there are there are a lot of environment variables in here and essentially I need to make a copy of this and then update all of the variables to get it running locally I potentially won't have to update all of them because I'm not getting the full thing up and working I really need to just focus on whatever feature that I'm gonna be working on and we'll figure that out in a second but I do need to create a dot env file so that it knows to look at that okay so we're gonna copy and V dot example to V and V file cool update dot env with necessary keys to enable certain app behaviors example github ID github secret if I want to be able to log him to github I may need to do that later if I'm dealing with a feature that requires a user to be logged in but for now I'm just gonna leave it as is and then when I'm ready I can go add well this one ddotty and B I can go update it later if I need to okay NPM run fetch examples this downloads the example sketches into a user called p5 let's do it nice it worked okay then do NPM start right looks like it's up and running on port 8000 and then now I should be able to visit localhost:8080 bar it's trying if you look at the terminal oh wait until bundle finished okay so it's it's got a bundle the app let's give it a second compiled successfully and there we go so this is the p5.js web editor but it's running on my machine so I could actually disconnect from the internet and this would still work I'm not gonna do that because I'm streaming but we can see in the URL I'm localhost 8000 to run this app I could change it it'll change locally but now this is completely and totally separate from the one that's actually on the internet so I'm gonna close that tab just so I don't confuse myself but we got it up and running locally that's awesome and it's great that all I had to do or run these commands exactly and it just worked sometimes if you're working or trying to contribute to a project that's maybe a little bit older or they haven't kept the document the docs up-to-date you may find at this point that the thing doesn't even run or you have to maybe change some things but that could potentially be a good first pull request is you ran into some issues getting it running locally and so you fix those and then you can make a pull request to like update the documentation but I don't need to do that because they've done a wonderful job of keeping everything documented they say install the react developer tools I already have those but that's going to help us debug whenever we're developing open and close the redux dev tools using ctrl H and ctrl W awesome so we're up and running locally for s3 bucket configuration this is optional unless you are working on the part of the application that allows the users to upload images videos etc okay I don't know if I want to be doing that just yet so I'm not going to configure it but we'll keep this tab open in the event that I do need to do that let's see so we were looking at the developer Docs we did installation that's great let's check out development a guide for adding code to the web editor so I finished the installation guide to run the test suite simply run NPM test a sample unit test can be found here cool um let's actually just run the test cuz I mean they should all pass locally I pulled from master so let's do NPM test awesome just pass um they're not a lot of tests um yeah hopefully I'm not missing any and actually let's let's kind of just like start to dive into this okay so that was tests at the top level maybe there are tests for the server specifically and then for the client specifically I don't know but we'll figure it out design proposed and theme changes are present in Zeppelin so that's cool so Zeppelin is a tool for posting mock-ups of designs that developers can then use to implement so they have their color palette here typography various designs I may not need any of this for my contribution but it's good to know that that exists technologies we went over that earlier and then preparing a pull request I don't want to do that just yet I think I'm ready to find what issue I'm going to attempt to contribute to the app so let's do it so look at my readme we revert reread the development setup guide we're up and running I am running from a fork of the repository so remember that's a complete and total copy on my machine or on my github user account we're now set up locally which is great now let's find an issue to work on so let's talk a bit about the issue tracker on p5 well on on github but specifically on the p5.js web editor repo actually no this is p5.js i want the web editor cool and so i can see under issues there are a hundred and ninety of them and so your first task is just to find a good one and most projects if they're set up correctly will have above labels and there are things like a label that's good first issue and so a lot of projects do this if they know that newer developers or people that are new to the project might want to contribute and so if you're totally new to all of this you probably want to start here so every single one of these features is labeled as good first issue and I could potentially read about the issue and try to start working on it locally because I'm a more seasoned I'm not gonna I'm not going to check that what I'm gonna leave that one for the the people that need it I am gonna check let's do a high priority maybe we can help out on something that has been lingering for a while what else help want it that's a good label so if they if no one if they know that no one else is working on this or has decided to work on it they've labeled it help want it so that's good what else yeah and then there's like type bug or type feature type idea I think I'm gonna focus on bugs I don't really want to create a new feature I just want to fix something that's currently broken and that's my choice it's up to you to decide how and what you want to contribute but that's how I'm narrowing my scope so I'm looking for things that are high-priority they're labeled Help Wanted and they are bugs in this case we have 16 issues that match that so now it's just a matter of finding one that I want to contribute to I could sort it by oldest these are some really old issues they may they may be harder to work on I'm of course gonna have to research like what is even involved with this issue you definitely want to read the comments because there's probably some prior knowledge that you need to figure out how to fix this thing but typically older issues or things that have been sitting around for a while that nobody has worked on so I'm gonna try to try to find one of those and yeah I think it's good let's just figure out in here which one I'm gonna work on in fee says the first character on line eight of your readme has an 8 as opposed to an asterisk let's fix that oh there we go nice okay so yeah when you're finding an issue you want to filter by labels sort by probably oldest and ultimately you want to sort by oldest because those are the issues that have been lingering that have not been fixed and if you fix those you're probably you're you're definitely helping out the project if you only do newest you're never gonna really help fix some of the stuff that's been around for a while but okay this one was created in 2017 so it's pretty old by Schiffman and it says missing console errors file not found let's just read about it this may not be the one that we work on but let's see what it has to say so starting over from issue number 444 I may need to go read that issue if I need more context this github issue is to track error messages that show up in the native JSON the p5.js web editor console to be clear there are likely some error messages that should be hidden in the web banner console so this thread is also for discussion around these questions so that's interesting um this could potentially mean that this this issue isn't exactly ready to work on because they may still be deciding what are the types of errors that we want to show but it's good to know the first issue contains a list of the all the errors and the subsequent comments will include specific code sample examples trigger the missing error anyone should feel free to jump in and add to the comment thread and I'll keep this list up to date that's actually really cool because like each one of these comments is almost like one one bug that you can fix cool alright so those are there are those oh and so here's a comment from 2018 this has mostly been fixed except for the file not found error not sure why that's not getting to the console this person mentioned that it's a duplicate we can't see that the duplicate was closed so that's good I was looking through how errors are captured thought this might help and then maybe we're using the console feed library so I'm not sure if that error handler needs to be added in addition to console feed ok so the last comment on here was in May it looks like this issue is still open and the issue of file not found which is this one has not been resolved so that's potentially one that we could try and work on and fix I'm gonna I'm gonna leave that tab open but let's keep looking [Music] yeah I don't want to do anything I guess I don't want anything that's good first issue we're gonna leave that for the beginners when auto-refresh is on and start typing a loop sentence browser crashes and changes are lost oh let's check it out a comment from in fee I contributed to a readme for contributing that's meta yeah you absolutely can like I don't know in the readme or in the readme that we were following for development set up like if there were any typos or missing stuff there we could potentially make a pull request to fix that that absolutely helps the project like not all contributions have to be code contributions having good documentation all of that really helps a project okay so this is a bug it could happen with any loop statement auto refresh will try to execute the code while typing writing something like that it makes the browser to crash and all changes done are lost oh but then there's a comment that says hopefully this will be fixed by number six nine eight which means if anyone's working on 619 I probably shouldn't work on that one hmm okay yeah someone started working on it keep getting an error switching this to high priority it's causing a lot of bugs and frustration we can see that the time line is really cool because you can kind of see the history of this issue and other issues might actually reference this issue and so they'll pop up here and then later on when we create a pull request we'll will reference the issue number and if that pull request gets close or if it gets merged you'll see that in here too so this pull request was merged and it actually referenced this issue let's see not sure if this is happening but I feel that we need to transpile down to es5 and then create a transform code I converted it to jsbin and it still gets stuck okay looks like this one is still open the last activity was in March another another candidate let's like find one more than maybe we can vote on which one that I try to fix yeah we're gonna skip the good for a first issue okay this one editor crashing with infinite loops and edge cases that's the one that I just looked at about this one load image file path acting uploads with arbitrary folder names when I run this locally everything works as expected one of my students ran to this problem for example defaults to the first folder inside the images folder arbitrary folder name it's not a folder or anything that exists so I think what this is is if you reference an image in a nested folder it actually doesn't go down to the nested folder okay so it acts like it's working but it's not I understand what's happening when the filenames are generated programmatically rather than just a string in line it loads the files in a different way it seems like that algorithm is too greedy okay that one's a little unclear to me so I don't know how I would try and fix that one I'm gonna skip over that one line zero error on iOS only I could potentially test this like in a simulator I don't know if I could if I could reproduce it nature of the issue found a bug and bug and existing feature enhancement yeah so this is when someone's in Safari looks like they might be on an iPad trying to use it [Music] thanks for reporting I'm also able to reproduce this on desktop Safari cool so I could attempt to fix it with Safari on a Mac a lot of changes have been made recently to the console so I assume it's rated to those will investigate looks like it's still open I think that's another candidate ok let's look at this last one and then we can vote on which one I try to start fixing fetching file contents from JavaScript does not return correct content add a new file edit that file with anything go to the file URL go back to the editor and modify a sync file save the whole project go back to the other tab displaying the content of a sync file refresh the content has not changed [Music] cool so cataract sees the same issue that was back in March yeah and then there's a comment here that says they're still working on this that was back in March but I'll leave it alone because they could potentially be working on this okay so we have three potential issues I have no idea if we're gonna be able to fix it but we're gonna try in part part of this this this video can also be okay I want to fix this issue how do I even find it in the codebase right so so find an issue to work on from github issues add a comment that you're going to be working on it we'll do that in a minute begin working so here we'll have find the code where the bug slash feature is how do we do that we'll talk about that in a second okay but let's do a poll straw poll which bug should I try to fix and I think I mentioned this a minute ago but when you're contributing you don't have to just fix bugs like you could potentially work on new features and stuff like that but one of the things about an open source project is that everyone wants to work on the the shiny things the new things and it's it's essentially creates technical debt because there's all these these bugs that haven't been fixed um so that's why I'm focusing on on bugs right now I think I want to share this specific comment because that's the that's the issue under this issue that I would be fixing that one [Music] this one actually let's let's give it a nice wording as file not found infinite loop line zero error on in Safari okay these are your options vote now I'll share the poll hello to hear from Rocco welcome to the stream hello Andrew from Brazil welcome Oh in fee in fee pointed out that type of a second ago but they said they're watching it on their switch the switch have a youtube app that's pretty cool and hello rabbit works welcome to the stream yeah hopefully hopefully I can fix one one of these bugs I have no idea how complex it's gonna be or what its gonna take to find it but we're going to try okay do I need I don't need this tab that's my local those are the three issues alright let's look at the incoming results boat now you cool I'll be right back but keep on voting you [Music] you you alright looks like there is an overwhelming winner its winning by seven votes but the file not found issue so that will be interesting we'll see if we can fix it okay yeah I asked about so the Nintendo switch has a YouTube app but it doesn't have a chat or an interactive so it's interesting and and it's saying glad it's Sunday tomorrow it's 2:25 a.m. I was up til 3 a.m. last night I don't know but maybe you should go to bed ed thanks for tuning in yeah you do have one more day of rest before work begins [Music] country is saying I voted for the Safari bug because at work that's the browser where accutane q18 finds most most of my bugs yeah it's unfortunate like if not unfortunate but Chrome Firefox these browsers are like very very up to date in terms of like the latest features of JavaScript and of CSS and supporting all of these things whereas Safari is a little bit behind so a lot of the things that work in these other browsers don't work in Safari but cool [Music] well Bharati says does the infinite loop cause a browser crash thus ending the stream I don't know if it does but it won't in the stream because it'll close Mike riddle and actually Chrome is isolated so it'll it'll cause the tab to crash but also I'm streaming from a separate computer there's only one vote for the Safari error okay so I think we have a winner we're gonna attempt to do the file not found one let's do it so that specifically is this error right here we get the jas so ultimately what's happening with this issue is if there is an error in the code it doesn't show up in the p5.js error console it only shows up in the main console so to see that in action if I just try to do if I try to log a variable that doesn't exist and then I run my code I actually see that javascript error right here uncaught reference error not exist is not defined so the cool thing about the p5.js web editor is like any anytime a javascript error occurs you're gonna see that error output right here but what this issue is describing is if we use code like this so let's go into that and we'll add our preload function which is a part of p5.js but this code is attempting to request a missing file and if we run the code oh wow is this fixed but actually if we look at the JavaScript console we should see the error filled to load resource the server responded with the status of 404 not found so this particular error is not showing up here it looks like they are providing a fairly useful error though like this one p5.js says it looks like there was a problem loading your image try checking if the file path is correct hosting the image online or running a local server and then we end up seeing this error okay I'm gonna try this in the like the production the official p5.js web editor and see what happens there as well because we could be getting extra errors because I don't have all of the environment variables set up let's do it try to run this yeah and I so while this this is a very good error message we're getting here we're still not seeing the fill to load resource error in the console and for whatever reason we have this weird event is trusted true thing so I think we have a bug ultimately the fix is going to be we actually want to see this error failed to load resource in the p5.js editor console that's my understanding of things anyways cool and yeah and I mean like this issue is old but they have mentioned that they're going to be working on it so that no one has been working on it so [Music] yeah you let's look at this one because it's it's somewhat related you you you however the console message is not clear and that's the issue okay let's see okay so there's a file called preview entry that's loaded into the preview that catches console messages if they're I think there's an issue with this or another event handler that needs to be added okay so I think we've confirmed that this is still an issue especially because we're getting this weird event log is trusted and I do see that that's coming from preview scripts so I think we're gonna proceed we're gonna attempt to make sure that this weird message doesn't show up and then the actual error message does show up so let's get going as I mentioned probably the first thing we want to do is we found the issue add a comment to the issues saying that you're gonna be in working on it just to make sure that no one else is working on this and because you don't want to duplicate work you don't want to be working on it and then someone else also starts working on it so I'm gonna add a comment one thing I'll do is I'll make take some screenshots just to make sure and get some clarification on what exactly is happening and make sure that that's the thing that should be fixed okay so let's take a quick a screenshot and then let's make a comment we're gonna say hey we're gonna start working on this let me know if this is if if this is the right issue or if it's already been fixed hey I'm gonna take a stab at the file not found issue this is what I see happening in the the editor and I'm gonna post the image can I host an image here just upload it to imager we'll go to my desktop upload copy the image dress cool and then I'm gonna post that in here this is what happened this is what I see happening in the editor with the fix be to Allah instead of showing the what is this event object show the actual error message failed to load resources you just want to clarify with the fix B instead of showing the event object blog show the actual error message that filled the load resource the server responded cool alright let's preview it alright and I'll make the comment I'm not gonna wait for them to respond I don't know what timezone cataract is in or anything like that so they may not respond directly but I'm gonna go ahead and start working on this and right now my assumption is that we shouldn't be seeing this event thing we should see the actual error failed to load resource so that's that's what I'm gonna do that's my plan okay that's my local one yeah and it's always good to just verify that the issue is still happening like I just did cuz it could be that it was fixed maybe in another pull request but nobody ever marked this issue is fixed and then you could be just spinning your wheels working on something that's not actually an issue but it does look like this is an issue so we're gonna work on it yeah Aaron says command shift five lets you screenshot a specific window yeah I didn't want to get all my browser tabs though I wanted to be like specific hello Elia welcome to the stream infi says by the way I just wanted to put out your UJS projects or what made me start using view and it's the best js4 mark I've used so far glad to hear it I'm glad I can be an evangelist review I actually have to code and react every day at work but some new projects are coming in I think I've convinced people to let me use view so yeah exception says you can just drag the image into the comments box and it would have worked oh okay well I uploaded it to imager and then just pasted the link there so that should be fine okay let's get started so if we look at our breakdown we added a comment that just makes sure make sure that people know that we're actually working on this they don't need to duplicate effort let's begin working and the first step is to find the code where this bug our feature actually is so we need to figure out where and how in the codebase is this happening so that we can start to work on a fix so let's see typically for this we're gonna use the debugging console and when an error happens we can actually see the the line of code that had happened on so let's see filled to load resource the server responded with the status of 404 okay and actually let's just refresh mmm not that let's refresh the page just so we have like clean error messages or at least not error messages that we don't exactly care about because we don't care about those for now we specifically care about what happens when we do this okay so we have a pretty clean log so we get 404 not found and then we get this right here so I think this is where I want to start because it's logging this object but I want it to log the error that happened before it so we can see right here it tells us the line of code where it happened and if I click on that inside of chrome it should take me to the line of code that's doing it source mapped from preview scripts there's no code in here let's see okay so below that I can actually see the stack trace so in JavaScript well in a lot of programming language the stack trace is a list of all the things that happened up until this error point so we have here image on error and that's calling inside of p5.js and then target console it's calling this index TS TS file when I click it it didn't load let's actually try to look at it in vs code so this is in the directory source on hook index TS let's try to find it so we're specifically working on the front end so we probably need to be in the client directory if we see is there a source directory no is there anything called unhook I'm just gonna search for unhook so command shift F inside a visual studio code lets you search all of the all of the code base so I'm gonna search for the word unhook and see what we find it's not case-sensitive it's not a regular expression fun hook what if I search for hook okay there's a few I don't think that's worth that's what we need though let's go a bit a bit further down [Music] pre-load online 59 p5 load image image dot on error it's interesting that the the web editor here is actually pulling in p5.js from a CDN rather than being in the codebase itself because to fix that we would actually need to fix the p5.js library and not the p5.js editor so that's interesting it could be that we actually need to make a pull request over there instead of over here um [Music] let's see you yeah it's unfortunate that this is not actually taking me to the code it looks like they do have source maps enabled but can't exactly get to them like here's the web back web pack build here's the client these are the various JavaScript files yeah I'm actually I'm just gonna do a text search for this so it says p5.js says it looks like there was a problem loading your image so I'm gonna copy that string and just search the whole code base to see if if we can find p5.js says and we can't says p5.js okay there's a lot of p5.js yeah and I did mention it but it looks like that specific error message is coming from p5.js we just need to figure out where this event is actually getting logged I guess we can try and figure out where is the the console code and maybe start from there so let's look at the source if we look at modules IDE pages there's the IDE view you let's see if it references the console yeah so bring in the console from components such console this is react code so we're seeing like import statements if I just search this file for console let's search for console with the bracket so I can see where it's brought in so I see console it has the font size dispatch console event so this is most likely how potentially the errors are getting pulled into the console yeah yeah so brick heck is mentioning that it's coming from preview scripts I think preview scripts is is like something generated though let's search for preview scripts okay this could be a good place to start because the preview frame is so we're creating a script tag we're setting the source to be preview scripts and then adding it but that probably does is it like takes the code in here and then applies it to the iframe that's actually doing the preview um try doing it again and see if we get a different error message oh you know what it was when we were on the the production editor that's when it said preview scripts not in the local one because the local one is like trying to map like the development files which it can't exactly do yeah so that's coming from preview scripts and it popped there probably is a way for it to forward the error back to the console I think that's what I'm gonna focus on like how does the console actually get error messages that it can spit out and then we can work backwards from there to see how the error message got in there to begin with so this is a good place to start let's keep this file open yeah let's keep it open because we'll come back here later but we did see components console so this is the console react component it's render function so there's a clear button right here yeah so it looks like in the code we found where this button is what I'm gonna do right now just to make sure I'm in the right place is I'm gonna add something just just like a hello world to see if I'm in the right component so let's do this so there's this element preview console messages it's mapping over the events what happens if I just add like an h1 right here that says hello world there it is cool so it looks like I'm in I'm in the right place and now I can kind of start to reverse-engineer how this is actually happening so play those those get added in cool so this is where the error messages show up but how do the error messages get in there I don't know we gotta figure that out so let's get rid of that hello world it looks like it is it's mapping over the console events and then just showing each console event so I want to figure out how are those things getting into the console events so let's just search this file for console events so console events is a prop meaning in react that's passed down from the parent component so if we go back to the parent component which was IDE view we can see that console events comes from this stop prop stock console so let's figure out in this component what is this stop prop stock console there are 46 occurrences we'll find it though this is using Redux though so this could be that it's actually mapped from the store so if we look at our map state two props yeah we can see that it's coming from state console and so console is going to be a State DOT console is most likely like a Redux module so let's look in the store to find the console so where are we we have modules app user actions reducers reducers might be where we actually find the console oh here we go I missed it but producers so if we look at the console producer this is all of the state cool so the state here is literally just an object an array and all of the messages that get pushed into here are ultimately what it's going to show in the console and it looks like when a console event happens it pushes that event into the array so what I want to search for now is a console event so I want to see anywhere in the application that can fire off a console event and maybe we can narrow down how specifically this image error console event is getting fired off so let's copy this search the whole code base for a console event yeah instead of searching for action types console event I'm just going to search for console event because it could be that when they imported it they D structured it okay so we have console event I see so this is what this is the action that will dispatch the console event so we may need to search for this to see where this is called yeah so if we look here dispatch console event let's see in the whole codebase where is dispatch console event called [Music] it's called in the idv view and the preview frame it's also called in console let's see so when the component updates [Music] interesting it looks like dispatch console event dispatches all of them let's go back to the reducer so like every time an error happens yeah it looks like every single time an error happens it it sends the entire array of messages every time which is interesting but keep going so that's where it's ditch about dispatched its dispatched here too the preview frame is now dispatching a console event with the decoded messages so the preview frame is this thing on the right hand side that actually shows the preview so I think this is how it's sending that error message back over and so this could potentially be where we start so here's what I'm gonna do I'm gonna add a breakpoint right here I can just click that that red thing and that makes it so that when it hits this line it will stop and I'm actually going to startup chrome debugger so I'll actually be able to debug inside of vs code so let's start this up it should actually ask me to create a configuration if not now we need mean we may need to create a debug configuration so let's add a configuration here we go and so I don't want to launch a program I think the type I want is crow let's undo that let's see if there usually is like an interactive way here we go so I want to launch Chrome you touch the process attached to remote no I don't want to do that let's see I used to be able to do this like it would actually launch like a separate Chrome browser I don't know if they removed it if there's another way to do it [Music] let's get rid of this configuration I'm just going to search the web real quick vs code debug chrome process Chrome debugging 4 vs code so we had a breakpoint we started up it launches a Chrome browser and then we should be able to like hit our breakpoints to get started open the extensions view and install debugger for Chrome maybe I have to install it yeah I feel like it used to be built-in but maybe it's now a separate package so yeah this is the one we want it's from Microsoft install cool looks like I don't have to reload and then maybe it should be an option for debugging now so if we go to add configuration here we go Chrome attached so attached to an instance of Chrome already in debug mode actually I'm gonna do launch the port number is 3000 I think yeah or 8000 so I'm gonna change this to be 8000 and then we should be able to launch it so launch Chrome go cool so that's launching the editor looks like we have the debug schools looks like I added a breakpoint earlier on editor I'm gonna get rid of that and click Play [Music] let's open up the dev tools I think I want to hide the redux dev tools why did those show up those like automatic let's just put the dev tools on the bottom cool and now so now that this this is up and running and it's attached because I set a breakpoint in the preview preview frame yeah because I said the breakpoint right here anytime this happens the code is gonna halt and then I can inspect what's what's happening so let's let's try to make it happen let's get our our code that causes the bug well I just need the preload we're going to put that code here and then we're going to attempt to run the code okay so an error occurred we now hit the breakpoint and it launched us into vs code so we can we can inspect things so when you're inspecting you can actually see like the scope and the variables so we can see decoded messages is now an array of length two it has a log that says p5.js says it looks like there was a problem so we remember seeing that error before so that's in there and then the other one is this error object yeah so if we look at data it has it's an array and then there's that object that gets locked so my my thoughts here are this is happening inside of the p5.js library not the p5 editor like there's not there might not be much we can do here we might have to modify that other library but it may not be that way yeah I'm just going to continue if I press play here the code will keep going and if I go back to the browser those errors now popped up so that's cool but we need to see like where is this object thing coming from if it's created inside of the editor we potentially could fix it to be the correct error but if it's just being forwarded wrong from p5.js we may have to go over that way so let's just see really quick the decoded messages where do those get created yeah so it's message event data you um [Music] it attempts to create an ear so I'm actually gonna I'm gonna set a breakpoint earlier on the message event to see if there's more information in there that we can derive from from the errors instead of at the end because this is what actually creates the decoded messages array I'm gonna set a breakpoint right there try again it should halt okay now if we look at message event and we can inspect it over here so if I look at message event is trusted true if we look at it has a data property that has those two errors inside of it there's that and then the other one just says error and then the data is again that object with like event is trusted - okay so yeah the the thing is when we get here that that weird error object is not weird but the thing that says like event trusted true is already there so let's just play play and it should show up again yeah let's let's keep following it though let's see where handle console event is ultimately called so yeah this dot handle console event is just basically waiting for messages coming from the preview frame and then that directly has the messages inside of it okay let's see you you inject local files yeah I just want to make sure that when the error reaches the p5.js editor it already is that that object thing because if that's the case there's not really much we can do about it we would need to look into the p5.js library to see if we can change things there yeah let's see so we're adding an event listener for that let's see this iframe element let's see if we have any control over it so when it renders we have the iframe element injecting files yeah you Lucchese's saying it's actually created in p5 they believe line 54,000 67 yeah the errors are dispatched in the p5 iframe but the 404 error doesn't come through yeah I think like one one issue though is this error is coming through and I'm wondering if this error was meant to be the 404 error but it's now just showing up in a weird way who's who's to say let's see if we can we can set a debug point inside of Chrome and that's kind of what we need to do in this case because the p5.js script isn't in the editor it's being loaded externally so if we look at sources if we look at I think it actually came from ya p5.js huh I just want to see because this should be listed in the sir oh yeah kimba's frame and then that loads p5.js here we go p5 yes unfortunately this is minified code but if we can't see where it potentially originates in p5.js here so it attempts to load the image on this line friendly file load error you let's see okay I'm gonna catch up on the chat cuz a lot of people are chatting you cool after yeah so thanks Linus for the tip I installed the chrome debugger extension inside of es coat that got me going wine is saying the problem primarily was at the 404 error doesn't show up yes I just have a feeling that this was meant to be the 404 error but it's showing up in a weird way but that probably is the case do we need to verify like why is that error not even coming through cool yeah so the 404 in the chrome console and the event thing for for error message somehow escapes the IDE internal console yeah the core problem is that p5 is loaded from a CDN in the first place makes debugging a little bit harder so yeah I'm gonna set that breakpoint there and that should like maybe we can follow it all the way through to where it sends the message that an error has occurred but let's do it so if I click play here Oh interesting it attempted to load the p 5j oh it did that's what crazy cool it loaded the p5.js source code inside of Visual Studio code so that's awesome it's also good to know that this error does occur before where are we this error because remember we still have a breakpoint there so that's going to get hit eventually but this error happens first so that's good so we have the friendly file load error um [Music] and image Don error that's like that's built into the web browser it's like you can detect when an error happens for a given image this error let's see does it have a message let's look in the the debug console so if we can look at e we can inspect it I see and this I think this is the object thing that's coming through so ultimately this error is what we're getting but it's not that 404 message and I think the the thing is that that 404 message is actually like a network level error message let's see you illegal invocation [Music] you but we see is trusted true so yeah this error comes through but it's not actually the 404 not found error I think that's the thing okay let's let's follow this and then we should make it back into our react code so it's gonna do the friendly final load error message which is that nice nice print out we see so I'm going to do step out which will jump over all of this code actually there's report let's let's get down here to report and see what that does because I think that's eventually how it's gonna hook into funneling its way back up into the error console so we have the message the method is load image let's go into this report friendly welcome is false let's see so prints out a fancy colorful message to the console.log cool let's step out of it we'll go in if the fill your callback type yeah otherwise we're just going to log there and I guess this this is this is what happens which we actually haven't actually seen yet is when a console log happens or console error happens the the p5 web editor is tapped into that so that it can forward those messages and so I guess that could be what we're missing is like how exactly does it tap into the host of those error messages so then when this does a console dot error that ultimately triggers our handling a console event um which tries to log into the console so home.she to press play press play cool so I guess it is interesting to note that the this error is happening before the p5.js thingy says it's happening so potentially that's what we need to look into is are we able to intercept when a network request error happens and report it because ultimately that's what should happen like it actually should put the 404 not found error message before these two things because this is just and after the fact of p5 kicking in when the error happens so I think ultimately that's what needs to happen like we're trying to mirror exactly what's happening in this console in this console so we do actually need to tap into when this happens that'll take a little bit of research but I think this is we don't have to delve into the p5.js library we can do this outside of that because ultimately this is the thing that's not showing up okay I think I think we're good there let's catch up yeah the current error listener seems to only listen to the errors in the iframe not the browser networking errors after all the GS code doesn't know it's a 404 without additional handling yet the console has that 404 anywhere is maybe windowed on Eric could work yeah I think the main issue there is we if we do something like window.onerror we want to make sure that we're not duplicating events okay let's keep looking I'm gonna stop the debugger for now and figure out what's happening you yeah and I mean I think this or the the listening for message is actually what happens when something does a console.log just let me let me test this theory so like if we're on a webpage and we do console dot log great but if we tap into window dot message will we be alerted of when that happens I could potentially create an infinite loop something happened okay so we're adding an event listener for message and then if I try to log hello doesn't get called oh you know what I think that the iframe is sending the message okay let's see [Music] doo-doo-doo have the iframe element are we setting the source at some point you first hole codebase for canvas frame nope yeah Linus is mentioning try window.onerror with use capture set to true so we get all the errors let me look into that so window on error use capture see where you found that how to catch all JavaScript errors global event handlers Donaire oh here we go when every thanks Linus when a resource such as an image or script fails to load an error event using interface event is fired at the element that initiated the load and the on error handler on the element is invoked this error error events do not bubble up to the window but at least in Firefox can be handled with window to add event listener configured with use capture set to true okay let's search the whole code base for on error here we go console utils what's going on here so hijacked console error script this this is where it's happening so here we're doing a windowed on error and it's posting a message and this is yeah this is how it's happening so this ultimately is what fires off the on message event here so this thing's waiting for messages to happen this script that gets injected is ultimately the one that will send that error message so here is where we at least hear this on error is where we may need to tap into extra errors you let's see use capture if that's mentioned anywhere else when the function returns true this prevents the firing of the default event error handler so it's adding an event listener for error where would we pass that particular use capture from when an error occurs in a script loaded from a different origin yeah yeah okay I think we're in the right spot though okay we've at least figured out where this is happening and how we can how we can affect it let's see you and let's let's modify this let's say so the message we're gonna modify it and say is this working so whatever error message happens we should see that appended to it so let's refresh let's try to make this error happen not that one this go didn't quite work I'm curious if this file is even getting called you let's do our own console.log right here whoa we can just do like a totally separate error I just want to make sure that we're in the right place and we're like that that is where the errors are getting intercepted well cool so uncaught reference error not exist is not defined and then our console log actually kicked in which is weird no no it's not because yeah what happens before but then later on the this console kicks in and says hey I want to show the whoa so that then it shows up second over here but ok so we're in the right place we're in the right spot this is where the errors are actually happening so that's a good sign see okay and catch up on the check so Linus was helping out yeah ultimately we potentially need to figure out how to how to tap into use capture the the MD in doc says that it's only supported in Firefox these error events do not bubble up to window but at least in Firefox can be handled with window dot add eventlistener configured with use capture or set to true we want this to work everywhere not in just not just in Firefox so there might be another way to tap into it okay but let's just search the web for use capture again but see we can find some better examples yeah this this stack overflow issue [Music] you yeah so it finds that errors were not reported let's see you his dojo javascript am i looking at the right thing so you can write the number like the error message like this so you okay I'm going to craft an internet search to look for this javascript intercept 404 console error how can you intercept a 404 HTTP error in JavaScript I don't believe it's possible in JavaScript this is a post for my 2001 you you yeah I mean I guess it could also be if if we see that the like the p5 friendly error message pops up we actually inject our own error message right before that it may not be the best fix but it's something that we could do so something like this you hmm okay this is a bit off-topic but I recently rebuilt your view based hacker news client with materialized and plain handlebars thanks for the inspiration you're very welcome jelly's it's been above my head since this stream started yeah we're doing what we can something like this is like a like a very deep error it's like not like a new feature it's it's weird I don't know um okay what do we do now do we give up no there hopefully there's there's a way there's got to be a way we just got to figure it out unable to understand use capture parameter and add eventlistener let's see you you know what so we are doing window dot on error I wonder if we could do window dot add eventlistener for error and then past the use capture in there instead yeah that's let's try doing that so we would do window dot add event listener for error and here we're going to pass in this function so it should still work but we're just tapping into it in a different way and then if this still works we can this is where we'll be able to pass the use capture property okay we need our broken code okay so it still works so add eventlistener is cool and then we need to pass in I believe a second parameter that is true like this because it will capture let's let's just try it so we're passing in error function and then a third parameter true which is use capture let's see if that affects anything well didn't break it so that's a good thing yeah and it could just be that these types of errors don't actually get forwarded to error because they're like network level errors but let's see Kahn says it's 3:20 a.m. after this you need to debug my brain ok so we are using use use capture bind it to the error event in addition to this you can also catch all the errors fired inside a promise callback listening for the unhandled rejection we probably need to do that at some point okay but I think we kind of just need to go down the path of like is it even possible to tap into those 404 errors um I think I was searching here yeah intercept 404 console error search Google you how can I catch a 404 error in JavaScript let's see how to detect on page 4 for 404 errors using javascript any ideas to capture all error events on the page you can use add event listener with the used capture argument set to true so we did that oh he did say true but it didn't affect it [Music] you you you yeah so is there a way to get the error code also so let's see you actually here I'm gonna log the message let's see if it's making it through but maybe these if statements are preventing it from getting through because I am passing true to capture the events you hello jobs who says alum from India thanks for tuning in that is not logging because maybe message is empty you wait now that's not even getting logged [Music] you you yeah let's look at this stack over who posted that remember it referencing previously on air gave information that was not provided by add eventlistener area if you must use an old version of Firefox you can safely use Windows on error maybe that's why they're using Windows on air to support older versions okay though I don't know if this code is even running anymore what if I just comment it out you doo-doo-doo yeah if I commented out we're still kidding here's the console so something else is handling this I think I was in there in the wrong spot to begin with I don't like what if I delete it yeah I could be in the wrong spot here so I'm just gonna make sure yeah I mean I'm in the wrong spot that's super interesting so this code is here for something but this is not this is just about what we want I'm gonna just put it back to the way it was okay yeah why is that whole listener in a function that's just asking for bug I don't know okay this is this is the wrong spot oh why is it in a string I think because it's being injected as like a script tag which is why it's a string but yet it's a little difficult to code in when it's just a string okay this yeah it it logged an error message before but that that could just be that yes it is firing but this isn't the thing that actually forwards the messages into the web editor let's search for this postmessage thing just that console feed let's look what is this library what does it do ooh I think I think maybe this is it so hook comes from console feet a react component that displays console logs from the current page an iframe or transported across a server hmm so it's like an embedded thing that we're using cool well I see it's just tapping into it's hooking into any law any console.log on window dot console this is I don't think this is errors this is just console logs let's see you you um like a kid I can't like console.log because it I feel like even that would create like an insult infinite loop or something here okay let's see okay let's try our broken code yeah I made an infinite loop um but that is getting called and ultimately ultimately it's getting called after all right I need to stop that okay okay it Lisa didn't crash the tab so it looks like this is logging but it could be that this package console feed doesn't capture events maybe we can modify that it looks like some people are heading out job says love the way your way of teaching keep it up and please make some projects on react will be i'ma see you later ed thanks for tuning in yeah line instead of saying the on-air with on capture should work with the 404 it's important that we get all the errors I agree but at this point we might actually be at the mercy of this this hook library which may not have that capture enabled maybe we can modify it let's what we'll see see you later in fee its is late for everyone um and they're asking am i standing or sitting in a chair I am standing I'm standing up okay and andreas is saying would you need to take a look another look at the github issue now that you have taken a good look at the codebase yeah why not I mean I might actually see have they responded like hey yeah go ahead and work on this I don't know why they would yeah I mean they're busy people okay I think that it is actually hook let's actually let's set a breakpoint here and do a debugging just like we did before just to make sure that this is this is where we need to look debugging let's launch Chrome code you doo-doo-doo Oh actually I think this is jumping into p5 because we do have a breakpoint there thanks aw game for the the encouragement you got this CJ I'm with you till the end of this issue well we'll figure it out okay so the p5 error happened the console event happened and Oh unverified breakpoint maybe he doesn't know how to load this you [Music] you what about there that's interesting I can't set breakpoints there you stray again I am going to get rid of that like p5 breakpoint let's see it looks like these error messages are not I mean sorry these these debug breakpoints are not actually being set [Music] let's go into this library and see if we can set a breakpoint let's go to that definition okay here's hook can I set a breakpoint set a breakpoint here okay so this is the official hook method which will get called initially let's see and then it's given a callback or were we okay so it's given the callback and then let's see where it actually calls that callback which is right here so let's set a breakpoint there all right let's see if it jumps into our code strike here we go we still have that p5 break point I'm gonna remove that actually no I'm not because it's a good place to look because we may need to tap into the image error event I don't really know okay press play you and then our other hook stuff didn't even get called so maybe I'm not even looking in the right spot hmm I'm gonna look back at the issue and see did they mention like where should I even look let's see okay I was looking through how ours are captured and thought this might help let's look at that Stack Overflow did we look at this earlier yeah I mean I think we did this is like the capture events which were not doing yet maybe we're used here we go we're using the console feed library so I'm not sure if that error needs to be added in addition to console feed yeah I think I think this is a good sign because they are mentioning that that's the library that's handling it which is weird because we did find this code the hijack console error script which I don't think is even getting called or being used anymore let's see let's just search the code base for where console feed is being used you you okay so import the console from console feed and this is being used in our console component and let's see how console feed is used in here so yeah we're just showing it up there passing in the styles okay that's where we were before this is bringing in decode was decode do from console error message dialog okay I think ultimately this may be an issue with this library for whatever reason we can't debug it which is not good let's see see if I can find the source in here inside a break point because typically you can go into something like node modules and then when you have source maps and then you can set breakpoints from within there so let's look at console feed hook indexed ojs okay let's see this is getting called or if that breakpoint will even even work go you yeah it really doesn't like this breakpoint in p5 okay keep going uhh you did we do it I'm gonna stop the debugger and restart it just just so that that breakpoint is gone okay let's try again you you you all right let's bring up the air console clear this need to make the error happen I thought I removed that breakpoints in p5 um keep going buddy keep going okay and then this breakpoint isn't getting hit so that's interesting and that's that's the one for the hooks library just for kicks I want to I want to look into this we call it the console feed library which is what they're using and let's see if it uses event capture because if not maybe we need to make a pull request over there so that it fixes this issue over here remove the breakpoint in the bottom West in BS code okay oh there it is yeah remove that still there that one's still there okay so here's console feed let's go to their github and let's see how they do things so you want to source yamp hook you oh you know what [Music] I thought I think that's kind of the issue so like this this is intercepting calls to console so things like console dot log console about error its intercepting all of those calls and I think the 404 error message isn't actually coming from console like it's it's more like a browser thing and so this isn't gonna let us intercept it anyways I think in hello in fee thanks for sticking around give me just the same you you okay mmm yeah override the console methods and so that's basically what happened what's happening yeah so this is a tricky one it's a very tricky issue I also want to mention really quick that this should not deter you from attempting to contribute to an open-source project like p5.js or the p5 editor because there are a lot of other other issues on there that are not this hard this is and this is probably why this issue has been open for so long is because it's a it's a very difficult issue to tackle but this this is development this is open source development this is what happens it takes time I'm just gonna see if this code this code base has like on error in it I don't think it does I think it literally just intercepts all calls to console.log so maybe we actually just need our own custom hook that does capture it okay let's do this let's stop debugging let's close out of hooks things so okay what we've determined ultimately this just overrides console.log console that error it isn't actually tapping into the on error event so we actually need to do this separately so that we can capture events the only issue is we don't want to like duplicate errors that are happening so maybe we only intercept or add the error if a specific thing is happening let's see curious like where where this file is so this is in live utils preview entry so this is just like waiting for console logs I'm trying to think like what's the best place where we could set up a listener there's console utils yeah John Doe is saying monkey patch window console that's actually what the hook library does but ultimately I think we can't get the error through console which is why we need to do something else entirely let's see yeah for now I'm just gonna add my code right here let's see if it actually gets called though add eventlistener for error we have our callback function which gives us the error and then we want to we want to pass in true here which will capture events and that's what's that's what's been telling us online how we can tap into those Network errors so I'm just gonna log e dot message yeah line is saying can we try to add it regardless of duplication just assess of even works yes okay so hopefully this code actually runs and will detect any error event and then attempt to log into the console so let's see I'm just gonna run it here doesn't have to be in the debugger I mean leave myself a note hey this is our error okay that code isn't even running it could be because it's not the error the on error of the window it's the iframe [Music] you let's see maybe I just need to move this code you we could potentially put it in the console component which is the thing that is just displaying the console feed and yeah if this has a component did mount we could potentially add it in component did mount let's try it so in the console component we're gonna listen for four errors so we'll do component did mount and add our event listener there listening for errors okay let's see what happens you yeah listening for errors so that's good I do have some linting errors let's fix this okay so full refresh listening for errors okay will it cause an error let's just try it yeah our funk our custom error handling function here isn't working but hey like I said it could be that the iframe needs it I don't know okay let's see you I'm going to try to use on error instead of add eventlistener well that didn't work I think ultimately this needs to be in the iframe and then it needs to like post the message I think that actually is the issue which is why that that error logging code that I found earlier this seems like it would be the place to do it [Music] yeah line is saying the event thing we saw is the 404 error report is it just that it's not formatted in the right way because like that that's what I did debug earlier so let's just go back there we can get back to that error message happening and and then just show so line is saying it shows us the path down to the broken image tag ok let's let's debug it because we should be able to like get into that error message to see does have those specific errors okay let's debug it yeah I'm gonna get rid of these node module breakpoints we only want to see in here when a message is actually posted okay thanks for the tips Linus we're gonna figure this out and then I'm gonna eat dinner okay so we're gonna try this I'm gonna try this okay so right here on message event dot data so if we look at our local scope we have message event you ready follow that we have data that second object is the actual error object so here so method is error let's dive down into its properties so it's trusted true object name event okay so at this point all of the extra properties have been stripped off of it so we may actually need to look at it inside of p5.js like okay we're adding that break point back and let's just try again yeah because we want to see this error in p5 it could be that we need to Update p5.js so yeah it's going to report it but if we look at oh that's the wrong one this is the friendly error one we actually want to look at image Don error here it is so this this ear ight here is the wait the one I want line 66 40 okay yeah Linus is saying this simple code shows the same event thing okay so potentially what we do is we modify that the error that it sends up to be friendly and be like the actual error that it is well let's see okay keep going I don't want to look at this anymore oh actually I mean we could potentially modify it and then see what happens okay so I have that breakpoint p5 we're going to try again wait it didn't happen you you image dot on error I think this is what we want let's let's set the breakpoint in here so if we look at the frame C D and J sp5 p5.js image done on air we want that breakpoint go it's trying here we go okay whereas my scope I don't see any scope can we see it in here you okay go down one line okay here we go so now if we look at e so what Linus was saying is that inside of here is the actual error message about the thing so we have okay we have path image no we don't see anything their current target is image base URI current source missing file so it's in there but know that this error is happening inside of p5 and by the time this error makes it to to the editor it stripped off a bunch of the properties so let's see because then we do consult error yeah let's see okay now that's that same error message and this is where it would hook into it to actually show it on the page so maybe that method is what stripping the info I'm curious if anywhere on here um does it say like 404 not found like do we can we see the actual message that's happening in the console no I mean we have source element target you yeah line is saying the code is doing the correct thing it just looks different because we capture the event and not the message that the networking layer logs here's something to note though if I look at the console actually it's a little polluting let's do this go through everything keep going keep going clear the console try again if we see that 404 message in the console then we we know that it's basically happening before this is even kicking in and we got to do something else so let's try it okay so now we get into the p5 on error should show up okay so that's the on air but if we look at the console that that error message is already there right meaning we didn't we didn't intercept it before it happened and we need to so like like that that's that's the trick we do have this error object and it does tell us where the image is but it's not necessarily the network error this is like the image error because this is already shown up but it's not being pushed into our our console logs so we I think we have to do something completely and totally different but I appreciate Linus so Linus is saying if you just try this you'll see it produces the same thing without all the complicated stuff okay let's try it we're just going to create like a junk file throw that in there save it spin up light server so yeah we get the event with all that extra stuff but this error here is not showing up yeah so we are passing in true to bubble up events yeah well I'm just saying as far as I know this message can't be intercepted I think I think that this hour and a half of debugging has resulted in the fact that it's probably not possible so there there are multiple things to point out here the error gets logged to the console as a fill to load resource error and never actually makes it to the intercept of console error so this right here is not showing up via console dot error these other things are we narrative that example but the other errors are being passed through console dot error which ultimately allows it to show up in the the p5 console yeah let's just stop debugging for now so ultimately you this-this-this error we cannot intercept at least for now I mean maybe there's another way but I don't think we can intercept it in fees saying it's almost today I'm gonna sleep it's time actually alright in the-- see you later thanks for tuning in but we can kind of normal it down yes usually wants to make a tutorial on contribution chooses the hardest problem and it's not even possible to solve III definitely knew this was gonna be a debugging challenge cuz like you gotta I mean if we want to fix the buddy we got to you know gotta figure it out okay javascript intercept this specific error message failed to load resource yeah detect and log when external javascript or css fails to load you you see lazy loading asynchronous JavaScript that's not quite what I want filled the load resource that's not what I want caching filled a little resource when using the fetch API cat D Xing you don't even have your free debug stick around that's a great point um when I set up these new stickers I didn't have a free debugs you can see on my old stickers well where is it oh yeah they're 3d bugs 3d books yeah I didn't have an extra one so this one just says hello friend okay [Music] as far as I remember you cannot catch processor driven exceptions Korra's exceptions are thrown with intent looks like you're right thanks for the link yeah so one thing we could do is if we see that this could not load resource message gets called from p5 we can insert our own log which mimics the browser log maybe I don't know honestly though I think I'm gonna I'm gonna call it four there but we need we need some we need some resolve to this episode so we're definitely gonna have that there's a quest a comment from in fee the Sega style.css looks like SSD when it's upside down that's actually like one of my favorite stickers but see that one it's like in the style of the Sega logo SSD okay okay um what should we do let's look at let's look at our to-do list cuz like we I don't think I'm ready to make a pull request yet I'm probably gonna comment and just say like what I've found so far and maybe see where to go from there if you are interested in making pull requests or accepting pull requests I have done videos in the past on how to do that but essentially you would push up to your fork create a pull request and then have somebody review it but I don't have any code ready to go I have questions that I need to ask them or things I need to submit on there okay so we definitely found it we're not gonna submit a pull request we're gonna just like comment with what we found yeah so not that where are we yes code I need a place to just type a comment I'm just gonna type it here and then I can copy and paste it in okay so after a bit of debugging and research it appears that comma well so after a bit of debugging research I have found that the failed to load resource error might not be intercepted how do you spell intercept Abel oh I did spell it right why is the same you know what the spellchecker I have might actually be like UK driven but I'm the type of color I don't know oh yeah color and he says I'm so glad I made this live one thanks for tuning in Linus it was really fun to debug and research this with you yes thank you so much for your comments yeah okay javi are saying how do you pull to the main repo and not your forked version I could I could show that so like if you look on the fork I because the the branch is even with master it's not gonna let me do this but basically what you do is you go to your fork you click new pull request you can say okay so base repository is what you're trying to merge into so this is going to be processing p5.js web editor and where it's coming from is going to be my account and then I can choose a specific branch one thing I would probably do is create a branch called like bug fix number and then the name of the issue or number of the issue bug fix number four six eight so I would create a branch called that push my code up there and then here I could compare the two and make and make the floor list but yeah okay after a bit of debugging research I have determined that the fill deload resource error might not be intercepted all as it is occurring at the browser level how do you spell occurring am i spelling these words wrong to ours occurring as it is occurring at the browser level one option is to detect the one option comma is to detect the filled to load image error provided by P five comma and emulate our and yeah so it's a detect the fill to load image error provided by P five let's get some specific load some comment things like here yeah in handle console events so this is IDE components preview frame I'm actually I'm gonna link to the code on github so they know what I'm talking about so let's go here let's go to the source code so client which one was this IDE modules IDE components preview frame you [Music] you this line right here I'm gonna link to this line yeah okay so after a bit of debugging research I've determined that the filter load resource error might not be intercepted well as it is occurring at the browser level one option is to detect the filter load image error provided by p5 and and inject / emulate and an error to match the fail to load resources error we might do that here cool rabbert work says thanks for this huge lesson you're welcome we didn't we didn't figure anything out but we did like dive into the source code you potentially learned about debugging with chrome and vs code so that's cool you see my thought process when I'm just like trying to figure out where the heck in the code is this is even happening this is a very interesting one though because because of we're dealing with this console.log intercept like it's kind of even hard to debug our own code with console logs I don't know okay so Linus says the error is bubbled up from the iframe to the window this error event is what we are capturing number two the window on error ambition is asking why do spell checker squiggly line this I don't know I think I spelled it right yeah I'm actually I am going to give the line number two window down on error [Music] yeah because we did we did find that code I think was like in utils or is it utils not preview entry console utils this thing like is this even running so we're exporting to functions yeah let's see if this hides okay hijack console error script okay preview frame does intercept or not done this or it imports it in and then injects it here so that's cool so that code actually is making it in for whatever reason I like we were adding stuff here and it didn't sound like he was really doing anything Oh or was it I think it was you know what it yeah okay I get it so like there's this but then there's also the that hook library they're both kind of doing things in conjunction I don't I don't know what the difference is between the two because they're both intercepting the stuff I don't know Lonnie's are saying the air event gets bubbled up to window.onerror yeah and ultimately that is that second off like it's that object that gets logged but we lose all of the information and it no longer says failed to load resource that specifically is like the image load error object um yeah so it's occurring at the browser level one option is to detect the folder load image error provided by p5 and inject such a median error to match the filled low resource error we might do that here cool thanks for the stats in fee [Music] yeah Khan is saying it was funner than I expected that's good Tony says thanks you get you the best thanks for tuning in okay Linus code review my comment that I'm about to post what's what's missing from it or because I know you're mentioning the error event gets bubbled up to the window on error so like technically that that that error and let's just let's just see it in action let's get the broken code yeah so this object here is actually coming from image that dot on error so like you can detect when there is an error loading and image like using like Dom manipulation so this is the on error for the image which is actually separate from the error of resource like get resource 404 not found it's interesting that I'm getting and give a new error message it's this or cool you okay I think this is a good enough comment I'm uh I'm losing it I think I've been coding I've been standing up all day let's just add the comment oh that's a good point Carlos is saying does code pin catch this error yeah let's see what people have already done before let's just see create a pen start coding yeah because I mean the p5.js editor is very similar to this like if we look at the console let's try it we're just gonna do some this so we added the image if we look at the browser console yeah filled the load server responded with the status of 403 so that's happening here but we're not seeing it in the console but if I do something like console dot log not exist we are seeing this uncaught reference error you yeah so it looks like coat pan isn't even doing it in fee is saying I'd replaced the second failed to load resource now that you have two different errors yeah it's interesting when was I saying the failed to load resource error I think that was when I was using Chrome or like the debugger I mean I'm gonna leave both of them yeah yeah might not be intercepted Balazs it's occurring at the browser level one option is to detect the fill to load image error provided by p5 and injects let's simulate an error to match the fail to load resource error we might do that here thoughts and I'll just mention it real quick another thing to note the console on the code pen editor does not forward a 404 not found I'm curious why my console.log isn't working I also got log hello okay so it logs hello but I don't see any of the errors I guess this this one doesn't is this doesn't forward any of the errors in few saying line 20 not 18 where don't know what you're talking about I'm not gonna add the code finding because it looks like code pin doesn't even Ford errors to that the console and hello Christian week Mon I'm actually about to head out but it has been a long time thanks for dropping by we were actually attempting to fix a bug in the the p5.js editor but couldn't figure it out I don't potentially don't think it's possible but essentially this 404 error is happening but that's not getting forwarded to the console here and I don't think it's possible we could fake it which is my suggestion we'll see what anyone has to say about it you cool you okay I'm gonna add that comment and then I'm gonna go encoding for a very long time preview it you oh the second one I see a millionaire to match the browser error I see because I said it twice there we go what's your line Tony in my read me okay that makes sense thanks thanks in fee Christian is saying I just didn't realize that the stream wasn't over have been watching the last video instead cool how can you say it's a browser issue yeah like not necessarily a browser issue it's just the fact that browsers at least Chrome will log that message but not forward it to any error handlers because it's like a network level error let's say that you okay you it's interesting that I'm getting different error messages yeah this says filled a load resource and then this one has like a get let's just reload yeah weird sometimes it's that error sometimes it's another error okay preview you okay add the comment that is my contribution cool question from [Music] oh cool thanks thanks line is dead for for chiming in yeah cool thanks so much Robbins is Robbins on is asking do people sometimes get paid for contribution yes a lot of times if a company uses an open-source library they might actually allow their employees to use company time to work on an open source project so you're not technically technically you're getting paid directly to work on that library but as an employee of the company like a salaried employee of the company they're letting you use your work time to work on the open source project that actually happens a lot okay I added the comment I think we're good there we have all these tabs of research we didn't figure anything out but we did a lot of debugging it was a lot of fun thanks everyone for your comments your contributions all that stuff oh yeah that's a good call infi saying Phil to load resource is production the other one is like web pack thumbs up Linus thanks for thanks for helping out all right I think that's it yeah we did it yeah I'm gonna go eat my dinner now all right everyone wherever you are in the world have a wonderful morning afternoon evening or night until next time here's this [Music] you you

Channel: Coding Garden

Views: 17,523

Rating: 4.9464626 out of 5

Keywords: programming, debugging, html, learn web development, beginner, node.js, full stack javascript, live coding, css, learn javascript, debug, learn node.js, how to code, web development, backend, open source, full stack web development, live, p5.js, live streaming, mechanical keyboard, educational, vscode, frameworks, learning, lesson, coding, javascript, full stack, fun, learn to code, frontend

Id: DnvhWAx2I7A

Length: 168min 3sec (10083 seconds)

Published: Sat Aug 24 2019