Add canUseKeyless check to detectKeylessEnvDrift function in keyless telemetry

Changeset

Author: heatlikeheatwave

.changeset/fine-weeks-give.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Updated implementation of detectKeylessEnvDrift to function when <ClerkProvider /> is implemented in client components. Added canUseKeyless check to detectKeylessEnvDrift to prevent telemetry event from running for production applications.

packages/nextjs/src/app-router/client/ClerkProvider.tsx

@@ -44,6 +44,13 @@ const NextClientClerkProvider = (props: NextClerkProviderProps) => {
   const replace = useAwaitableReplace();
   const [isPending, startTransition] = useTransition();
 
+  // Call drift detection on mount (client-side)
+  useSafeLayoutEffect(() => {
+    if (canUseKeyless) {
+      void detectKeylessEnvDriftAction();
+    }
+  }, []);
+
   // Avoid rendering nested ClerkProviders by checking for the existence of the ClerkNextOptions context provider
   const isNested = Boolean(useClerkNextOptions());
   if (isNested) {
@@ -56,11 +63,6 @@ const NextClientClerkProvider = (props: NextClerkProviderProps) => {
     }
   }, [isPending]);
 
-  // Call drift detection on mount (client-side)
-  useSafeLayoutEffect(() => {
-    void detectKeylessEnvDriftAction();
-  }, []);
-
   useSafeLayoutEffect(() => {
     window.__unstable__onBeforeSetActive = intent => {
       /**

packages/nextjs/src/app-router/keyless-actions.ts

@@ -95,6 +95,10 @@ export async function deleteKeylessAction() {
 }
 
 export async function detectKeylessEnvDriftAction() {
+  if (!canUseKeyless) {
+    return;
+  }
+
   try {
     const { detectKeylessEnvDrift } = await import('../server/keyless-telemetry.js');
     await detectKeylessEnvDrift();

packages/nextjs/src/server/keyless-telemetry.ts

@@ -2,6 +2,7 @@ import type { TelemetryEventRaw } from '@clerk/types';
 import { promises as fs } from 'fs';
 import { dirname, join } from 'path';
 
+import { canUseKeyless } from '../utils/feature-flags';
 import { createClerkClientWithOptions } from './createClerkClient';
 
 const EVENT_KEYLESS_ENV_DRIFT_DETECTED = 'KEYLESS_ENV_DRIFT_DETECTED';
@@ -86,6 +87,9 @@ async function tryMarkTelemetryEventAsFired(): Promise<boolean> {
  * @returns Promise<void> - Function completes silently, errors are logged but don't throw
  */
 export async function detectKeylessEnvDrift(): Promise<void> {
+  if (!canUseKeyless) {
+    return;
+  }
   // Only run on server side
   if (typeof window !== 'undefined') {
     return;