fix: filter out warning and info level events

* fix(frontend): simplify password matching logic

* fix(frontend): address review comments on validation feedback

* refactor(signup): remove redundant password mismatch check

frontend/src/AppRoutes/index.tsx

@@ -327,6 +327,11 @@ function App(): JSX.Element {
 					replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
 					replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
 					beforeSend(event) {
+						// Drop the event if its level is 'warning' or 'info'
+						if (event.level === 'warning' || event.level === 'info') {
+							return null;
+						}
+
 						const sessionReplayUrl = posthog.get_session_replay_url?.({
 							withTimestamp: true,
 						});

frontend/src/hooks/dashboard/useDashboardBootstrap.test.tsx

@@ -0,0 +1,158 @@
+import { act, render } from '@testing-library/react';
+import { Modal } from 'antd';
+import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
+import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
+import useTabVisibility from 'hooks/useTabFocus';
+import { getMinMaxForSelectedTime } from 'lib/getMinMax';
+import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboardQuery } from './useDashboardQuery';
+
+const mockDispatch = jest.fn();
+const mockSetDashboardData = jest.fn();
+const mockSetLayouts = jest.fn();
+const mockSetPanelMap = jest.fn();
+const mockResetDashboardStore = jest.fn();
+const mockGetUrlVariables = jest.fn();
+const mockUpdateUrlVariable = jest.fn();
+const mockRefetch = jest.fn();
+
+let mockGlobalTime = {
+	selectedTime: 'custom',
+	minTime: 1710000000000000000,
+	maxTime: 1710000300000000000,
+	isAutoRefreshDisabled: true,
+};
+
+let currentQueryData: unknown;
+
+jest.mock('react-i18next', () => ({
+	useTranslation: (): { t: (key: string) => string } => ({
+		t: (key: string): string => key,
+	}),
+}));
+
+jest.mock('react-redux', () => ({
+	useDispatch: jest.fn(() => mockDispatch),
+	useSelector: jest.fn(
+		(
+			selectorFn: (state: { globalTime: typeof mockGlobalTime }) => unknown,
+		): unknown => selectorFn({ globalTime: mockGlobalTime }),
+	),
+}));
+
+jest.mock('hooks/useTabFocus', () => jest.fn(() => true));
+jest.mock('hooks/dashboard/useDashboardVariablesSync', () => ({
+	useDashboardVariablesSync: jest.fn(),
+}));
+jest.mock('./useDashboardQuery', () => ({
+	useDashboardQuery: jest.fn(),
+}));
+jest.mock('hooks/dashboard/useTransformDashboardVariables', () => ({
+	useTransformDashboardVariables: jest.fn(),
+}));
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: jest.fn(),
+}));
+jest.mock('providers/Dashboard/initializeDefaultVariables', () => ({
+	initializeDefaultVariables: jest.fn(),
+}));
+jest.mock('lib/dashboard/getUpdatedLayout', () => ({
+	getUpdatedLayout: jest.fn(() => []),
+}));
+jest.mock('providers/Dashboard/util', () => ({
+	sortLayout: jest.fn((layout) => layout),
+}));
+jest.mock('lib/getMinMax', () => ({
+	getMinMaxForSelectedTime: jest.fn(),
+}));
+
+function TestComponent({ confirm }: { confirm: typeof Modal.confirm }): null {
+	useDashboardBootstrap('dashboard-1', { confirm });
+	return null;
+}
+
+describe('useDashboardBootstrap', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+
+		mockGlobalTime = {
+			selectedTime: 'custom',
+			minTime: 1710000000000000000,
+			maxTime: 1710000300000000000,
+			isAutoRefreshDisabled: true,
+		};
+
+		jest.mocked(useDashboardStore as unknown as jest.Mock).mockReturnValue({
+			setDashboardData: mockSetDashboardData,
+			setLayouts: mockSetLayouts,
+			setPanelMap: mockSetPanelMap,
+			resetDashboardStore: mockResetDashboardStore,
+		});
+
+		jest
+			.mocked(useTransformDashboardVariables as unknown as jest.Mock)
+			.mockReturnValue({
+				getUrlVariables: mockGetUrlVariables,
+				updateUrlVariable: mockUpdateUrlVariable,
+				transformDashboardVariables: <T,>(data: T): T => data,
+			});
+
+		jest.mocked(useTabVisibility as unknown as jest.Mock).mockReturnValue(true);
+		jest
+			.mocked(useDashboardQuery as unknown as jest.Mock)
+			.mockImplementation(() => ({
+				data: currentQueryData,
+				isLoading: false,
+				isError: false,
+				isFetching: false,
+				error: null,
+				refetch: mockRefetch,
+			}));
+	});
+
+	it('keeps minTime and maxTime unchanged for custom range on refresh confirm', () => {
+		const initialDashboard = {
+			id: 'dashboard-1',
+			updatedAt: '2024-01-01T00:00:00.000Z',
+			data: { layout: [], panelMap: {}, variables: {} },
+		};
+
+		const updatedDashboard = {
+			id: 'dashboard-1',
+			updatedAt: '2024-01-01T01:00:00.000Z',
+			data: { layout: [], panelMap: {}, variables: {} },
+		};
+
+		const mockConfirm = jest.fn<
+			ReturnType<typeof Modal.confirm>,
+			Parameters<typeof Modal.confirm>
+		>(() => ({ destroy: jest.fn(), update: jest.fn() }));
+
+		currentQueryData = { data: initialDashboard };
+		const { rerender } = render(<TestComponent confirm={mockConfirm} />);
+
+		expect(mockConfirm).not.toHaveBeenCalled();
+
+		currentQueryData = { data: updatedDashboard };
+		rerender(<TestComponent confirm={mockConfirm} />);
+
+		expect(mockConfirm).toHaveBeenCalledTimes(1);
+		const firstCall = mockConfirm.mock.calls[0];
+		expect(firstCall).toBeDefined();
+		const [confirmProps] = firstCall as Parameters<typeof Modal.confirm>;
+
+		act(() => {
+			confirmProps.onOk?.();
+		});
+
+		expect(getMinMaxForSelectedTime).not.toHaveBeenCalled();
+		expect(mockDispatch).toHaveBeenCalledWith({
+			type: 'UPDATE_TIME_INTERVAL',
+			payload: {
+				selectedTime: 'custom',
+				minTime: mockGlobalTime.minTime,
+				maxTime: mockGlobalTime.maxTime,
+			},
+		});
+	});
+});

frontend/src/hooks/dashboard/useDashboardBootstrap.ts

@@ -102,11 +102,19 @@ export function useDashboardBootstrap(
 				onOk() {
 					setDashboardData(updatedDashboardData);
 
-					const { maxTime, minTime } = getMinMaxForSelectedTime(
-						globalTime.selectedTime,
-						globalTime.minTime,
-						globalTime.maxTime,
-					);
+					const { maxTime, minTime } =
+						globalTime.selectedTime === 'custom'
+							? {
+									// For custom ranges, min/max are already stored in nanoseconds.
+									// Recomputing via getMinMaxForSelectedTime would multiply them again.
+									maxTime: globalTime.maxTime,
+									minTime: globalTime.minTime,
+								}
+							: getMinMaxForSelectedTime(
+									globalTime.selectedTime,
+									globalTime.minTime,
+									globalTime.maxTime,
+								);
 					dispatch({
 						type: UPDATE_TIME_INTERVAL,
 						payload: { maxTime, minTime, selectedTime: globalTime.selectedTime },

frontend/src/pages/SignUp/SignUp.tsx

@@ -8,7 +8,7 @@ import afterLogin from 'AppRoutes/utils';
 import AuthError from 'components/AuthError/AuthError';
 import AuthPageContainer from 'components/AuthPageContainer';
 import { useNotifications } from 'hooks/useNotifications';
-import { ArrowRight, CircleAlert } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
 import APIError from 'types/api/error';
 
 import tvUrl from '@/assets/svgs/tv.svg';
@@ -28,9 +28,8 @@ type FormValues = {
 
 function SignUp(): JSX.Element {
 	const [loading, setLoading] = useState(false);
+	const [confirmPasswordTouched, setConfirmPasswordTouched] = useState(false);
 
-	const [confirmPasswordError, setConfirmPasswordError] =
-		useState<boolean>(false);
 	const [formError, setFormError] = useState<APIError | null>();
 
 	const { notifications } = useNotifications();
@@ -84,35 +83,10 @@ function SignUp(): JSX.Element {
 		})();
 	};
 
-	const handleValuesChange: (changedValues: Partial<FormValues>) => void = (
-		changedValues,
-	) => {
-		// Clear error if passwords match while typing (but don't set error until blur)
-		if ('password' in changedValues || 'confirmPassword' in changedValues) {
-			const { password, confirmPassword } = form.getFieldsValue();
+	const isPasswordMismatch =
+		Boolean(confirmPassword) && password !== confirmPassword;
 
-			if (password && confirmPassword && password === confirmPassword) {
-				setConfirmPasswordError(false);
-			}
-		}
-	};
-
-	const handlePasswordBlur = (): void => {
-		const { password, confirmPassword } = form.getFieldsValue();
-		// Only validate if confirm password has a value
-		if (confirmPassword) {
-			const isSamePassword = password === confirmPassword;
-			setConfirmPasswordError(!isSamePassword);
-		}
-	};
-
-	const handleConfirmPasswordBlur = (): void => {
-		const { password, confirmPassword } = form.getFieldsValue();
-		if (password && confirmPassword) {
-			const isSamePassword = password === confirmPassword;
-			setConfirmPasswordError(!isSamePassword);
-		}
-	};
+	const showPasswordMismatchError = confirmPasswordTouched && isPasswordMismatch;
 
 	const isValidForm = useMemo(
 		(): boolean =>
@@ -120,8 +94,8 @@ function SignUp(): JSX.Element {
 			Boolean(email?.trim()) &&
 			Boolean(password?.trim()) &&
 			Boolean(confirmPassword?.trim()) &&
-			!confirmPasswordError,
-		[loading, email, password, confirmPassword, confirmPasswordError],
+			password === confirmPassword,
+		[loading, email, password, confirmPassword],
 	);
 
 	return (
@@ -140,12 +114,7 @@ function SignUp(): JSX.Element {
 					</Typography.Paragraph>
 				</div>
 
-				<FormContainer
-					onFinish={handleSubmit}
-					onValuesChange={handleValuesChange}
-					form={form}
-					className="signup-form"
-				>
+				<FormContainer onFinish={handleSubmit} form={form} className="signup-form">
 					<div className="signup-form-container">
 						<div className="signup-form-fields">
 							<div className="signup-field-container">
@@ -175,7 +144,6 @@ function SignUp(): JSX.Element {
 										placeholder="Enter new password"
 										disabled={loading}
 										className="signup-antd-input"
-										onBlur={handlePasswordBlur}
 									/>
 								</FormContainer.Item>
 							</div>
@@ -185,6 +153,12 @@ function SignUp(): JSX.Element {
 								<FormContainer.Item
 									name="confirmPassword"
 									validateTrigger="onBlur"
+									validateStatus={showPasswordMismatchError ? 'error' : undefined}
+									help={
+										showPasswordMismatchError
+											? "Passwords don't match. Please try again."
+											: undefined
+									}
 									rules={[{ required: true, message: 'Please enter confirm password!' }]}
 								>
 									<AntdInput.Password
@@ -193,7 +167,7 @@ function SignUp(): JSX.Element {
 										placeholder="Confirm your new password"
 										disabled={loading}
 										className="signup-antd-input"
-										onBlur={handleConfirmPasswordBlur}
+										onBlur={() => setConfirmPasswordTouched(true)}
 									/>
 								</FormContainer.Item>
 							</div>
@@ -205,19 +179,7 @@ function SignUp(): JSX.Element {
 						your admin for an invite link
 					</Callout>
 
-					{confirmPasswordError && (
-						<Callout
-							type="error"
-							size="small"
-							showIcon
-							icon={<CircleAlert size={12} />}
-							className="signup-error-callout"
-						>
-							Passwords don&apos;t match. Please try again.
-						</Callout>
-					)}
-
-					{formError && !confirmPasswordError && <AuthError error={formError} />}
+					{formError && <AuthError error={formError} />}
 
 					<div className="signup-form-actions">
 						<Button

frontend/src/pages/TracesFunnelDetails/components/FunnelResults/utils.tsx

@@ -7,7 +7,12 @@ export const topTracesTableColumns = [
 		dataIndex: 'trace_id',
 		key: 'trace_id',
 		render: (traceId: string): JSX.Element => (
-			<Link to={`/trace/${traceId}`} className="trace-id-cell">
+			<Link
+				to={`/trace/${traceId}`}
+				className="trace-id-cell"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
 				{traceId}
 			</Link>
 		),