Build An Uptime Monitor with Inertia

Sign in Get started

This episode is for members only

Sign up to access "Build An Uptime Monitor with Inertia" right now.

Already a member? Sign in to continue

Playing

44. No sites fix and placeholder

Episodes

0%

Your progress

Total: 4h 59m
Played: 0m
Remaining: 4h 59m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. A fresh Inertia project

02. Sites

03. Site and dashboard setup

04. Building the site selector dropdown

05. Making use of API resources

06. Setting the default site

07. Setting up Vue modals

08. Creating a site

03. Endpoints

09. Setting up endpoints

10. Enum endpoint frequencies

11. Creating the endpoint form

12. Storing an endpoint

13. Validating and authorizing endpoint stores

14. Normalizing the endpoint location

15. Displaying endpoints

16. Deleting endpoints

17. Toggling inline editing for endpoints

18. Applying a watcher to the endpoint form

19. Storing endpoint edits

04. Checking endpoints

20. Determining endpoints to check

21. Creating a job to perform a check

22. Making an HTTP request

23. Scheduling checks every second

24. Setting up the check relationship

25. Updating the job

26. Showing the last status

27. Expanded list of checks

28. The response body modal

29. Authorizing the endpoint details

30. Calculating uptime for endpoints

05. Queuing

31. Setting up queues

32. Queuing the endpoint check

06. Email notifications

33. Setting up email in Laravel

34. Site model email notification storage

35. Adding email addresses via the UI

36. Listing and deleting email addresses

07. Downtime notifications

37. Observing when to notify

38. Creating an endpoint down notification

39. Creating an endpoint recovery notification

40. Making the emails a bit friendlier

08. Extras

41. Deleting sites

42. Eager loading

43. Recovery notification bug

44. No sites fix and placeholder

Transcript

00:00

you may have also seen this if you've been following along but if we don't have any sites so if we delete the final site that we have what we actually end up with on the home page here is

00:10

an error and we also just see if we just get rid of this when we do fix this we will see just an empty page so we're going to fix up this issue here and then we're of course going to go on to show a little placeholder to prompt the user to create a site so this issue here as we can see from here comes from this just here we don't have a site so we can't access the endpoints on a site

00:38

so what we're going to do is head over to our dashboard controller and we're just going to add a little ternary on here to say well if we do have a site of course go ahead and grab the endpoints otherwise just set the endpoints to null let's come over and give this a refresh and here we see cannot get property id on null that comes from the site resource itself just here so we

01:02

need to fix that one up as well maybe not the cleanest solution but we can figure it out and let's give this a refresh now we end up with a sort of empty page so if we come over to our console here what we see is cannot read data on a certain thing and that is this site at the top we know that over on the dashboard so if we go over to the dashboard page at the very top here in the

01:24

header we're saying site data domain we want to make this an optional because if we can't access the site then we don't want to access any of these properties either so let's give that a refresh and we still end up with an empty page but that's for a different reason that is we are trying to access endpoints and there's no need to so what we're going to do here is go and wrap a conditional

01:47

around all of this stuff here if we don't have any site available so let's create a template out here a template out here to wrap all of this all the way down quite a lot here but that's okay here and let's go all the way up here and indent this there we go and this conditional is going to be if we don't have a site then we're going to have a little placeholder in here

02:15

not forgetting to add in the v else in here as well so let's go over give this a refresh and there we go so at the moment we don't see a title which is fine you can even add something in there in its place we only have the option to add a site but we also have a placeholder in here prompting the user to add in their first site so let's go ahead and keep this paragraph in here

02:37

we'll set the text to center change the text to just say grey 500 set the font to semi-bold and let's make the text small and let's swap this out to say no sites yet create one to get started and of course you can change that to look however you want so there we go if we don't have any sites available the first thing that we do is fix up the fact that we're passing down these two pieces

03:05

of data which doesn't make sense because we don't have a site in here all of these values will be null and then go ahead and wrap all of our dashboard in a conditional because there's no point listing through endpoints if we don't have a current site selected and then finally just adding in a little placeholder to prompt the user to add their first site

Episode summary

In this episode, we tackle an issue you might have spotted if you've ever ended up with no sites left in our app. When the last site is deleted, the homepage throws an error because there's no site data to show or endpoints to list out, which clearly isn't a great user experience!

We start by looking at why this error happens, diving into the dashboard controller code and noticing that it's trying to access properties on a site object—even when there isn't one. To fix this, we add some simple checks and use ternary operators to make sure we're only trying to get endpoints when a site exists. While refreshing, we still see errors popping up, so we hunt them down elsewhere (like the SiteResource and the dashboard's header code) and fix them by making our data access optional.

Once we've resolved the errors, our dashboard is technically "fixed"—but now just looks empty when there are no sites. So, next up, we improve the user interface by wrapping the main dashboard content in a conditional template, and showing a friendly placeholder message instead. The message encourages users to add their first site, and we tweak the styles to make it look nice and clear.

By the end of the episode, you'll see how to gracefully handle empty states in your app and give users a helpful nudge in the right direction when there's nothing to show yet.

Episode discussion

No comments, yet. Be the first!