fix tests

Author: nikosdouvlis

packages/clerk-js/src/core/resources/Verification.ts

@@ -1,6 +1,5 @@
-import { errorToJSON, parseError } from '@clerk/shared/error';
+import { ClerkAPIError, errorToJSON } from '@clerk/shared/error';
 import type {
-  ClerkAPIError,
   PasskeyVerificationResource,
   PhoneCodeChannel,
   PublicKeyCredentialCreationOptionsJSON,
@@ -58,7 +57,7 @@ export class Verification extends BaseResource implements VerificationResource {
       }
       this.attempts = data.attempts;
       this.expireAt = unixEpochToDate(data.expire_at || undefined);
-      this.error = data.error ? parseError(data.error) : null;
+      this.error = data.error ? new ClerkAPIError(data.error) : null;
       this.channel = data.channel || undefined;
     }
     return this;

packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx

@@ -1,7 +1,6 @@
 import { ClerkAPIResponseError } from '@clerk/shared/error';
 import { OAUTH_PROVIDERS } from '@clerk/shared/oauth';
 import { waitFor } from '@testing-library/react';
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { bindCreateFixtures } from '@/test/create-fixtures';

packages/shared/src/error.ts

@@ -1,5 +1,6 @@
 export { errorToJSON, parseError, parseErrors } from './errors/parseError';
 
+export { ClerkAPIError } from './errors/clerkApiError';
 export { ClerkAPIResponseError } from './errors/clerkApiResponseError';
 
 export { buildErrorThrower, type ErrorThrower, type ErrorThrowerOptions } from './errors/errorThrower';

packages/shared/src/errors/clerkApiError.ts

@@ -1,7 +1,6 @@
 import type { ClerkAPIError as ClerkAPIErrorInterface, ClerkAPIErrorJSON } from '@clerk/types';
 
 import { createErrorTypeGuard } from './createErrorTypeGuard';
-import { parseError } from './parseError';
 
 export type ClerkApiErrorMeta = Record<string, unknown>;
 
@@ -16,11 +15,28 @@ export class ClerkAPIError<Meta extends ClerkApiErrorMeta = any> implements Cler
   readonly meta: Meta;
 
   constructor(json: ClerkAPIErrorJSON) {
-    const parsedError = parseError(json);
+    const parsedError = this.parseJsonError(json);
     this.code = parsedError.code;
     this.message = parsedError.message;
     this.longMessage = parsedError.longMessage;
-    this.meta = json.meta as Meta;
+    this.meta = parsedError.meta;
+  }
+
+  private parseJsonError(json: ClerkAPIErrorJSON) {
+    return {
+      code: json.code,
+      message: json.message,
+      longMessage: json.long_message,
+      meta: {
+        paramName: json.meta?.param_name,
+        sessionId: json.meta?.session_id,
+        emailAddresses: json.meta?.email_addresses,
+        identifiers: json.meta?.identifiers,
+        zxcvbn: json.meta?.zxcvbn,
+        plan: json.meta?.plan,
+        isPlanUpgradePossible: json.meta?.is_plan_upgrade_possible,
+      } as unknown as Meta,
+    };
   }
 }
 

packages/shared/src/errors/clerkApiResponseError.ts

@@ -13,7 +13,7 @@ interface ClerkAPIResponseOptions extends Omit<ClerkErrorParams, 'message' | 'co
 }
 
 export class ClerkAPIResponseError extends ClerkError implements ClerkAPIResponseErrorInterface {
-  name = 'ClerkAPIResponseError';
+  static name = 'ClerkAPIResponseError';
   status: number;
   clerkTraceId?: string;
   retryAfter?: number;
@@ -22,10 +22,11 @@ export class ClerkAPIResponseError extends ClerkError implements ClerkAPIRespons
   constructor(message: string, options: ClerkAPIResponseOptions) {
     const { data: errorsJson, status, clerkTraceId, retryAfter } = options;
     super({ ...options, message, code: 'api_response_error' });
+    Object.setPrototypeOf(this, ClerkAPIResponseError.prototype);
     this.status = status;
     this.clerkTraceId = clerkTraceId;
     this.retryAfter = retryAfter;
-    this.errors = errorsJson.map(e => new ClerkAPIError(e));
+    this.errors = (errorsJson || []).map(e => new ClerkAPIError(e));
   }
 
   public toString() {
@@ -39,6 +40,11 @@ export class ClerkAPIResponseError extends ClerkError implements ClerkAPIRespons
 
     return message;
   }
+
+  // Override formatMessage to keep it unformatted for backward compatibility
+  protected static override formatMessage(name: string, msg: string, _: string, __: string | undefined) {
+    return msg;
+  }
 }
 
 /**

packages/shared/src/errors/clerkError.ts

@@ -34,25 +34,20 @@ export interface ClerkErrorParams {
 const __DEV__ = true;
 
 export class ClerkError extends Error {
+  static name = 'ClerkError';
   readonly clerkError = true as const;
-  readonly name: string = 'ClerkError';
   readonly code: string;
   readonly longMessage: string | undefined;
   readonly docsUrl: string | undefined;
   readonly cause: Error | undefined;
 
-  constructor(opts: ClerkErrorParams) {
-    const formatMessage = (msg: string, code: string, docsUrl: string | undefined) => {
-      msg = `${this.name}: ${msg.trim()}\n\n(code="${code}")\n\n`;
-      if (__DEV__) {
-        msg += `\n\nDocs: ${docsUrl}`;
-      }
-      return msg;
-    };
+  get name() {
+    return this.constructor.name;
+  }
 
-    super(formatMessage(opts.message, opts.code, opts.docsUrl), { cause: opts.cause });
+  constructor(opts: ClerkErrorParams) {
+    super(new.target.formatMessage(new.target.name, opts.message, opts.code, opts.docsUrl), { cause: opts.cause });
     Object.setPrototypeOf(this, ClerkError.prototype);
-
     this.code = opts.code;
     this.docsUrl = opts.docsUrl;
     this.longMessage = opts.longMessage;
@@ -62,6 +57,16 @@ export class ClerkError extends Error {
   public toString() {
     return `[${this.name}]\nMessage:${this.message}`;
   }
+
+  protected static formatMessage(name: string, msg: string, code: string, docsUrl: string | undefined) {
+    console.log('?here2');
+
+    msg = `${name}: ${msg.trim()}\n\n(code="${code}")\n\n`;
+    if (__DEV__ && docsUrl) {
+      msg += `\n\nDocs: ${docsUrl}`;
+    }
+    return msg;
+  }
 }
 
 /**

packages/shared/src/errors/clerkRuntimeError.ts

@@ -13,14 +13,15 @@ type ClerkRuntimeErrorOptions = Omit<ClerkErrorParams, 'message'>;
  *   throw new ClerkRuntimeError('An error occurred', { code: 'password_invalid' });
  */
 export class ClerkRuntimeError extends ClerkError {
+  static name = 'ClerkRuntimeError';
   /**
    * @deprecated Use `clerkError` property instead. This property is maintained for backward compatibility.
    */
   readonly clerkRuntimeError = true as const;
-  readonly name = 'ClerkRuntimeError';
 
   constructor(message: string, options: ClerkRuntimeErrorOptions) {
     super({ ...options, message });
+    Object.setPrototypeOf(this, ClerkRuntimeError.prototype);
   }
 }
 

packages/shared/src/errors/parseError.ts

@@ -1,34 +1,25 @@
-import type { ClerkAPIError, ClerkAPIErrorJSON } from '@clerk/types';
+import type { ClerkAPIError as ClerkAPIErrorInterface, ClerkAPIErrorJSON } from '@clerk/types';
+
+import { ClerkAPIError } from './clerkApiError';
 
 /**
  * Parses an array of ClerkAPIErrorJSON objects into an array of ClerkAPIError objects.
  *
  * @internal
  */
-export function parseErrors(data: ClerkAPIErrorJSON[] = []): ClerkAPIError[] {
-  return data.length > 0 ? data.map(parseError) : [];
+export function parseErrors(data: ClerkAPIErrorJSON[] = []): ClerkAPIErrorInterface[] {
+  return data.length > 0 ? data.map(e => new ClerkAPIError(e)) : [];
 }
 
 /**
  * Parses a ClerkAPIErrorJSON object into a ClerkAPIError object.
  *
+ * @deprecated Use `ClerkAPIError` class instead
+ *
  * @internal
  */
-export function parseError(error: ClerkAPIErrorJSON): ClerkAPIError {
-  return {
-    code: error.code,
-    message: error.message,
-    longMessage: error.long_message,
-    meta: {
-      paramName: error?.meta?.param_name,
-      sessionId: error?.meta?.session_id,
-      emailAddresses: error?.meta?.email_addresses,
-      identifiers: error?.meta?.identifiers,
-      zxcvbn: error?.meta?.zxcvbn,
-      plan: error?.meta?.plan,
-      isPlanUpgradePossible: error?.meta?.is_plan_upgrade_possible,
-    },
-  };
+export function parseError(error: ClerkAPIErrorJSON): ClerkAPIErrorInterface {
+  return new ClerkAPIError(error);
 }
 
 /**