Handling errors in your app is one of the most important things. Being that said most of us
overlook it and even if we do Implement some error alerts they tend to be the generic something went
wrong message. Let's fix this. Let's learn how you can write human friendly alerts right now. So let's
take a look at how we can write human friendly error alerts. Now if you are encountering this
as a developer then most probably you would just again go with the simple something went wrong
or maybe you just propagate the description that you got from your servers, but basically
that's not what you want and we are going to use store.rebeloper.com/error-alert-manager.
Go ahead and check it out. We are going to learn how to write some alerts and basic SwiftUI
and what's kind of the problem with them and what this error alert manager solves. Let's write
some human friendly error alerts. Now this video is kind of my take on this post when life gives
you lemons write a better error messages and what this basically says is that usually as developers
write this lame error alerts. Whoops, something went wrong and then we passed the blame. Use some
technical jargon and the fixing of the issue is kind of generic like try again later. Now it
suggests that we should instead say what happened that would be the title of our alert then provide
that we are ensure that everything is fine, don't worry, your changes were safe for example. Say why it
happened then give them a way out what should be the fix of the problem and if that doesn't
really work then, oh sorry help them fix it first and if that doesn't work give them a way out.
So this is what I kind of built out and that is a Error Alert Manager. It's at store.reveloper.com/error-alert-manager
and yeah here is our example in iOS. So it's basically the
same text and this is what you are going to get. And it's really, really too easy to set up, but
before we jump into an example on Error Alert Manager let me just show you how we would drive
this in Swift basically SwiftUI and show you what kind of those problems are. So here we have
our demo project. It's just a simple demo project. We have a server error which only has an error
description, that's file and then we have our content view which has a few state variables
so I go through all of the examples and finally our content view is well basically let's just add
this into a navigation stack so we will be able to show that navigation title that we have right over here.
Also I have also drag and dropped our error alert manager which I'm going to show you at the
end of this video, okay. So first of all let's go and create an error alert like we usually do and
that's basically using a button. So we are going to use a button and let's just name this trigger
error. So trigger error, alert but let's just go trigger error and I'm going to use
the is error alert triggered and I'm going to go and toggle it and right over here I'm just going
to go alert and what I'm going to use is basically what we usually use, is the is presented in error
and actions. So with this presented is dollar is error alert triggered and then for the error
I'm just going to use the server error dot account connection failure. So I'm going to use the error
that I got from the server and for the actions we don't really care about the actions for now, that's
what we usually do because then we are going to get a default okey button. So let's build and
run and see how this looks like, okay. Trigger error account connection failure okay but as you already
know this is kind of not what we want the users to see. They will just uninstall our app automatically.
It's kind of you you can't be sure about that. So what could we improve upon this? Well we should
actually add some messages, a little bit of text and then on the title. So then let's just create
another button. So that would be a button with a title and this time around activate error and
the action then would be is, oh on the action is error alert active. Let's just toggle it
and right over here on the alert I'm going to use the one with is presented actions and message.
So usually that is our next step for creating better alerts. So right over here I'm just going to copy
out these dummy texts that we usually add for the title. Whoops, something went wrong, is presented is
we are binding it to the dollar is alert active. Let's just have a little bit more space here and
then for the the actions let's just not add any actions because the okey button is still fine with
us and now for the message let's add in some not so good data but still the third party you are
trying to connect isn't responding, so we can't fetch your data try again later, okay. So this
is a little bit better. So activate error whoops something went wrong and all of that stuff we can
tap on okey. So this does have some issues because yeah the user is kind of scared what's going on,
what's going on with my data. So let's write an error alert with some good messages and again I'm
going to use the same alert. First of all let's create our button with the title of maybe show
error, okay. Let's just move back the action will be is error alert shown.
Now we are going to toggle it and right over here let's just create an alert is presented
the title key is presented actions and message. So now we are going to get a little bit serious about this.
So let's see on the alert, well actually yeah before we do this let's just go a little bit
back and let's do the one with the error. So we are going to have a message but we do want to use also
the error. So alert and let's just use the one is presented error actions and message, yeah this is
what I was trying to do. So it's presented dollar is error alerts shown for the error again.
We are going to use the, let's see the server error dot account connection failure. The actions,
now let's just, well maybe we don't want to use the actual error. So for the actions what I'm going to
do is just add in two buttons. Try again button and then a contact customer support. Simple buttons,
they will just print it out and for the message I am going to use the error and let me just copy
this out because again we are going to have a lot of text right over here. We are first going
to create our message. Now how do we do that? If the error does have a failure reason then we are going
to use this one and yeah basically if it doesn't have, oh sorry if it doesn't have we are going to
use this one, okay. And then we are going to add in the mass. So let's see how this looks like, again
we added some buttons added a little bit better explanation of what happened. We have a try again
button, then we have a contact customer care which is really fine. We still kind of don't have a new
line right over here so it's kind of confusing and if you want to create multiple errors with
this then you would just need to create all of these state variables over and over again,
it's kind of a pain to do all of this consistently. Okay! So here comes Error Alert Manager. That will
make your lives really, really easy.Again Error Alert Manager is a store.rebeloper.com/error-alert-manager.
Go ahead and check it out, okay. So let me just show you how easy it is to set this up.
First of all let's just go back into our root of our project and let's create our Error Alert Manager.
So let's just create the private state object right over here, Error Alert Manager of type
let's just jump right over there. Error Alert Manager, okay. What we want to do is just go uses
Error Alert Manager and just provide what we have just created there, okay. So now
your project has Error Alert Manager available as an environment object. So we can just use it.
Before we go into that we want to manipulate this server error as you saw in the previous versions
there were missing pieces. Let's just go into the localized error definition. You see we have an
error description that's fine but we don't have a failure reason, recovery suggestion and a help
anchor. Now the error description is okay what just happened the title and then the failure
reason is just providing what just happened. Recovery suggestion what you should do to fix
this and help anchor what you should do if even the recovery suggestion doesn't really work.
Okay! So let's create a local error. So let's create a new file and let's name this local
error, there we go. And this will be basically let me just have some space right over here an enum
of named local error and that will be a localized error and we're going to have one case.
I'm going to copy this out and it's named account connection failure and it will be passing along
our server error. So we do need to have an error passed along and that is a not a local but the
localized error and then if we do want to override that server error we should have a boolean so yeah
may check true or false on them. So overwrite and that will be a boolean, okay. So now it's time
to add in our error description failure reason and all of that. So for the error description as you can
see it's just auto completing because it does know that this is a localized error. We are going to go
through a self, so switch self and we only have one case here but let's just type that out case
dot account connection failure. We're going to have an error, so let error and then we're going to have
an override. Let overwrite, okay. Let's see what we are going to do with this. First of all we want to
compose a message. Let message and message, there we go and that is kind of a much more readable
message that we have currently getting from our server. Unable to connect your account it's much
more human friendly. Now what do we return? Well it's not exactly this message because maybe we
want to override it, let's just see how that looks like. So we are going to return override,
so we are checking if we are overriding it. If we are overriding it then we use the message because
that's the overridden message. Otherwise we want to make sure that we do have an error description.
So error dot error description otherwise we default back to our message and basically that's it.
Now all we need to do is just do all of these for the failure reason, the recovery suggestion and
the help anchor. So what I'm going to do is not waste time on those because they are exactly the
same with different messages. I'm going to just paste them in right over here. Let's select all of
our text and indent like that with Command + I, okay. So now we have our local error, then we are going
to use that. It's time to move back to our content view and use the power of Error Alert Manager, okay.
So first thing first we want to grab our Error Alert Manager that's kind of a tongue twister,
I know it's really hard. So private state environment, that private environment states, that will be a
private environment object, sorry because we are granting it as an environment object. Error Alert
Manager of type Error Alert Manager, okay. So now we have access to it. So let's create a new button
maybe right over here at the bottom, at the bottom right over here a bottom at the button.
Okay! So button, title and action and let's name this well maybe present error.
Okay! The action will be is error alert, well let's just see, well yeah we are not going to
do that because we are going to use Error Alert Manager. You know, I just got lost with all of the
state variables. You don't need them right over here. So Error Alert Manager and dot present and
then it's just that. So we want to present. So an error and we could just add in here our server
error but because we already created our local error let's just use that. So local error and dot
account connection failure with our error and that is our server error dot account connection
failure and should it be overridden. Let's just override it. So let's just set this to true.
Now we still have two things, recovery suggestion and help anchor. If you recall all of that logic.
So let's create that. Let recovery suggestion, recovery suggestion equals and you can have an
error alert button. So this is what I want. You could just add a role in here, I'm just going
to use option return to just select also the role, so you can just have an idea of what it does, okay.
So what we should do here is create the try again button. This should have maybe a destructive role
and the action will be just printing out, print out try again. So now that we have our recovery
suggestion let's just add it right over here and let's focus on the help anchor. Now the health
anchor will be kind of the same. We are creating an error alert button. Let me just copy this out,
paste it in there. We don't care about the role on this one and the title should be basically contact
customer care and also that will just print out contact cost customer care with small caps.
Okay, there we go and we just add in our help anchor. So as you can see it's as easy as it is.
We create a recovery suggestion, a help anchor and we presented that error. Let's build and run
and see how this looks like. So present error and as you can see unable to connect your account, your
changes have been saved and so forth. So we can just try again and contact customer care. Also
because we added a destructive button there's also a cancel button. Automatically added. Now what if
I don't really want to have this as a destructive. So what I'm going to do is just copy this out, let's
just comment it out and then let's remove this destructive role. Let's see if I build and run what
is going to happen. Presenter and now you see there are only two buttons. Also maybe I just want to
have a cancel button but how do we add it right over here? Well after the help anchor you can just
add a cancel button title and I'm going to add in here maybe dismiss not the default cancel button
and that will actually add in a dismiss cancel button. As you can see it's just dismissing and
yeah it's really nice. This also works when we add in our role of destructive right over here on the try.
So that will kind of override that cancel button for the dismiss title for that button.
So it's really, really great. So that's how Error Alert Manager works. Go ahead and check it out
it's at store.rebeloper.com/error-alert-manager and if you did like this video make sure
to check out my other video about how I learned to code for hours on end it's right over here.