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
10. Handling errors


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
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
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
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
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
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
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
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
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
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
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
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
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
10 episodes 46 mins


Effortlessly handle large file uploads in your Inertia/Vue apps with chunked, resumable uploading.

We’ll cover the entire upload process for the client and server, display a progress bar, then add the ability to pause, resume and cancel uploads.

From there, you’ll be able to handle huge file uploads anywhere in your applications.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!


No comments, yet. Be the first to leave a comment.