try...catch blocks, errors, and server endpoints gotchas

[aphilas]

With the new changes I've been bitten a few times over what seems like minutiae.

An error parameter in the try-catch block shadowing the sveltekit error() method.

With the default VSCode snippets, the exception object is called error which shadows the error method, especially in load() endpoints in +page.server.ts.

try {
  const result = await db.insert()
} catch (error) {
  // Handle different errors here
  throw error(400, 'Could not add ice cream') // Oops: error is not callable
}

One solution is editing the snippets to name the exception object err or whatever else you fancy.

throwing a redirect() inside the try block.

After hours of rapping at the keyboard, what seems obvious took me a minute to figure out. In a POST page action, I was intending to redirect based on some logic. The redirect error gets caught into the catch block.

try {
  const result = await db.insert()
  if (!result) {
   throw redirect(303, '/') // Oops: no redirect happens here
  }

  // More operations here
} catch (error) {
  // Handle different errors here
  throw error(400, 'Something went wrong')
}

One solution could be throwing outside the try...catch block, say after successfully creating a new resource, or throwing a new error and then performing the redirect in the catch block.

The above gotchas are not particularly footguns of SvelteKit, just the end product of how I structured my code. Thought I'd share in case a Kit newbie (like me) bumps into the same.

[yousufiqbal]

Me too having this problem. @aphilas Did you come to any solution?

[cdcarson]

I have the same problems, plus a general dislike of the quirky "throw success (sometimes,) return errors (sometimes)" semantic that the actions API has. But these are solvable by writing a wrapper for Action that hides the quirks.

My own wrapper is a WIP and too messy to show, but it's basically this...

import {
  invalid,
  redirect,
  error as skExpectedError,
  type Action,
  type RequestEvent
} from '@sveltejs/kit';

export const wrapAction =(
  wrapped: <T extends Record<string, unknown>>(event: RequestEvent) => Promise<T>
): Action => {
  const skAction = async (event: RequestEvent) => {
    try {
      const result = await wrapped(event);
      // In my case I'd like to be able to return as well as throw a redirect. So...
      if (result instanceof MyRedirect) {
        // this throw is handled in the catch, below
        throw result;
      }
      return result;
    } catch (error) {
      if (error instanceof MyFormValidationError) {
        return invalid(error.status, {
          formData: error.formData,
          formErrors: error.formErrors
        });
      }
      if (error instanceof MyRedirect) {
        throw redirect(error.status, error.location);
      }
      if (error instanceof MyExpectedError) {
        throw skExpectedError(error.status, error.message);
      }
      // unexpected error...
      throw error;
    }
  };
  return skAction;
};

This allows me to return success and throw errors like normal, without a big try/catch block or endless if...returns. It also allows me to write helpers that either return or throw (see validateForm below.)

// src/routes/sign-in/+page.server.ts
export const _unwrappedSignIn = async (event: RequestEvent) => {
  // A helper. It throws MyFormValidationError
  const data = validateForm(
    await event.request.formData(),
    signInFormDefinition
  );
  const { email, password, remember } = data;
  const db = getPrismaClientInstance();
  const userAccount = await db.userAccount.findUnique({ where: { email } });
  if (!userAccount) {
    throw new MyFormValidationError<SignInFormData>(data, {
      email: `We could not find an account with the email "${email}."`
    });
  }
  if (!(await comparePassword(password, userAccount.password))) {
    throw new MyFormValidationError<SignInFormData>(data, {
      password: `Wrong password.`
    });
  }
  const { authRedirect, user } = await login(
    event,
    userAccount.userId,
    remember
  );
  const message = `Welcome, ${user.profile?.name}. You’re signed in.`;
  if (isFetchRequest(event)) {
    return { authRedirect, message };
  }
  setFlashMessage(event, message);
  return new MyRedirect(authRedirect);
};

export const actions: Actions = {
  default: wrapAction(_unwrappedSignIn)
};

[danawoodman]

For the first one, just change the name of the catch argument:

try {
  const result = await db.insert()
} catch (e) { // <-- change this
  // Handle different errors here
  throw error(400, 'Could not add ice cream') // Oops: error is not callable
}

For the second one:

let result
try {
  result = await db.insert()
} catch (e) {
  throw error(400, e?.message ?? 'Something went wrong')
}

if (!result) throw redirect(303, '/')

Also, maybe have a look at neverthrow to wrap you code so you don't need try/catch.

[tanaka-naoki-heavisidelab]

"throwing a redirect() inside the try block."
I had the same symptoms.
It looks like we're going to have to deal with redirect out on the try-catch block.

[danawoodman]

Throw redirects in your catch or look at neverthrow

[accuser]

Scope is everything. As @danawoodman shows, the name you are using (error) in the try-catch block is local to the block, and therefore error is not callable as it has been replaced by the caught exception. Whilst e is an expected and understood replacement for error, you can put almost anything here. I'll sometimes use reason:

try {
  result = await db.insert()
} catch (reason) { 
  throw error(400, reason?.message ?? 'Something went wrong')
}

As for throwing inside a try-catch block, an alternative is to use a happy path:

try {
  const result = await db.insert()
  
  if (result) {
    // process and return the result
  }
} catch (reason) {
  throw error(400, reason?.message ?? 'Something went wrong')
}

throw redirect(303, '/') // nothing went wrong, but we didn't get a result

[markusheinemann]

I faced a similar issue: redirecting based on the result of an async operation. I found an easy workaround for that using then to map my response:

const result = await db.insert()
  .then(result => result.someKey)
  .catch(console.error);

redirect(303, result);