Catch Laravel custom exception in axios

I am storing a credit card on Stripe for a customer using axios.

axios.post('/outfitter/api/customers/update-card', self.formData).then(function(response) {
    self.alert.success('Card updated!');
}).catch(function(error) {
    console.log(error.response.data.errors);
});
                                

This submits the request with the stripe token to my controller. In my controller I create the customer on stripes end and associate the card.

I'm trying to catch a card declined error and throw a custom exception

try {
    $stripeCustomer = \Stripe\Customer::create([
        "description" => $customer->first_name . ' ' . $customer->last_name,
        "email" => $customer->email,
        "source" => $stripe_token, // obtained with Stripe.js
        "metadata" => [
            'outfitter_id' => Auth::user()->outfitter_id,
            'outfitter_name' => Auth::user()->outfitter->name
        ]
    ]);
} catch (\Stripe\Error\Card $e) {
    throw new StripeCardDeclinedException;
}

Custom Exception

public function render($request)
{
    return response()->json([
            'errors' => [
                'card_declined' => ['Card Declined']
            ]
    ], 422);
}

I want to return a json response similar to what the Laravel validator returns. In the network tab in Chrome, I am seeing the response: {"errors":{"card_declined":["Card Declined"]}} so this tells me it is working. But what isn't happening is the catch from my axios request isn't getting called so the errors are getting logged to the console.

If I open up the console below is what I get:

Uncaught (in promise) Error: Request failed with status code 422 at createError (app.js?id=09a13c6d9ff0ded25ace:601) at settle (app.js?id=09a13c6d9ff0ded25ace:745) at XMLHttpRequest.handleLoad (app.js?id=09a13c6d9ff0ded25ace:155)

Anyone run into this before?