fix(clerk-js): Show custom pages errors when sdks are in dev mode (#2802)

* fix(clerk-js): Show custom pages errors when sdks are in dev mode

* fix(clerk-js): Add changeset

* fix(clerk-js): Update tests

* chore(clerk-js): Cleanup

* chore(remix): Remove environment from Remix SDK Metadata

There is no default way to grab the env in remix, so we are skipping it for now.

Author: panteliselef

.changeset/sour-frogs-type.md

@@ -0,0 +1,11 @@
+---
+'gatsby-plugin-clerk': minor
+'@clerk/clerk-js': minor
+'@clerk/clerk-sdk-node': minor
+'@clerk/fastify': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Pass environment into `sdkMetadata` in order to detect if production clerk-js is used by other sdks in dev mode. When it is log dev warning from clerk-js.

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

@@ -144,6 +144,7 @@ export class Clerk implements ClerkInterface {
   public static sdkMetadata: SDKMetadata = {
     name: __PKG_NAME__,
     version: __PKG_VERSION__,
+    environment: process.env.NODE_ENV || 'production',
   };
 
   public client: ClientResource | undefined;

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -225,12 +225,13 @@ export type UserProfileContextType = UserProfileCtx & {
 export const useUserProfileContext = (): UserProfileContextType => {
   const { componentName, customPages, ...ctx } = (React.useContext(ComponentContext) || {}) as UserProfileCtx;
   const { queryParams } = useRouter();
+  const clerk = useClerk();
 
   if (componentName !== 'UserProfile') {
     throw new Error('Clerk: useUserProfileContext called outside of the mounted UserProfile component.');
   }
 
-  const pages = createUserProfileCustomPages(customPages || []);
+  const pages = createUserProfileCustomPages(customPages || [], clerk);
 
   return {
     ...ctx,
@@ -447,12 +448,13 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
   const { componentName, customPages, ...ctx } = (React.useContext(ComponentContext) || {}) as OrganizationProfileCtx;
   const { navigate } = useRouter();
   const { displayConfig } = useEnvironment();
+  const clerk = useClerk();
 
   if (componentName !== 'OrganizationProfile') {
     throw new Error('Clerk: useOrganizationProfileContext called outside OrganizationProfile.');
   }
 
-  const pages = createOrganizationProfileCustomPages(customPages || []);
+  const pages = createOrganizationProfileCustomPages(customPages || [], clerk);
 
   const navigateAfterLeaveOrganization = () =>
     navigate(ctx.afterLeaveOrganizationUrl || displayConfig.afterLeaveOrganizationUrl);

packages/clerk-js/src/ui/utils/__tests__/createCustomPages.test.ts

@@ -1,6 +1,12 @@
 import type { CustomPage } from '@clerk/types';
 
-import { createOrganizationProfileCustomPages, createUserProfileCustomPages } from '../createCustomPages';
+import {
+  createOrganizationProfileCustomPages as cOPCP,
+  createUserProfileCustomPages as cUPCP,
+} from '../createCustomPages';
+
+const createUserProfileCustomPages = (arr: any) => cUPCP(arr, { sdkMetadata: { environment: 'test' } } as any);
+const createOrganizationProfileCustomPages = (arr: any) => cOPCP(arr, { sdkMetadata: { environment: 'test' } } as any);
 
 describe('createCustomPages', () => {
   describe('createUserProfileCustomPages', () => {

packages/clerk-js/src/ui/utils/createCustomPages.tsx

@@ -1,12 +1,12 @@
-import { isDevelopmentEnvironment } from '@clerk/shared';
-import type { CustomPage } from '@clerk/types';
+import type { CustomPage, LoadedClerk } from '@clerk/types';
 
 import { isValidUrl } from '../../utils';
 import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID, USER_PROFILE_NAVBAR_ROUTE_ID } from '../constants';
 import type { NavbarRoute } from '../elements';
 import { Organization, TickShield, User, Users } from '../icons';
 import { localizationKeys } from '../localization';
 import { ExternalElementMounter } from './ExternalElementMounter';
+import { isDevelopmentSDK } from './runtimeEnvironment';
 
 export type CustomPageContent = {
   url: string;
@@ -47,39 +47,43 @@ type CreateCustomPagesParams = {
   excludedPathsFromDuplicateWarning: string[];
 };
 
-export const createUserProfileCustomPages = (customPages: CustomPage[]) => {
-  return createCustomPages({
-    customPages,
-    getDefaultRoutes: getUserProfileDefaultRoutes,
-    setFirstPathToRoot: setFirstPathToUserProfileRoot,
-    excludedPathsFromDuplicateWarning: [],
-  });
+export const createUserProfileCustomPages = (customPages: CustomPage[], clerk: LoadedClerk) => {
+  return createCustomPages(
+    {
+      customPages,
+      getDefaultRoutes: getUserProfileDefaultRoutes,
+      setFirstPathToRoot: setFirstPathToUserProfileRoot,
+      excludedPathsFromDuplicateWarning: [],
+    },
+    clerk,
+  );
 };
 
-export const createOrganizationProfileCustomPages = (customPages: CustomPage[]) => {
-  return createCustomPages({
-    customPages,
-    getDefaultRoutes: getOrganizationProfileDefaultRoutes,
-    setFirstPathToRoot: setFirstPathToOrganizationProfileRoot,
-    excludedPathsFromDuplicateWarning: [],
-  });
+export const createOrganizationProfileCustomPages = (customPages: CustomPage[], clerk: LoadedClerk) => {
+  return createCustomPages(
+    {
+      customPages,
+      getDefaultRoutes: getOrganizationProfileDefaultRoutes,
+      setFirstPathToRoot: setFirstPathToOrganizationProfileRoot,
+      excludedPathsFromDuplicateWarning: [],
+    },
+    clerk,
+  );
 };
 
-const createCustomPages = ({
-  customPages,
-  getDefaultRoutes,
-  setFirstPathToRoot,
-  excludedPathsFromDuplicateWarning,
-}: CreateCustomPagesParams) => {
+const createCustomPages = (
+  { customPages, getDefaultRoutes, setFirstPathToRoot, excludedPathsFromDuplicateWarning }: CreateCustomPagesParams,
+  clerk: LoadedClerk,
+) => {
   const { INITIAL_ROUTES, pageToRootNavbarRouteMap, validReorderItemLabels } = getDefaultRoutes();
 
-  if (isDevelopmentEnvironment()) {
+  if (isDevelopmentSDK(clerk)) {
     checkForDuplicateUsageOfReorderingItems(customPages, validReorderItemLabels);
   }
 
   const validCustomPages = customPages.filter(cp => {
     if (!isValidPageItem(cp, validReorderItemLabels)) {
-      if (isDevelopmentEnvironment()) {
+      if (isDevelopmentSDK(clerk)) {
         console.error('Clerk: Invalid custom page data: ', cp);
       }
       return false;
@@ -96,7 +100,7 @@ const createCustomPages = ({
 
   const routes = setFirstPathToRoot(allRoutes);
 
-  if (isDevelopmentEnvironment()) {
+  if (isDevelopmentSDK(clerk)) {
     warnForDuplicatePaths(routes, excludedPathsFromDuplicateWarning);
   }
 

packages/clerk-js/src/ui/utils/runtimeEnvironment.ts

@@ -0,0 +1,5 @@
+import { isDevelopmentEnvironment } from '@clerk/shared';
+import type { LoadedClerk } from '@clerk/types';
+
+export const isDevelopmentSDK = (clerk: LoadedClerk) =>
+  isDevelopmentEnvironment() || clerk.sdkMetadata?.environment === 'development';

packages/fastify/src/__snapshots__/clerkClient.test.ts.snap

@@ -8,6 +8,7 @@ exports[`clerk initializes clerk with constants 1`] = `
       "apiVersion": "v1",
       "jwtKey": "",
       "sdkMetadata": {
+        "environment": "test",
         "name": "@clerk/fastify",
         "version": "0.0.0-test",
       },

packages/fastify/src/__snapshots__/constants.test.ts.snap

@@ -35,6 +35,7 @@ exports[`constants from environment variables 1`] = `
   "JWT_KEY": "CLERK_JWT_KEY",
   "PUBLISHABLE_KEY": "CLERK_PUBLISHABLE_KEY",
   "SDK_METADATA": {
+    "environment": "test",
     "name": "@clerk/fastify",
     "version": "0.0.0-test",
   },

packages/fastify/src/constants.ts

@@ -9,6 +9,7 @@ export const JWT_KEY = process.env.CLERK_JWT_KEY || '';
 export const SDK_METADATA = {
   name: PACKAGE_NAME,
   version: PACKAGE_VERSION,
+  environment: process.env.NODE_ENV,
 };
 
 export const { Cookies, Headers } = constants;

packages/gatsby-plugin-clerk/src/constants.ts

@@ -15,4 +15,5 @@ export const TELEMETRY_DEBUG = isTruthy(process.env.GATSBY_CLERK_TELEMETRY_DEBUG
 export const SDK_METADATA = {
   name: PACKAGE_NAME,
   version: PACKAGE_VERSION,
+  environment: process.env.NODE_ENV,
 };

packages/nextjs/src/server/constants.ts

@@ -15,6 +15,7 @@ export const SIGN_UP_URL = process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL || '';
 export const SDK_METADATA = {
   name: PACKAGE_NAME,
   version: PACKAGE_VERSION,
+  environment: process.env.NODE_ENV,
 };
 
 export const TELEMETRY_DISABLED = isTruthy(process.env.NEXT_PUBLIC_CLERK_TELEMETRY_DISABLED);

packages/react/src/isomorphicClerk.ts

@@ -47,7 +47,11 @@ import type {
 } from './types';
 import { isConstructor, loadClerkJsScript } from './utils';
 
-const SDK_METADATA = { name: PACKAGE_NAME, version: PACKAGE_VERSION };
+const SDK_METADATA = {
+  name: PACKAGE_NAME,
+  version: PACKAGE_VERSION,
+  environment: process.env.NODE_ENV,
+};
 
 export interface Global {
   Clerk?: HeadlessBrowserClerk | BrowserClerk;

packages/sdk-node/src/utils.ts

@@ -35,6 +35,7 @@ export const loadApiEnv = () => {
     sdkMetadata: {
       name: PACKAGE_NAME,
       version: PACKAGE_VERSION,
+      environment: process.env.NODE_ENV,
     },
   };
 };

packages/types/src/clerk.ts

@@ -25,6 +25,7 @@ export type InstanceType = 'production' | 'development';
 export type SDKMetadata = {
   name: string;
   version: string;
+  environment?: string;
 };
 
 export type ListenerCallback = (emission: Resources) => void;