-
-
Notifications
You must be signed in to change notification settings - Fork 227
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: falsy infer a http request when there is ok and Error in the return data strucutre #362
Comments
There is a miss understanding. The library infer that all data structure with .ok and .error is a http request: |
We catch errors in our backend and return a structured response with an error key to indicate an error. It'd be great to be able to escape hatch by throwing an error and propagating the specific message to the error toast. toast.promise(response, {
loading: messages.saveLoading,
success: (response) => {
if ('errorKey' in response) {
const errorMessage = getTranslatedError(response.errorKey, lang);
throw new Error(errorMessage ?? messages.fallbackErrorMessage);
} else {
return selectedEntity === ''
? messages.successRemovedDescription
: messages.successDescription;
}
},
// catch error and deconstruct the message
error: (e) => e.message ?? messages.fallbackErrorMessage
}); Edit: just did a little more digging, pretty easy to achieve this if anyone else stumbles here by using the id returned by the loading toast: const id = toast.loading(messages.saveLoading);
const response = await request(request, configLocator, lang);
if ('errorKey' in response) {
const errorMessage = getTranslatedError(response.errorKey, lang);
toast.error(errorMessage ?? messages.fallbackErrorMessage, { id });
} else {
toast.success(
selectedEntity === ''
? messages.successRemovedDescription
: messages.successDescription,
{ id },
);
} |
That works but I've noticed that we lose subtle on-mount animations during the transition process. toast.promise(sleep(1000), {
loading: "Loading..",
success: "Success!",
}) const id = toast.loading("Loading...")
await sleep(1000)
toast.success("Success!", {
id
}) Screen.Recording.2024-06-05.at.17.29.32.mov |
Found the culprit: :where([data-sonner-toast][data-promise='true']) :where([data-icon]) > svg {
opacity: 0;
transform: scale(0.8);
transform-origin: center;
animation: sonner-fade-in 300ms ease forwards;
} Animation only applies when the element also contains It makes sense not to apply it to normal toast calls, since the slight scale animation wouldn't be visible due to on-mount opacity animation applied to the parent (and thus to children as well). Easy workaround is adding a custom class, something like: .sonner-toast-promise-flow [data-icon] > svg {
opacity: 0;
transform: scale(0.8);
transform-origin: center;
animation: sonner-fade-in 300ms ease forwards;
} And applying it like so: toast.success("Success", {
id,
duration: 1000,
className: "sonner-toast-promise-flow",
}) |
Describe the feature / bug 馃摑:
Bug using Error in the return data strucutre of a promise.
While there is no error raise, the toast take the error branch with the following message
HTTP error! status: undefined
Steps to reproduce the bug 馃攣:
promise data structure return
Code to reproduce the bug
This return:
Error Raise: HTTP error! status: undefined
The text was updated successfully, but these errors were encountered: