chore(repo): Move error helpers to shared package (#1308)

test(chrome-extension): Update shapshots

.changeset/beige-tips-divide.md

@@ -0,0 +1,8 @@
+---
+'@clerk/nextjs': minor
+'@clerk/shared': minor
+'@clerk/clerk-react': minor
+'@clerk/clerk-expo': minor
+---
+
+Export error helpers from the shared package to the framework specific packages

packages/chrome-extension/src/__snapshots__/exports.test.ts.snap

@@ -30,7 +30,10 @@ exports[`public exports should not include a breaking change 1`] = `
   "WithSession",
   "WithUser",
   "__internal__setErrorThrowerOptions",
+  "isClerkAPIResponseError",
+  "isKnownError",
   "isMagicLinkError",
+  "isMetamaskError",
   "useAuth",
   "useClerk",
   "useMagicLink",

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

@@ -1,89 +1,12 @@
-import type { ClerkAPIError, ClerkAPIErrorJSON } from '@clerk/types';
-
-interface ClerkAPIResponseOptions {
-  data: ClerkAPIErrorJSON[];
-  status: number;
-}
-
-// For a comprehensive Metamask error list, please see
-// https://docs.metamask.io/guide/ethereum-provider.html#errors
-export interface MetamaskError extends Error {
-  code: 4001 | 32602 | 32603;
-  message: string;
-  data?: unknown;
-}
-
-export function isKnownError(error: any) {
-  return isClerkAPIResponseError(error) || isMetamaskError(error);
-}
-
-export function isClerkAPIResponseError(err: any): err is ClerkAPIResponseError {
-  return 'clerkError' in err;
-}
-
-export function isMetamaskError(err: any): err is MetamaskError {
-  return 'code' in err && [4001, 32602, 32603].includes(err.code) && 'message' in err;
-}
-
-export function parseErrors(data: ClerkAPIErrorJSON[] = []): ClerkAPIError[] {
-  return data.length > 0 ? data.map(parseError) : [];
-}
-
-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,
-    },
-  };
-}
-
-export class ClerkAPIResponseError extends Error {
-  clerkError: true;
-
-  status: number;
-  message: string;
-
-  errors: ClerkAPIError[];
-
-  constructor(message: string, { data, status }: ClerkAPIResponseOptions) {
-    super(message);
-
-    Object.setPrototypeOf(this, ClerkAPIResponseError.prototype);
-
-    this.status = status;
-    this.message = message;
-    this.clerkError = true;
-    this.errors = parseErrors(data);
-  }
-
-  public toString = () => {
-    return `[${this.name}]\nMessage:${this.message}\nStatus:${this.status}\nSerialized errors: ${this.errors.map(e =>
-      JSON.stringify(e),
-    )}`;
-  };
-}
-
-export class MagicLinkError extends Error {
-  code: string;
-
-  constructor(code: string) {
-    super(code);
-    this.code = code;
-    Object.setPrototypeOf(this, MagicLinkError.prototype);
-  }
-}
-// Check if the error is a MagicLinkError.
-
-export function isMagicLinkError(err: Error): err is MagicLinkError {
-  return err instanceof MagicLinkError;
-}
-
-export const MagicLinkErrorCode = {
-  Expired: 'expired',
-  Failed: 'failed',
-};
+export {
+  isKnownError,
+  isMagicLinkError,
+  isMetamaskError,
+  isClerkAPIResponseError,
+  MagicLinkErrorCode,
+  parseError,
+  parseErrors,
+  MagicLinkError,
+  ClerkAPIResponseError,
+} from '@clerk/shared';
+export type { MetamaskError } from '@clerk/shared';

packages/clerk-js/src/ui/common/EmailLinkVerify.tsx

@@ -1,6 +1,6 @@
+import { isMagicLinkError, MagicLinkErrorCode } from '@clerk/shared';
 import React from 'react';
 
-import { isMagicLinkError, MagicLinkErrorCode } from '../../core/resources/Error';
 import type { VerificationStatus } from '../../utils/getClerkQueryParam';
 import { completeSignUpFlow } from '../components/SignUp/util';
 import { useCoreClerk, useCoreSignUp } from '../contexts';

packages/clerk-js/src/ui/common/__tests__/verification.test.ts

@@ -1,4 +1,5 @@
-import { ClerkAPIResponseError } from '../../../core/resources/Error';
+import { ClerkAPIResponseError } from '@clerk/shared';
+
 import { isVerificationExpiredError, VerificationErrorMessage, verificationErrorMessage } from '../verification';
 
 describe('verification utils', () => {

packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx

@@ -1,7 +1,7 @@
+import { ClerkAPIResponseError } from '@clerk/shared';
 import type { MembershipRole, OrganizationResource } from '@clerk/types';
 import React from 'react';
 
-import { ClerkAPIResponseError } from '../../../core/resources/Error';
 import { Flex, Text } from '../../customizables';
 import {
   Alert,

packages/expo/src/index.ts

@@ -21,7 +21,10 @@ export {
   WithSession,
   withUser,
   WithUser,
+  isClerkAPIResponseError,
   isMagicLinkError,
+  isMetamaskError,
+  isKnownError,
   MagicLinkErrorCode,
 } from '@clerk/clerk-react';
 

packages/nextjs/src/client-boundary/hooks.ts

@@ -22,4 +22,10 @@ export {
 
 export type { WithUserProp, WithSessionProp, WithClerkProp } from '@clerk/clerk-react';
 
-export { isMagicLinkError, MagicLinkErrorCode } from '@clerk/clerk-react';
+export {
+  isClerkAPIResponseError,
+  MagicLinkErrorCode,
+  isKnownError,
+  isMetamaskError,
+  isMagicLinkError,
+} from '@clerk/clerk-react';

packages/nextjs/src/index.ts

@@ -47,8 +47,6 @@ export {
   useOrganizationList,
   useOrganizations,
   useMagicLink,
-  MagicLinkErrorCode,
-  isMagicLinkError,
   withUser,
   withSession,
   withClerk,
@@ -59,6 +57,14 @@ export {
 
 export type { WithUserProp, WithSessionProp, WithClerkProp } from './client-boundary/hooks';
 
+export {
+  isClerkAPIResponseError,
+  isMagicLinkError,
+  isMetamaskError,
+  isKnownError,
+  MagicLinkErrorCode,
+} from '@clerk/clerk-react';
+
 /**
  * Conditionally export components that exhibit different behavior
  * when used in /app vs /pages.

packages/react/src/errors.ts

@@ -1,3 +1,11 @@
+export {
+  isMagicLinkError,
+  MagicLinkErrorCode,
+  isClerkAPIResponseError,
+  isKnownError,
+  isMetamaskError,
+} from '@clerk/shared';
+
 export const noFrontendApiError = 'Clerk: You must add the frontendApi prop to your <ClerkProvider>';
 
 export const noClerkProviderError = 'Clerk: You must wrap your application in a <ClerkProvider> component.';
@@ -16,19 +24,6 @@ export const hocChildrenNotAFunctionError = 'Clerk: Child of WithClerk must be a
 export const multipleChildrenInButtonComponent = (name: string) =>
   `Clerk: You've passed multiple children components to <${name}/>. You can only pass a single child component or text.`;
 
-export const MagicLinkErrorCode = {
-  Expired: 'expired',
-  Failed: 'failed',
-};
-
-type MagicLinkError = {
-  code: 'expired' | 'failed';
-};
-
-export function isMagicLinkError(err: any): err is MagicLinkError {
-  return !!err && (err.code === MagicLinkErrorCode.Expired || err.code === MagicLinkErrorCode.Failed);
-}
-
 export const invalidStateError =
   'Invalid state. Feel free to submit a bug or reach out to support here: https://clerk.com/support';
 

packages/react/src/index.ts

@@ -12,5 +12,5 @@ export type {
   WithSessionProp,
   IsomorphicClerkOptions,
 } from './types';
-export { isMagicLinkError, MagicLinkErrorCode } from './errors';
+export { MagicLinkErrorCode, isClerkAPIResponseError, isKnownError, isMetamaskError, isMagicLinkError } from './errors';
 export { useMagicLink } from './hooks/useMagicLink';

packages/shared/src/errors/Error.ts

@@ -0,0 +1,89 @@
+import type { ClerkAPIError, ClerkAPIErrorJSON } from '@clerk/types';
+
+interface ClerkAPIResponseOptions {
+  data: ClerkAPIErrorJSON[];
+  status: number;
+}
+
+// For a comprehensive Metamask error list, please see
+// https://docs.metamask.io/guide/ethereum-provider.html#errors
+export interface MetamaskError extends Error {
+  code: 4001 | 32602 | 32603;
+  message: string;
+  data?: unknown;
+}
+
+export function isKnownError(error: any) {
+  return isClerkAPIResponseError(error) || isMetamaskError(error);
+}
+
+export function isClerkAPIResponseError(err: any): err is ClerkAPIResponseError {
+  return 'clerkError' in err;
+}
+
+export function isMetamaskError(err: any): err is MetamaskError {
+  return 'code' in err && [4001, 32602, 32603].includes(err.code) && 'message' in err;
+}
+
+export function parseErrors(data: ClerkAPIErrorJSON[] = []): ClerkAPIError[] {
+  return data.length > 0 ? data.map(parseError) : [];
+}
+
+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,
+    },
+  };
+}
+
+export class ClerkAPIResponseError extends Error {
+  clerkError: true;
+
+  status: number;
+  message: string;
+
+  errors: ClerkAPIError[];
+
+  constructor(message: string, { data, status }: ClerkAPIResponseOptions) {
+    super(message);
+
+    Object.setPrototypeOf(this, ClerkAPIResponseError.prototype);
+
+    this.status = status;
+    this.message = message;
+    this.clerkError = true;
+    this.errors = parseErrors(data);
+  }
+
+  public toString = () => {
+    return `[${this.name}]\nMessage:${this.message}\nStatus:${this.status}\nSerialized errors: ${this.errors.map(e =>
+      JSON.stringify(e),
+    )}`;
+  };
+}
+
+export class MagicLinkError extends Error {
+  code: string;
+
+  constructor(code: string) {
+    super(code);
+    this.code = code;
+    Object.setPrototypeOf(this, MagicLinkError.prototype);
+  }
+}
+// Check if the error is a MagicLinkError.
+
+export function isMagicLinkError(err: Error): err is MagicLinkError {
+  return err instanceof MagicLinkError;
+}
+
+export const MagicLinkErrorCode = {
+  Expired: 'expired',
+  Failed: 'failed',
+};

packages/shared/src/index.ts

@@ -4,6 +4,8 @@
 export { buildErrorThrower } from './errors/thrower';
 export type { ErrorThrower, ErrorThrowerOptions } from './errors/thrower';
 
+export * from './errors/Error';
+
 /**
  * Utils
  */