Skip to content

fix(elements): Display assertIsDefined errors during development #3517

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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 5, 2024
Merged

fix(elements): Display assertIsDefined errors during development #3517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e26536
initial
LekoArts Jun 5, 2024
8be328f
add changeset
LekoArts Jun 5, 2024
b446576
Merge branch 'main' into lekoarts/sdk-1470-handle-assertisdefined-better
LekoArts Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/violet-insects-ring.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clerk/elements': patch
---

Display hard to catch errors inside the sign-in verification step during development (when `NODE_ENV` is set to `development`).
32 changes: 21 additions & 11 deletions packages/elements/src/internals/machines/sign-in/verification.machine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,16 @@ const SignInVerificationMachine = setup({
};
},
),
setConsoleError: ({ event }) => {
if (process.env.NODE_ENV === 'development') {
assertActorEventError(event);

throw new ClerkElementsRuntimeError(`Unable to fulfill the prepare or attempt request for the sign-in verification.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can say prepare/attempt here because the action is only used in those two states

Error: ${event.error.message}

Please open an issue if you continue to run into this issue.`);
}
},
},
guards: {
isResendable: ({ context }) => context.resendable || context.resendableAfter === 0,
Expand Down Expand Up @@ -218,7 +228,7 @@ const SignInVerificationMachine = setup({
target: 'Pending',
},
onError: {
actions: 'setFormErrors',
actions: ['setFormErrors', 'setConsoleError'],
target: 'Pending',
},
},
Expand Down Expand Up @@ -316,7 +326,7 @@ const SignInVerificationMachine = setup({
actions: ['sendToNext', 'sendToLoading'],
},
onError: {
actions: ['setFormErrors', 'sendToLoading'],
actions: ['setFormErrors', 'setConsoleError', 'sendToLoading'],
target: 'Pending',
},
},
Expand Down Expand Up @@ -352,14 +362,14 @@ export const SignInFirstFactorMachine = SignInVerificationMachine.provide({
return Promise.resolve(clerk.client.signIn);
}

assertIsDefined(params);
assertIsDefined(params, 'First factor params');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added a label to all instances of assertIsDefined. If params would be undefined it would say:

undefined is not defined

With the label it'll say

First factor params is not defined

👍


return await clerk.client.signIn.prepareFirstFactor(params as PrepareFirstFactorParams);
}),
attempt: fromPromise(async ({ input }) => {
const { currentFactor, fields, parent } = input as AttemptFirstFactorInput;

assertIsDefined(currentFactor);
assertIsDefined(currentFactor, 'Current factor');

let attemptParams: AttemptFirstFactorParams;

Expand All @@ -369,7 +379,7 @@ export const SignInFirstFactorMachine = SignInVerificationMachine.provide({

switch (strategy) {
case 'password': {
assertIsDefined(password);
assertIsDefined(password, 'Password');

attemptParams = {
strategy,
Expand All @@ -380,7 +390,7 @@ export const SignInFirstFactorMachine = SignInVerificationMachine.provide({
}
case 'reset_password_phone_code':
case 'reset_password_email_code': {
assertIsDefined(code);
assertIsDefined(code, 'Code for resetting phone/email');

attemptParams = {
strategy,
Expand All @@ -392,7 +402,7 @@ export const SignInFirstFactorMachine = SignInVerificationMachine.provide({
}
case 'phone_code':
case 'email_code': {
assertIsDefined(code);
assertIsDefined(code, 'Code for phone/email');

attemptParams = {
strategy,
Expand All @@ -403,7 +413,7 @@ export const SignInFirstFactorMachine = SignInVerificationMachine.provide({
}
case 'web3_metamask_signature': {
const signature = fields.get('signature')?.value as string | undefined;
assertIsDefined(signature);
assertIsDefined(signature, 'Web3 Metamask signature');

attemptParams = {
strategy,
Expand Down Expand Up @@ -438,7 +448,7 @@ export const SignInSecondFactorMachine = SignInVerificationMachine.provide({
const currentVerificationExpiration = clerk.client.signIn.secondFactorVerification.expireAt;
const needsPrepare = resendable || !currentVerificationExpiration || currentVerificationExpiration < new Date();

assertIsDefined(params);
assertIsDefined(params, 'Second factor params');

if (params.strategy !== 'phone_code' || !needsPrepare) {
return Promise.resolve(clerk.client.signIn);
Expand All @@ -454,8 +464,8 @@ export const SignInSecondFactorMachine = SignInVerificationMachine.provide({

const code = fields.get('code')?.value as string;

assertIsDefined(currentFactor);
assertIsDefined(code);
assertIsDefined(currentFactor, 'Current factor');
assertIsDefined(code, 'Code');

return await parent.getSnapshot().context.clerk.client.signIn.attemptSecondFactor({
strategy: currentFactor.strategy,
Expand Down