ref: Always use nextRouterInstrumentation

For ease of use, I make it so that for client-side tracing
nextRouterInstrumentation is always turned on

Author: AbhiPrasad

packages/nextjs/src/index.client.ts

@@ -31,15 +31,9 @@ const defaultBrowserTracingIntegration = new BrowserTracing({
 
 function createClientIntegrations(integrations?: UserIntegrations): UserIntegrations {
   if (integrations) {
-    const newIntegrations = addIntegration(defaultBrowserTracingIntegration, integrations);
-    if (Array.isArray(newIntegrations)) {
-      newIntegrations.forEach(i => {
-        if (i.name === 'BrowserTracing') {
-          (i as InstanceType<typeof BrowserTracing>).options.routingInstrumentation = nextRouterInstrumentation;
-        }
-      });
-    }
-    return newIntegrations;
+    return addIntegration(defaultBrowserTracingIntegration, integrations, {
+      BrowserTracing: { keyPath: 'options.routingInstrumentation', value: nextRouterInstrumentation },
+    });
   } else {
     return [defaultBrowserTracingIntegration];
   }

packages/nextjs/src/utils/userIntegrations.ts

@@ -3,6 +3,35 @@ import { Integration } from '@sentry/types';
 export type UserFunctionIntegrations = (integrations: Integration[]) => Integration[];
 export type UserIntegrations = Integration[] | UserFunctionIntegrations;
 
+type Options = {
+  [integrationName: string]:
+    | {
+        keyPath: string;
+        value: unknown;
+      }
+    | undefined;
+};
+
+/**
+ * Recursively traverses an object to update an existing nested key.
+ * Note: The provided key path must include existing properties,
+ * the function will not create objects while traversing.
+ *
+ * @param obj An object to update
+ * @param value The value to update the nested key with
+ * @param keyPath The path to the key to update ex. fizz.buzz.foo
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function setNestedKey(obj: Record<string, any>, keyPath: string, value: unknown): void {
+  // Ex. foo.bar.zoop will extract foo and bar.zoop
+  const match = keyPath.match(/([a-z]+)\.(.*)/i);
+  if (match === null) {
+    obj[keyPath] = value;
+  } else {
+    setNestedKey(obj[match[1]], match[2], value);
+  }
+}
+
 /**
  * Retrieves the patched integrations with the provided integration.
  *
@@ -12,18 +41,40 @@ export type UserIntegrations = Integration[] | UserFunctionIntegrations;
  *
  * @param integration The integration to patch, if necessary.
  * @param userIntegrations Integrations defined by the user.
+ * @param options options to update for a particular integration
  * @returns Final integrations, patched if necessary.
  */
-export function addIntegration(integration: Integration, userIntegrations: UserIntegrations): UserIntegrations {
+export function addIntegration(
+  integration: Integration,
+  userIntegrations: UserIntegrations,
+  options: Options = {},
+): UserIntegrations {
   if (Array.isArray(userIntegrations)) {
-    return addIntegrationToArray(integration, userIntegrations);
+    return addIntegrationToArray(integration, userIntegrations, options);
   } else {
-    return addIntegrationToFunction(integration, userIntegrations);
+    return addIntegrationToFunction(integration, userIntegrations, options);
   }
 }
 
-function addIntegrationToArray(integration: Integration, userIntegrations: Integration[]): Integration[] {
-  if (userIntegrations.map(int => int.name).includes(integration.name)) {
+function addIntegrationToArray(
+  integration: Integration,
+  userIntegrations: Integration[],
+  options: Options,
+): Integration[] {
+  let includesName = false;
+  // eslint-disable-next-line @typescript-eslint/prefer-for-of
+  for (let x = 0; x < userIntegrations.length; x++) {
+    if (userIntegrations[x].name === integration.name) {
+      includesName = true;
+    }
+
+    const op = options[userIntegrations[x].name];
+    if (op) {
+      setNestedKey(userIntegrations[x], op.keyPath, op.value);
+    }
+  }
+
+  if (includesName) {
     return userIntegrations;
   }
   return [...userIntegrations, integration];
@@ -32,10 +83,11 @@ function addIntegrationToArray(integration: Integration, userIntegrations: Integ
 function addIntegrationToFunction(
   integration: Integration,
   userIntegrationsFunc: UserFunctionIntegrations,
+  options: Options,
 ): UserFunctionIntegrations {
   const wrapper: UserFunctionIntegrations = defaultIntegrations => {
     const userFinalIntegrations = userIntegrationsFunc(defaultIntegrations);
-    return addIntegrationToArray(integration, userFinalIntegrations);
+    return addIntegrationToArray(integration, userFinalIntegrations, options);
   };
   return wrapper;
 }

packages/nextjs/test/index.client.test.ts

@@ -77,7 +77,7 @@ describe('Client init()', () => {
       expect(integrations).toEqual([expect.any(Integrations.Breadcrumbs), expect.any(BrowserTracing)]);
     });
 
-    it('uses custom BrowserTracing but uses nextRouterInstrumentation', () => {
+    it('uses custom BrowserTracing with array option with nextRouterInstrumentation', () => {
       init({
         integrations: [new BrowserTracing({ idleTimeout: 5000, startTransactionOnLocationChange: false })],
       });
@@ -93,5 +93,22 @@ describe('Client init()', () => {
         }),
       );
     });
+
+    it('uses custom BrowserTracing with function option with nextRouterInstrumentation', () => {
+      init({
+        integrations: () => [new BrowserTracing({ idleTimeout: 5000, startTransactionOnLocationChange: false })],
+      });
+
+      const reactInitOptions: NextjsOptions = mockInit.mock.calls[0][0];
+      const integrationFunc = reactInitOptions.integrations as () => Integration[];
+      const integrations = integrationFunc();
+      expect((integrations[0] as InstanceType<typeof BrowserTracing>).options).toEqual(
+        expect.objectContaining({
+          idleTimeout: 5000,
+          startTransactionOnLocationChange: false,
+          routingInstrumentation: nextRouterInstrumentation,
+        }),
+      );
+    });
   });
 });