[bug] Why is an error raised for a bad HTTP status instead of the handler being called?

[delano]

Relevant code

From pages/login/index.vue:

try {
  // Send post request to the API endpoint using Nuxt 3 useFetch
  const path = "/api/passwordless/auth/email/";
  await $fetch(path, {
    onRequest({ request, options }) {
      console.log("Request:", request);
      // Set the request headers
      options.headers = options.headers || {};

      // Addresses the following TypeScript error:
      //   Element implicitly has an 'any' type because expression of type '"Content-Type"' can't be used to index type 'HeadersInit'.
      //
      // TODO: Find a better way.
      (options.headers as { [key: string]: any })["AFB"] = "rules";
    },
    onRequestError({ request, options, error }) {
      // Handle the request errors
      console.error("A request error occurred:", error);
    },
    onResponse({ request, response, options }) {
      const data = response._data;
      console.log("Response data:", data);
      // Process the response data

      // A successful response returns a friendly message for the
      // user. The next step is for the user to check their email
      // for the magic link to sign in.
      if (response.ok) {
        // Ignore data.detail bc it's not a friendly message
        // and comes straight from drfpasswordless.
        const message = "Check your email for a link to log in.";
        console.log("Message:", message);

        snackbar.add({
          type: "success",
          text: message,
        });
      } else {
        // Handle the response errors
        console.error(
          "A response error occurred (1):",
          "Status code:",
          response.status,
          "Status message:",
          data.detail,
        );

        snackbar.add({
          type: "error",
          text: "An error occurred. Please try again.",
        });
      }
    },
    onResponseError({ request, response, options }) {
      // Handle the response errors
      console.error(
        "A response error occurred (1):",
        "Status code:",
        response.status,
        "Status message:",
        response._data.detail,
      );
    },
    baseURL: config.public.apiBase,
    method: "POST",
    body: JSON.stringify(payload),
    headers: {
      "Content-Type": "application/json",
    },
    mode: "cors",
  });
} catch (error) {
  console.error("An unhandled error occurred:", error);
}

Context

index.vue:98 Response data: 

POST https://dev.afb.pet/api/passwordless/auth/email/ 400 (Bad Request)
{
    "email": [
        "Enter a valid email address."
    ]
}