fix: Look up params as soon as the href changes

Without this, we were getting the params at a delayed rate, so we were swapping out the variables inconsistently. Plus, if you navigated around the database, you wouldn’t get multiple view starts.

https://harperdb.atlassian.net/browse/STUDIO-381

Author: dawsontoth

src/integrations/datadog/datadog.ts

@@ -5,8 +5,8 @@ import { excludeFalsy } from '@/lib/arrays/excludeFalsy';
 import { isLocalUser } from '@/lib/types/isLocalUser';
 import { datadogRum } from '@datadog/browser-rum';
 import { reactPlugin } from '@datadog/browser-rum-react';
-import { useLocation, useParams } from '@tanstack/react-router';
-import { useEffect, useMemo } from 'react';
+import { useLocation, useRouter } from '@tanstack/react-router';
+import { useEffect } from 'react';
 
 let initialized = false;
 const enabled = !import.meta.env.DEV && !isLocalStudio;
@@ -41,11 +41,12 @@ export function useDatadog() {
 
 export function useOnRouteLoadTracker() {
 	const location = useLocation();
+	const router = useRouter();
 	const { user } = useOverallAuth();
-	const params = useParams({ strict: false });
-	const name = useMemo(() => translateUrlForDatadog(location.href, params), [location.href, params]);
 
 	useEffect(() => {
+		const currentMatches = router.matchRoutes(router.state.location);
+		const name = translateUrlForDatadog(location.href, currentMatches.map(m => m.params));
 		if (!enabled) {
 			return;
 		}
@@ -54,7 +55,7 @@ export function useOnRouteLoadTracker() {
 			version: import.meta.env.VITE_STUDIO_VERSION,
 			name,
 		});
-	}, [name]);
+	}, [location.href, router]);
 
 	useEffect(() => {
 		if (!enabled) {

src/integrations/datadog/translateUrlForDatadog.test.ts

@@ -10,17 +10,17 @@ describe('translateUrlForDatadog', () => {
 			databaseName: 'data',
 			tableName: 'Users',
 		};
-		const result = translateUrlForDatadog(href, params);
+		const result = translateUrlForDatadog(href, [params]);
 		expect(result).toBe('/orgs/$organizationId/$clusterId/browse/$databaseName/$tableName/');
 	});
 
 	it('adds a trailing slash if missing', () => {
 		const href = '/orgs/acme/';
-		const result = translateUrlForDatadog(href, {});
+		const result = translateUrlForDatadog(href, [{}]);
 		expect(result).toBe('/orgs/acme/');
 
 		const href2 = '/orgs/acme';
-		const result2 = translateUrlForDatadog(href2, {});
+		const result2 = translateUrlForDatadog(href2, [{}]);
 		expect(result2).toBe('/orgs/acme/');
 	});
 
@@ -31,7 +31,7 @@ describe('translateUrlForDatadog', () => {
 			clusterId: 'clu-2',
 			instanceId: 'ins-3',
 		};
-		const result = translateUrlForDatadog(href, params);
+		const result = translateUrlForDatadog(href, [params]);
 		expect(result).toBe('/orgs/$organizationId/$clusterId/instances/$instanceId/');
 	});
 
@@ -40,7 +40,7 @@ describe('translateUrlForDatadog', () => {
 		const params = {
 			organizationId: 'org-2',
 		};
-		const result = translateUrlForDatadog(href, params);
+		const result = translateUrlForDatadog(href, [params]);
 		expect(result).toBe('/orgs/org-1/other/');
 	});
 
@@ -49,7 +49,7 @@ describe('translateUrlForDatadog', () => {
 		const params = {
 			organizationId: 'org-1',
 		};
-		const result = translateUrlForDatadog(href, params);
+		const result = translateUrlForDatadog(href, [params]);
 		expect(result).toBe('/files/my-org-1-file/');
 	});
 
@@ -59,7 +59,7 @@ describe('translateUrlForDatadog', () => {
 			databaseName: 'data',
 			tableName: 'Users',
 		};
-		const result = translateUrlForDatadog(href, params);
+		const result = translateUrlForDatadog(href, [params]);
 		expect(result).toBe('/dbs/$databaseName/tables/$tableName/');
 	});
 
@@ -70,7 +70,21 @@ describe('translateUrlForDatadog', () => {
 			clusterId: 'clu-2',
 		};
 		// The function simply splits on '?', so the query is dropped; the rest remains intact, including protocol and host.
-		const result = translateUrlForDatadog(href, params);
+		const result = translateUrlForDatadog(href, [params]);
 		expect(result).toBe('https://example.com/app#/orgs/$organizationId/$clusterId/');
 	});
+
+	it('works with multiple params', () => {
+		const href = '/orgs/org-1/clu-2?x=1&y=2';
+		const params: Record<string, string>[] = [
+			{
+				organizationId: 'org-1',
+			},
+			{
+				clusterId: 'clu-2',
+			},
+		];
+		const result = translateUrlForDatadog(href, params);
+		expect(result).toBe('/orgs/$organizationId/$clusterId/');
+	});
 });

src/integrations/datadog/translateUrlForDatadog.ts

@@ -1,10 +1,12 @@
-export function translateUrlForDatadog(href: string, params: Record<string, string>): string {
+export function translateUrlForDatadog(href: string, allParams: Record<string, string>[]): string {
 	let translated = href.split('?')[0];
 	if (!translated.endsWith('/')) {
 		translated = translated + '/';
 	}
-	for (const key in params) {
-		translated = translated.replace(`/${params[key]}/`, `/$${key}/`);
+	for (const params of allParams) {
+		for (const key in params) {
+			translated = translated.replace(`/${params[key]}/`, `/$${key}/`);
+		}
 	}
 	return translated;
 }