Does the RequestHandler modify thrown errors? How to consistently handle with internal and external API errors?

[kevinrenskers]

I'm not sure how to write my API layer so that errors from internal and external endpoints are consistently handled by the app's pages.

For example, my API layer looks like this:

// src/lib/api.ts
import { invalidateAll } from "$app/navigation";
import { apiUrl } from "$lib/config";
import { post } from "$lib/utils";
import { browser } from "$app/environment";
import { websiteUrl } from "$lib/config";

import type { Fetch } from "$lib/types";

async function send<T>({
  method,
  fetch,
  path,
  body,
  token,
  searchParams,
}: {
  method: string;
  fetch: Fetch;
  path: string;
  body?: string;
  token?: string;
  searchParams?: Record<string, string>;
}): Promise<T> {
  const config: RequestInit = { method };
  const headers: Record<string, string> = {
    origin: websiteUrl,
  };

  if (body) {
    headers["Content-Type"] = "application/json";
    config.body = body;
  }

  if (token) {
    headers["Authorization"] = `Bearer ${token}`;
  }

  config.headers = headers;

  const fullPath = path.startsWith("http") ? path : `${apiUrl}${path.startsWith("/") ? "" : "/"}${path}`;
  console.log(`Making ${method} request to ${fullPath}`);
  const request = new Request(fullPath + "?" + new URLSearchParams(searchParams), config);
  const response = await fetch(request);

  const text = await response.text();

  let result;
  try {
    result = JSON.parse(text);
  } catch (err) {
    result = text;
  }

  // API error, retrieve the error message from the result
  if (!response.ok) {
    if (response.status === 401) {
      await post(fetch, "/auth/logout");

      if (browser) {
        await invalidateAll();
        window.location.href = "";
      }
    }

    let reason: string | undefined = result.reason;
    let errorsObject;

    if (!reason) {
      let reasons = [];

      if (Array.isArray(result)) {
        reasons = result;
      } else if (typeof result === "object") {
        errorsObject = result;
        for (const key in result) {
          reasons.push(`${key}: ${result[key]}`);
        }
      }

      reason = reasons.join("\n\n");
    }

    throw {
      status: response.status,
      message: reason || "Error when talking to the server. Please try again.",
      errors: errorsObject,
    };
  }

  // All good!
  return result;
}

export function getApi<T>(fetch: Fetch, path: string, token?: string, searchParams?: Record<string, string>): Promise<T> {
  return send<T>({ method: "GET", fetch, path, token, searchParams });
}

export function delApi<T>(fetch: Fetch, path: string, token?: string): Promise<T> {
  return send<T>({ method: "DELETE", fetch, path, token });
}

export function postApi<T>(fetch: Fetch, path: string, data: object, token?: string): Promise<T> {
  const body = JSON.stringify(data);
  return send<T>({ method: "POST", fetch, path, body, token });
}

export function putApi<T>(fetch: Fetch, path: string, data: object, token?: string): Promise<T> {
  const body = JSON.stringify(data);
  return send<T>({ method: "PUT", fetch, path, body, token });
}

export function patchApi<T>(fetch: Fetch, path: string, data: object, token?: string): Promise<T> {
  const body = JSON.stringify(data);
  return send<T>({ method: "PATCH", fetch, path, body, token });
}

type ObjectWithOptionalId = {
  id?: number;
};

// Either does a POST or a PUT
export function saveApi<T>(fetch: Fetch, basePath: string, data: ObjectWithOptionalId, token?: string): Promise<T> {
  if (data.id) {
    return putApi<T>(fetch, `${basePath}/${data.id}`, data, token);
  } else {
    return postApi<T>(fetch, basePath, data, token);
  }
}

So anywhere in my app I can for example call postApi in a try/catch block, and the error is an object with status, message and errors, which is the raw dictionary of field errors from the server (form validation errors, stuff like that). This all works fine.

I also have an external API endpoint that I call via my own internal SvelteKit endpoint, because the endpoint returns a token on successful login, in which case I store it in a cookie. The internal endpoint looks like this:

// src/routes/auth/exchange-magic-token/+server.ts
import { json, type RequestHandler } from "@sveltejs/kit";
import { postApi } from "$lib/api";

export const POST: RequestHandler = async ({ request, cookies }) => {
  const body = await postApi<{ token: string }>(fetch, "/auth/exchange-magic-token", await request.json());
  cookies.set("token", body.token, { path: "/", httpOnly: true, maxAge: 31536000 });
  return json({ ...body });
};

it just uses the same postApi method from above. To call this internal endpoint, I do it like this in a route page:

// src/routes/login/[token]/+page.svelte
<script lang="ts">
  import { page } from "$app/stores";
  import { goto, invalidateAll } from "$app/navigation";
  import { PageWrapper } from "$lib/components";
  import { connect } from "$lib/websockets";
  import { handleApiError } from "$lib/utils";
  import { postApi } from "$lib/api";
  import { websiteUrl } from "$lib/config";

  async function login() {
    const payload = {
      token: $page.params.token,
    };

    try {
      const res = await postApi<{ token: string }>(fetch, `${websiteUrl}/auth/exchange-magic-token`, payload);

      const token = res.token;
      if (token) {
        connect(token);
        await invalidateAll();
        goto("/campaigns");
      }
    } catch (error) {
      handleApiError(error);
    }
  }
</script>

<PageWrapper>
  <button on:click={() => login()}>Click to login</button>
</PageWrapper>

So it calls the internal endpoint ${websiteUrl}/auth/exchange-magic-token, which calls the external endpoint. The problem is the error handling: when the server returns an error, I don't get the usual error object that I would expect, instead it's wrapped in something else.

For example calling await postApi<{ token: string }>(fetch, "/auth/exchange-magic-token", payload) (which calls the external endpoint) with a wrong payload can result in an error like this:

{
  "status": 400,
  "message": "This is not a valid login link. Has it already been used?"
}

But calling await postApi<{ token: string }>(fetch, "${websiteUrl}/auth/exchange-magic-token", payload) (so, via the internal SvelteKit endpoint) results in an error like this:

{
  "status": 500,
  "message": "name: Error\n\nmessage: {\"status\":400,\"message\":\"This is not a valid login link. Has it already been used?\"}\n\nstack: Error: {\"status\":400,\"message\":\"This is not a valid login link. Has it already been used?\"}\n    at coalesce_to_error (file:///Users/kevin/Workspace/cn-sveltekit/node_modules/@sveltejs/kit/src/utils/error.js:11:5)\n    at resolve (file:///Users/kevin/Workspace/cn-sveltekit/node_modules/@sveltejs/kit/src/runtime/server/index.js:312:18)\n    at runMicrotasks (<anonymous>)\n    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n    at async Object.handle (/Users/kevin/Workspace/cn-sveltekit/src/hooks.ts:7:9)\n    at async respond (file:///Users/kevin/Workspace/cn-sveltekit/node_modules/@sveltejs/kit/src/runtime/server/index.js:326:10)\n    at async file:///Users/kevin/Workspace/cn-sveltekit/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:385:22",
  "errors": {
    "name": "Error",
    "message": "{\"status\":400,\"message\":\"This is not a valid login link. Has it already been used?\"}",
    "stack": "Error: {\"status\":400,\"message\":\"This is not a valid login link. Has it already been used?\"}\n    at coalesce_to_error (file:///Users/kevin/Workspace/cn-sveltekit/node_modules/@sveltejs/kit/src/utils/error.js:11:5)\n    at resolve (file:///Users/kevin/Workspace/cn-sveltekit/node_modules/@sveltejs/kit/src/runtime/server/index.js:312:18)\n    at runMicrotasks (<anonymous>)\n    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n    at async Object.handle (/Users/kevin/Workspace/cn-sveltekit/src/hooks.ts:7:9)\n    at async respond (file:///Users/kevin/Workspace/cn-sveltekit/node_modules/@sveltejs/kit/src/runtime/server/index.js:326:10)\n    at async file:///Users/kevin/Workspace/cn-sveltekit/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:385:22"
  }
}

Why is my error object wrapped inside something else all of a sudden, stringified and all? How do I stop this from happening? Or how do I make sure that errors are consistent and can be handled in a consistent way?

[kevinrenskers]

So the end result is that errors now look like this 🙈

[dummdidumm]

This will be aligned with #6586 .
TLDR: handleError on the client, too. Return an error shape from handleError that becomes $page.error

[kevinrenskers]

Interesting! I hope it'll be merged soon. I am curious though why it currently behaves the way it does, and how people have worked around this so far.

[kevinrenskers]

Actually, would that PR solve my problem? It doesn't seem so, as that is for massaging errors into a different format for error pages, showing $page.error. But in my case I show these errors on the page itself, with a try/catch, they're expected errors so to speak.

[kevinrenskers]

Sadly #6586 didn't fix the problem. so I ended up creating an issue for this: #6671.