EFS032: Rendering Errors in Blazor Components

hi everyone uh this is another session for me and stanislav here to continue finalizing a timeline component for a decentralized social media platform that we call to rfu uh yesterday you and i kind of you know played around with the code and got you know the uh the spinner and i saw your pr thank you for doing that just for people you know that um just for the continuity of the series i want to show you guys what stanislav did here if you look at he created a little pr here for something called uh spinner bass let's go here you know here's the here's what he did so he basically went and said here's tarafu web and then here's a bunch of you guys have a bunch of pr's waiting here christopher uh wants to to merge a lot of these for the comments but he's still just so here's the base right here and uh and and what this does i like that you know this does is that you know it's basically a spinner all what stanslav did here is that he basically exposed a bunch of apis through here and then he basically went and said you know i want to be able to pass in a visibility by the way we might just need the visibility value like this binding is great i guess it would work i guess that would work anyway and you know and then instead of the uh out of the box card base you're just adding in the spinner in here and and it's just consuming the data what about this guy this is just for uh this is like the example that was for the demo yeah yeah that's fine so okay so we have this guy now let's go back to our hour do you want to show me you know yesterday eagle eagle kind of suggested a couple of things in terms of you know uh delayed tasks let's take a look at that and see what it's like and and let's see how far it would go here we go right so here basically you can see that our branch are actually working on the components timeline and basically what i did is to replace the spinner that we have from syncfusion right away with the base that i built it in now and so basically when i started now i can show it quickly you're probably gonna need like some sort of a delay or something because the i i did bring it in to show you okay so it should be in place you know if you put the delay on the api oh look at that look at that some magic man some professional stuff nice and there we have our timeline nice nice um okay so so what's what's that what uh there you go you put in five seconds there nice nice this thing is progressing just fine we keep adding these new things and it's just getting into nice places right so so yesterday just for the people watching us you know um eagle eagle is the creator and innovator behind a library called b unit it's the testing framework that we're using to basically develop and test drive laser applications and it's one of a kind i don't know of any blazer testing frameworks out there as we stand today at this moment in time where is it december 2021 there is nothing out there in our world today that can actually compete with this product so it's one of a kind and yet you know eagle continues to add data and add uh sorry to add features and functionality into it as if he's competing with 10 other projects he has sponsorship from all over the place like you know the sink fusion pl people support him the teller people support him and then there's you know all these other individuals that really like to his work so anyway he he reached out to us yesterday through the channel you know in the comment section he said hey guys you know there's a way that you can you know cause and kind of an infinite delay stopping time basically you're going and saying instead of doing let's delay this how about we stop time completely so what did he suggest i think stan you got you got in contact with him what what is that and zoom in a little bit you know watching people watching us on their phones you know find that german stuff that you oh my lord look at all that stuff info what airkin okay let's go [Laughter] right oh so now we now we zoomed in so basically i adjusted the tests to uh count also for the spinner that we now have right and then and also did the change because the spinner takes like the value like as a text as before and also to verify that it is like visible so it was nice nice um just change the test and then um eagle as you mentioned proposed in the comment that we should utilize like a task completion source which basically uh causes the task to never like run out or end so we don't need to pass the delay in here so i kind of like tried it out and it worked a little bit and yeah it worked it worked so so i have two concerns with this you know just two concerns um you know number one if you if you fire a task that never ends what does that do like you're firing a task in your system right so that thread is gonna fire off so every time you run the test you're creating a task that never ends right it i don't know what does that mean in terms of um resources utilizing threads on your system with kind of a little bit pollute your system with threads that never end so that's concerning the other thing is the other thing that i have is is that i thought we could just you know like see you're writing two extra lines of code that might be really hard to remember off of the top of your head instead of just introducing a delay so from a from a readability standpoint i feel like when you go and say let me delay this task it's kind of more telling of the story that is happening rather than just creating a task complete certain nobody's going to remember that you see that you gotta have to you know see see that delay one i remember that easily because yeah oh yeah the mock library will introduce a delay so so this solution is it's a smart solution and it's probably more consistent but i'm not sure about the readability and resource consumption you know that these are the two things what do you think about that and we might pull the guy in and just argue with him a little bit yeah maybe he knows something that's really i i did not try it like to check the benchmark like resources wise if it's like after the tests if it kind of uh um i think called like dispatches or whatever but also go ahead go ahead go ahead go ahead and also eagle mentioned that like it doesn't look this pretty because we using like the value just right so i had to wrap it once again into like a value task but actually when we would return from the broker like a test only then it would only also be like uh one line of code oh no so it's it's also forcing us to kind of revert to an older pattern let me tell you why why value task is better than task first you know value task executes in 60 nanoseconds task takes about 120 right so that's double the time in terms of execution but also task does something really um inefficient with the compiler it tries to trick that compiler in thinking that it's doing work that's asynchronous even if the value is present value task ideally is value or task meaning that if you have the value give it back to me but if you don't go ahead and execute a task and go get me that value right so so now it's also adding more complexity in terms of not allowing no man let's go with delay this is a little bit too much i wanted i i i wanted to i wanted to show people though what what's out there that's the whole point of this channel i mean there's 50 000 options out there you can literally create a value task that has an infinite while loop that never ends right but you know again it's smart and sometimes smart is not the most readable and and the most appealing i think delay is better let's go with delay let's revert back to that because delay is regardless of the regardless of the of of that of what we're trying to do it's actually telling you that this guy is going to be delayed a little bit and that's when we're going to be displaying the the uh the the the loading screen right it's much tilling to the story than that one right a lot of people will come in and say well think think about think always think about the other engineer right the other engineer that will come in and be like what is this task completion source and you know i don't want people to go do you know research just to understand my test i want them to just come out of the street look at your test and know that this is but nonetheless you know i think it's a pretty uh pretty smart solution you know anyway let's go okay um but i can like keep it in the history what this says yeah absolutely yeah this is why i'm yeah yeah i want yeah absolutely we can at any point in time go back and say oh look we can use this i 100 100 so see that it's even easier to remember you could just go there and return type and you could just say delay and that's it yes so that's a value and then you also want the delay which is uh delay yeah yeah let's throw some 500 milliseconds there or something time span it has to be like a a time span so so you just gotta do time span from milliseconds no not new you just type time span from milliseconds and then you could throw 500 in there and then this other guy you can say value in front of it and i think that's it i wonder if value should go first before delay you know it doesn't matter because you use parameterized what what does the what does the return async say and said that this should be first the value yeah that makes sense give me the value and delay a while yeah i like that yeah i like that i like that more anyway so that's that let's run it and see see this one is much more readable i think i don't know what do you think well say something from the from the really perspective standpoint i think this is uh yeah more readable definitely um it always like maybe like a little bit fiddly that you have to like try and depending on what you try to verify that the 500 is good enough right depending on right that's that's that's the system and so on yep that's the one thing that makes you know the other solution a lot more stable because this could be a recipe for flaky tests you know but luckily if we're resetting everything and starting the test from scratch that shouldn't be a problem i hope but we'll see anyway we have a system running so let's let's do this let's make a commit you know for the for cleaning up this test you can take put the test name you can type just code drop and then you know put the you know to tell the the system you know what are you doing let me check that it's uh running green oh yeah that's right that's kind of important and we already did the test for the loading with the spinner that's already there right it's like the same test that it spins and is visible under value nice now we just need to handle the errors what do you think about that we need to handle there right okay so here's here's the deal we want to cause an exception you know some exception needs to happen you know is it okay if i write the test i'll take your screen for a second okay you want to write all the code don't you you just you're just hugging the keyboard i think pair programming is more beneficial to you than me [Laughter] no i'll tell you what i really really do enjoy enjoy pair programming because you get to just hang out with people and you get to just write code with them and you know you pass back and forth code going back and forth because you know there's some pairing styles where one person doesn't write code at all they're just sitting there you know they're leading the work and um uh you know it's just uh um i'm like absent or yeah you know they just just get disconnected and they end up just checking you know facebook while the other guy is working it's not engaging right i had to use i had to use pair programming with a lot of teams that i worked with so i can keep them engaged especially during the pandemic where everyone is working remotely right it's so easy that you just end up alone in a corner and somehow just working by yourself so i thought it's probably better if we engage pair programs i'm so glad i made that decision for my team because it helps a lot with communication and all that anyway you know let's let me run all the tests here real quick i'm pretty sure i have the ones so you are in components my friend oh my god i can't believe we're already building a timeline this is crazy man you know how this thing evolves i can't wait to show you the top bar and drop down and creating profiles this thing is going to get real quick real fast okay let's write a test in here so we need a test in here for erroring let me paste in here let me create a new partial class like this and this here is exceptions okay and in this area here we want to cause we want to cause an exception to make trouble want to make some trouble okay let's just go here and say act public void should render error if exception occurs there's no logging or anything we're just causing an exception to happen right okay that's cause let's cause trouble so this is var you know some exception equal new exception there's that your exception and let's also do you know some some error message some error message right so this here is get random string we don't have get random string yet that's okay we can get random string we again go here and say uh private static string get random string like this and this new library will give you the mnemonic string kind of thing and i think we can pass word count in here so we can actually make it a message right i can go ahead and say get random number this is our way of going and saying you know why we use random things all over the place right nobody can hard code a passing value in the logic but also at the same time sometimes it reveals things that you didn't know about your system like maybe it only takes the first word maybe you're using a third-party library and it's doing something funky behind the scenes right so here's get random get random string like this and then we can go here and say i can pass in that message in here and say this is some error message right and then i can go well let's do this let's say random random message like this and then i can go here and say string exception message right and then also expected error message which is the exception message cool and now i can go here and say this is the exception message right here i can break this guy a little bit break it down like two by four and then let's cause an exception so let's go here and say this dot what is that mock the the guy that we're using here so this is your service and then service dot retrieve retrieve all post views async and that guy will throw asynchronously some exception cool this also shouldn't be some exception we'll say just you know just exception you know here some meaning that i don't care it's a filler that doesn't change anything in the outcome of the test now let's render this guy says this dot render timeline component render component and this is your timeline component like this okay now what are we going to do this dot render timeline component dot and we want to make sure that our label is visible and we want to make sure that our label has the right message in it for now we're gonna render it some maybe maybe you're gonna add an image we're gonna get cute about it later but for now make it fail make it past and then make it pretty right or make it make it work make it right and then make it pretty right so i can go ahead and say instance dot label value should be expected error message right expected error message what else i have an expected state right so let's go ahead and say timeline state timeline component state expected state and that state should be timeline component state dot error there is one right so i need to make sure that the state of my system so this dot rendered component state dot instance dot state should be expected state all right what else do i care about stem slop there is the [Music] error message on the component yeah the error message on the component that's right that's right and that even comes before this one so this is rendered component.instance.errormessage that's right should be expected comp error message so we hand this over we set it up on the component and we just visualize i love that we also want to make sure that the call has actually happened only once right so verify so this is my service dot retrieve all post views async we want to make sure that this guy happened only one time okay so there's that guy and we can go here and say this mock where to find no other calls sure i also want to make sure that there's no other visible component on that system so it's really important that we're not letting any other cards render on that system right so i want to make i want to go here and say you know uh what did we call it in the in the rendering part i want to go here and say give me these guys and all of these guys should be null all of them should be null so these guys here host components host components should have count of zero right so there will be none of them in there and i don't know if this list returns an empty list or does it return no list at all we'll find out we'll find out right so this is me this is me ensuring that this guy but also what else do i want to make sure i want to make sure there is no spanner there anymore so this is run the timeline component dot uh instance dot so the things that are not supposed to show they're not supposed to show the things are supposed to show they're showing so that's my test right here let's run this guy and see how the world works with us today and we don't need this uh inheritance because you already have partialized classes so you don't need that guy in here either that was just a copy pasta let's go here so this guy's failing why is this guy failing said he said i expected you know this exception has happened and nobody handled it this is what this is you know it ran and it threw the exception and nothing handled it right so now it's your turn to make it go green yay go for it let's go okay let's go let's go to town fail okay there's just pushed it here's your screen yeah you yeah you do code and i'll watch what do you think about that idea i like that idea okay then lean back let's let's try to figure it out so first thing what we need we need to handle the exception whenever it occurs so you need here to wrap it into exception this would be anything right and we still need the functionality from before to work as always yeah and here we need to do our handling stuff so do we need that state has changed we need it right or do we i don't know i think we tried last time we did not yeah yeah let's go let's go let's go i think this only has to be like on the base component so okay so first error message we wanted to set to exception message yeah and already writing the code for you and also and also the label value should be nope nope even even even the co maybe in the code will tell you don't set up the value in the code pass it that's why we have it in the first place right so you don't have to do anything here you just need to just change the state back to error that's all okay and since this is a not a return thing you don't need the extra space between the two lines let's take that one out and then let's use a pretty blazer to kind of do that switch so let's go to the ui and do a new case a new evaluation just like this condition nice evaluation would be then if the status is error [Music] [Music] yeah see when it's a string shari was asking me about this yesterday she said to me when do you use at and we when do you not and said if it's a string and you're passing into a string it's probably not going to understand it's going to show error message as a string anyway let's run this sucker and let's see let's run the the test let's see oh you didn't even run the failing test oh dude dude my dude all right there you go now now let's do this do you know how to pull the cord out of an api like like jumble up your connection string your api url jumble it up and then just run your code so go to app settings go to apps settings no that guy and then just instead of 44336 just just right in there or something yeah jumble it up just screw it up you know yeah there you go i think that guy will freak out even more because you know there is validations on the port yeah it won't even start look look it didn't even start if you if you if you minimize your screen you'll see visual studio screaming look it's because it does validations just just put a uh put a goofy number in there okay so this was too too much messed up right yeah way too much also this is still too much too because your port can't be more than i think four or five so go back and uh and just make it just make it bro just type in there 1985. you you told me to go ahead and go go go full full screen okay okay this guy should error out now so it's trying to connect which is great and then post dependency error occurred please contact support see and you know now we need to make this message pretty we need to put something in there that can make this you know look this is where we get we need to go and create an image based component and this image based component will carry something like oops sorry or a cute dog like amazon does when amazon goes down they show a bunch of dogs you know they start selling that they turn into pickle you know pet smart start selling dogs and uh you know so we want to be we want to be able to view some because this is it this is once we're done with this component that's it we move on from there so we can't leave any loose ends right so we need to find so there's two things that we need to do we need to create an image base and we also need to find a nice image that resembles all an error has occurred right this is one case here where the details of the message doesn't matter right but we're going to keep it there and we're going to make it a little bit more human readable but what's more important than this is to create that image base okay so what do you think about what do you think about connecting um connecting the well let's well let's first let's create the image based together what do you think about that let's create the image first commit that guy yeah yep no there it is okay we're almost done we're that close okay that's yeah pick up a new branch oh dude pick up a new branch so create a new branch pull from master or you can do it this way too and um let's let's pull it from master instead because if you try to merge this it will merge the timeline code with it right right or main yeah okay go for it you became the base components professional now nobody can compete with you you made more base components in these open source projects than anybody else and that's something right and they are fun i mean i i find it fun to wrap like the native frame also like the frames they have yeah as long as you understand why we're doing what we're doing that's all that matters to me because these patterns continue to live a lot longer than the technologies that are being used to implement these patterns let's go okay okay so image base that's right so all we really want to do is just like pass maybe maybe a width or something but we just want to pass the url for the image right component base and then let's have it take a parameter of some kind so it would be like a string right yeah don't forget the decoration though okay now on the image like uh it's just the img yeah that i mean we're gonna we're gonna do much much better things later but uh for now let's call it url should i also do it like a source or is it fine like this yeah we could just pass a url i think a url is fine let's pass a width to while we're at it your width will be a string i'll explain later just width okay all right let's do it [Music] okay let's test it let's test it so so go to the internet and just find any image on the internet just type error message or something something funny oh god it's all windows error messages that's embarrassing uh let's uh let's see uh let's say something like uh error error just type error don't write messages right there yeah much better let's uh let's find something hilarious just like the that huge x button you know at the top let's take that this one i'm sure yeah that works too a png is yeah that works let's do that so let's save that guy oh my god i can't read you so save image as whatever that is and then let's put this in the ww root folder in tara for web so go into web and then there is www root and then instead of css create a folder called images imgs yeah and inside that guy just throw it in there and just call it something easy to remember like a error.png or something is that an svg we don't we want a png let's see if it'll save it nice let's go let's go let's go okay there you go if you open that file does it open up yeah yeah it works perfect yeah let's display that just for funsies for now you know so go back to that file that you added in your solution scroll up all the way to that file right click properties and copy always so so so in your solution in your solution find that file and then copy like the okay copy the link the source right no no just just navigate in your visual studio in your solution no don't worry about that guy so scroll all the way open up the w route and then just uh images perfect right click on that guy properties and then just say copy always the copy to output directory yeah that guy and then save all that i can't tell you how many hours i sunk into this and i'm like where is my image so okay let's save let's save all of this and let's go and try this on your index page the image base thing yeah let's do that yep yep and it should it should auto complete for you so double quotes and just type double quotes and just type in their um slash images slash the error.png [Music] yeah yeah let's throw that guy in there and see okay and the width would be yeah let's just say i don't know 100 you know 200 px yeah let's close this guy and let's run it and see i think i think we may i always forget you know but i think we may need to remove the you know the first slash we'll see let's just run it first until that'd be fun yeah look how easy is that right so now we want to display that instead of the label right in in the failing test just the exact same way you did the spinner do this one as well does that make sense yeah and try to centralize it and that's it so it will be that x button and then maybe an error message underneath which is the message that's coming so both of these you need to be centralized go ahead and create a pr for this and uh and that would wrap up our task my friend okay nice cool do you have any questions for me i hope i hope you're having fun with this we're just hanging out yeah a lot of fun a lot of fun actually all right okay my friend you know i'll talk to you later then you know thank you so much i mean you know if we if you create a pr for this today tonight ricardo and i will be able to add menu drop down menus from the card itself which is going to be really interesting because we want to be able to be we want to be able to kind of have a bunch of options and a part of these options is to be able to go and say delete share edit edit the card all that good stuff oh i can't wait to i don't know i don't know if the modify pipeline is already implemented do you know the post view modify do we have that no there is no modify this like only return and delete and i'm working on adding like the ads yeah let's finish the ad we're going to create a little button on the side that says new post we click on the button it pops up a dialog and that dialogue we add in there and and then click send then it basically creates and then maybe we can play around with security a lot of people have been asking me how to secure your uh your blazer applications and all that kind of stuff stanislav you are awesome you should know that thank you so very much for hanging out today and uh let's connect let's connect tomorrow if you have time okay my friend right right okay till the next time then okay have fun right all right tell the people what to do you you wrap up the channel today you're you're the guy today what should we say you know how do you tell people to wrap up a youtube video go ahead no i would just say how do you tell people have a good day how do you tell how do you tell people in german if you have any questions comments or concerns please drop a comment in the comment section don't forget to like and subscribe say that in german go ahead i'll i'll sit and wait and not understand anything for all i know you could be telling people this guy's a fool don't subscribe this [Laughter] there you go you know what to do thank you okay bye brother you take

Channel: Hassan Habib

Views: 230

Keywords:

Id: N6Sy7fiubhI

Length: 38min 52sec (2332 seconds)

Published: Wed Dec 08 2021