This episode is for members only

Sign up to access "Chunking Large Uploads in Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
10. Handling errors

Transcript

00:00
okay there's a couple of ways that we're going to handle errors the first one is with our receiver if there is no file so if we don't actually have any data we're going to throw an error and the second is going to be showing any errors that come from our back end on the client side
00:13
so let's start with our controller I said we were going to come back to this just underneath our receiver we want to check if there is no content uploaded so to do this we just go ahead and say is uploaded on our receiver and we check if this is false and then typically with this library we're going to throw an upload missing file exception so that will throw that and we can
00:36
catch that on the client side so let's take a look at this is uploaded method checks if the file is uploaded and it will do its checks in there check if there's an error and then we'll throw this so we'll know what's happening okay so this is going to happen if no file has been sent through and of course if this bar is missing content so we won't demo that but that's typically
00:56
what we do inside of there now what we are going to do is at the top throw a manual exception so we're just going to throw a new exception in here just to trigger an error on the client side and we're just going to see what happens so let's go over and just try and upload a file and we will see what happens within our ui so you can see here that we get to the first chunk
01:15
obviously the first chance always going to be attempted and it just stops we don't have any kind of error message or anything nothing is really happening here so what we want to do is head over to our dashboard and we want to store any errors that we get inside of our state so let's go ahead and say error and we'll just set that to null for now so down here within our
01:38
uploader you guessed it we have an error event that gets sent on error so let's go ahead and pull that in and this will be the error inside of here so let's go ahead and just console log on this error and see what we get so let's choose another file again we know that we're throwing that exception from the back end and sure enough in our console we get a error message in here
02:03
with any detail inside of here so server responded with 500 we know that's the case because we've thrown an exception so now we want to do is catch this set it into our state and then show that error message so we're going to say state error error dot detail and let's just remind ourselves that is our message and that has now put that into there now it's up to you how you handle this error
02:27
if we just come down underneath all of this content here let's just see what this looks like so we'll just go and choose a file yeah we'll just keep it here so you can just say vif state error and then in here just show that error out so that is going to give us when we choose another file and hit upload server responded with 500 stopping uploading now it's up to you how you handle the
02:58
state here because this could just be a temporary error so for example if we were to go over to the back end right now and get rid of that exception and i was to click upload that is going to start working again now we just need to kind of reset the state here in terms of our error once this upload starts again and then we're pretty much good to go but tweak this around and of course
03:21
set it up how you need it to okay so over in our dashboard then let's go up to our attempt because remember this is the point where every single chunk this is called and we get this event through that means that if the upload fails halfway through and we get an error when the next chunk gets attempted that is when we want to clear that error out so it's important that we do that here
03:45
because otherwise we're always going to see that error message hanging around if we reset this up here somewhere so we'll just say state error and set that to null and that means that halfway through the upload if this fails that's going to get cleared out so let's just try and do this i'm going to go and choose a file in here hit upload i'm going to come over to the back end really quickly and pull
04:05
this in and you can see that at that point so this is probably like the fourth chunk that error occurs so if we go and get rid of this and we try again so we either try the upload again or we retry the chunk that is now going to work so there are loads of different ways that you can handle this you can set up within the options within the uploader how many times this chunk gets retried there are lots
04:30
of different ways that you can tweak this but now that you've got this in here you can go ahead and experiment with that okay i'm just going to go and set a text to small here and we are pretty much done like i said tweak the options of the uploader if you want to retry a chunk every so often in case that error does happen but otherwise that is our uploader complete

Episode summary

In this episode, we focus on properly handling errors during file uploads. First, you'll see how to throw an exception on the backend if there's no file sent with the upload, making sure errors don't slip by unnoticed. We check if a file was uploaded and if not, we throw a specific exception to make handling it clear and explicit.

Next, we manually throw an exception just to test what an error looks like coming back to the client. When we try uploading a file, nothing shows up in the UI at first—so we move to the frontend to see how to display errors to users.

On the client side, we listen for error events from the uploader and store any error details in our component's state. This allows us to show an error message when something goes wrong. You'll see how to show messages like "Server responded with 500" directly in the UI, making it nice and clear to the user when there's a problem.

We also talk about cleaning up the error message: if the user tries another upload (for example, after fixing what went wrong), we clear the previous error so the UI isn't stuck showing an old message.

Finally, we discuss tweaking upload options, like how many times to retry a failed chunk, and encourage you to experiment with different error handling and retry strategies to see what works best for your app. By the end of this video, you'll have a much smoother error-handling experience for your uploader.

Episode discussion

No comments, yet. Be the first!