felte icon indicating copy to clipboard operation
felte copied to clipboard

SvelteKit: errors from server are treated as success

Open Bubbet opened this issue 2 years ago • 6 comments

Describe the bug

When you fail(400, {errors: {the shape of yup validator's errors}, values: old_form_data_values}) it doesn't update the page.form, and doesn't call onError so those errors are just lost to the void. As mentioned in the title, the response does trigger onSuccess.

It does catch actual exceptions in the form action.

Which package/s are you using?

felte (Svelte)

Environment

  • OS: Windows 10
  • Browser: Chrome
  • Version: 1.2.12

To reproduce

Return fail in a sveltekit form action.

Small reproduction example

No response

Screenshots

image image image

Additional context

No response

Bubbet avatar Oct 24 '23 15:10 Bubbet

I have the same problem. While the error is being fixed, is there any workaround?

cincarnato avatar Nov 05 '23 21:11 cincarnato

I've been trying to reproduce this and I can't. But looking at your screenshots more closely, I think your onError function is not transforming the data the server is returning into something Felte understands :o It looks like it is returning the whole response object.

pablo-abc avatar Nov 09 '23 22:11 pablo-abc

The server already returns it in the shape felte should understand. Either way, onError isn't being called.

On Thu, Nov 9, 2023, 16:52 Pablo Berganza @.***> wrote:

I've been trying to reproduce this and I can't. But looking at your screenshots more closely, I think your onError function is not transforming the data the server is returning into something Felte understands :o It looks like it is returning the whole response object.

— Reply to this email directly, view it on GitHub https://github.com/pablo-abc/felte/issues/277#issuecomment-1804806757, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD2UU33US7G2OTRUKUPANYTYDVNDNAVCNFSM6AAAAAA6N5BQBWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMBUHAYDMNZVG4 . You are receiving this because you authored the thread.Message ID: @.***>

Bubbet avatar Nov 10 '23 11:11 Bubbet

I have the same problem. While the error is being fixed, is there any workaround?

Same here. Specifically, I think the problem is as follows:

  • using actions, the SvelteKit docs suggest using their custom fail function
  • fail returns the status as an integer as part of the response body with a key of "status", but will always have an http status of 200
  • onError only gets called if the status is NOT 200

Either I am overlooking something or this is just not being handled right now. In any case, an easy workaround is having a condition inside onSuccess that checks the status key in the response body and handles errors based on that.
Update: I just tested it again with a minimal setup and the error remained. I used the form from the docs but left out the action attribute so the default action gets triggered. My +page.server.ts looks as follows:

import { fail } from '@sveltejs/kit';
import type { Actions } from '@sveltejs/kit';

export const actions: Actions = {
  default: () => {
    const someData = {
      foo: 'hello',
      bar: 'world'
    };
    return fail(400, someData);
  }
};

the returned http status is 200 and the response object looks like the one from @Bubbet: image
I looked into it a bit more and apparently Felte does infact only look at the http status:

if (response.ok) return response;
throw new FelteSubmitError(
  'An error occurred while submitting the form',
  response
);

However, SvelteKit returns status 200 even on failure. To distinguish both cases, an object with three keys type, status and data gets returned. If type === 'failure', the action failed.

david-brt avatar Nov 21 '23 21:11 david-brt