From fe4d394fa84db2f17aaff2f0288514ca09336f35 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 23 Oct 2025 09:28:35 +0800
Subject: [PATCH 1/2] Chore/improve error handling ux for insert before and
 remove child errors (#39779)

* Improve error handling UX for insertBefore and removeChild client exception errors

* nit

* nit refactor
---
 .../interfaces/Support/MessageField.tsx       |   2 +-
 .../ui/AIAssistantPanel/AIAssistant.tsx       |   2 +-
 .../ClientSideExceptionHandler.tsx            | 115 ++++++++++
 .../ui/{ => ErrorBoundary}/ErrorBoundary.tsx  |   0
 .../GlobalErrorBoundaryState.tsx              |  65 ++++++
 .../InsertBeforeRemoveChildErrorHandler.tsx   |  89 ++++++++
 .../ui/GlobalErrorBoundaryState.tsx           | 200 ------------------
 apps/studio/pages/_app.tsx                    |   3 +-
 8 files changed, 273 insertions(+), 203 deletions(-)
 create mode 100644 apps/studio/components/ui/ErrorBoundary/ClientSideExceptionHandler.tsx
 rename apps/studio/components/ui/{ => ErrorBoundary}/ErrorBoundary.tsx (100%)
 create mode 100644 apps/studio/components/ui/ErrorBoundary/GlobalErrorBoundaryState.tsx
 create mode 100644 apps/studio/components/ui/ErrorBoundary/InsertBeforeRemoveChildErrorHandler.tsx
 delete mode 100644 apps/studio/components/ui/GlobalErrorBoundaryState.tsx

diff --git a/apps/studio/components/interfaces/Support/MessageField.tsx b/apps/studio/components/interfaces/Support/MessageField.tsx
index 1a0196f3aba00..7fb4208442c1e 100644
--- a/apps/studio/components/interfaces/Support/MessageField.tsx
+++ b/apps/studio/components/interfaces/Support/MessageField.tsx
@@ -41,7 +41,7 @@ export function MessageField({ form, originalError }: MessageFieldProps) {
             <Admonition
               showIcon={false}
               type="default"
-              className="mt-2"
+              className="mt-2 max-h-[150px] overflow-y-auto"
               title="The error that you ran into will be included in your message for reference"
               description={`Error: ${originalError}`}
             />
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
index 9e5083fd63326..4678cf0a7af9b 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
@@ -28,7 +28,7 @@ import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import { Button, cn, KeyboardShortcut } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { ButtonTooltip } from '../ButtonTooltip'
-import { ErrorBoundary } from '../ErrorBoundary'
+import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary'
 import type { SqlSnippet } from './AIAssistant.types'
 import { onErrorChat } from './AIAssistant.utils'
 import { AIAssistantHeader } from './AIAssistantHeader'
diff --git a/apps/studio/components/ui/ErrorBoundary/ClientSideExceptionHandler.tsx b/apps/studio/components/ui/ErrorBoundary/ClientSideExceptionHandler.tsx
new file mode 100644
index 0000000000000..ebfaeaa55f9a5
--- /dev/null
+++ b/apps/studio/components/ui/ErrorBoundary/ClientSideExceptionHandler.tsx
@@ -0,0 +1,115 @@
+import { ExternalLink } from 'lucide-react'
+
+import { SupportCategories } from '@supabase/shared-types/out/constants'
+import { SupportLink } from 'components/interfaces/Support/SupportLink'
+import { useRouter } from 'next/router'
+import { Button, cn } from 'ui'
+import { Admonition } from 'ui-patterns'
+import CopyButton from '../CopyButton'
+import { InlineLinkClassName } from '../InlineLink'
+
+interface ClientSideExceptionHandlerProps {
+  message: string
+  sentryIssueId: string
+  urlMessage: string
+  resetErrorBoundary: () => void
+}
+
+export const ClientSideExceptionHandler = ({
+  message,
+  sentryIssueId,
+  urlMessage,
+  resetErrorBoundary,
+}: ClientSideExceptionHandlerProps) => {
+  const router = useRouter()
+
+  const isProduction = process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod'
+
+  const handleClearStorage = () => {
+    try {
+      localStorage.clear()
+      sessionStorage.clear()
+    } catch (e) {
+      // ignore
+    }
+    window.location.reload()
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-y-1 text-left py-2 w-full">
+        <div className="flex items-center justify-between mb-3">
+          <p className="text-lg font-bold">Sorry! An unexpected error occurred.</p>
+          <CopyButton type="outline" text={message} copyLabel="Copy error" />
+        </div>
+        <p className="text-sm">
+          Application error: a client-side exception has occurred (see browser console for more
+          information)
+        </p>
+        <p className="text-foreground-light text-sm">{message}</p>
+      </div>
+      <Admonition type="warning" showIcon={false} title="We recommend trying the following:">
+        <ul className="list-disc pl-2 list-inside text-sm space-y-1 [&_b]:font-medium [&_b]:text-foreground">
+          <li>
+            <span
+              className={cn(InlineLinkClassName, 'cursor-pointer')}
+              onClick={() => window.location.reload()}
+            >
+              Refresh
+            </span>{' '}
+            the page
+          </li>
+          <li>
+            <span
+              className={cn(InlineLinkClassName, 'cursor-pointer')}
+              onClick={() => router.push('/logout')}
+            >
+              Sign out
+            </span>{' '}
+            and sign back in
+          </li>
+          <li>
+            <span
+              className={cn(InlineLinkClassName, 'cursor-pointer')}
+              onClick={handleClearStorage}
+            >
+              Clear your browser storage
+            </span>{' '}
+            to clean potentially outdated data
+          </li>
+          <li>
+            Disable browser extensions that might modify page content (e.g., Google Translate)
+          </li>
+          <li>If the problem persists, please contact support for assistance</li>
+        </ul>
+      </Admonition>
+
+      <div className={cn('w-full mx-auto grid gap-2', 'grid-cols-2 sm:w-1/2')}>
+        <Button asChild type="default" icon={<ExternalLink />}>
+          <SupportLink
+            queryParams={{
+              category: SupportCategories.DASHBOARD_BUG,
+              subject: 'Client side exception occurred on dashboard',
+              sid: sentryIssueId,
+              error: urlMessage,
+            }}
+          >
+            Contact support
+          </SupportLink>
+        </Button>
+
+        {/* [Joshen] For local and staging, allow us to escape the error boundary */}
+        {/* We could actually investigate how to make this available on prod, but without being able to reliably test this, I'm not keen to do it now */}
+        {isProduction ? (
+          <Button type="outline" onClick={() => router.reload()}>
+            Reload dashboard
+          </Button>
+        ) : (
+          <Button type="outline" onClick={() => resetErrorBoundary()}>
+            Return to dashboard
+          </Button>
+        )}
+      </div>
+    </>
+  )
+}
diff --git a/apps/studio/components/ui/ErrorBoundary.tsx b/apps/studio/components/ui/ErrorBoundary/ErrorBoundary.tsx
similarity index 100%
rename from apps/studio/components/ui/ErrorBoundary.tsx
rename to apps/studio/components/ui/ErrorBoundary/ErrorBoundary.tsx
diff --git a/apps/studio/components/ui/ErrorBoundary/GlobalErrorBoundaryState.tsx b/apps/studio/components/ui/ErrorBoundary/GlobalErrorBoundaryState.tsx
new file mode 100644
index 0000000000000..4efebda3cb894
--- /dev/null
+++ b/apps/studio/components/ui/ErrorBoundary/GlobalErrorBoundaryState.tsx
@@ -0,0 +1,65 @@
+import { isError } from 'lodash'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
+import { ClientSideExceptionHandler } from './ClientSideExceptionHandler'
+import { InsertBeforeRemoveChildErrorHandler } from './InsertBeforeRemoveChildErrorHandler'
+
+export type FallbackProps = {
+  error: unknown
+  resetErrorBoundary: (...args: unknown[]) => void
+}
+
+export const GlobalErrorBoundaryState = ({ error, resetErrorBoundary }: FallbackProps) => {
+  const router = useRouter()
+  const checkIsError = isError(error)
+
+  const largeLogo = useIsFeatureEnabled('branding:large_logo')
+
+  const errorMessage = checkIsError ? error.message : ''
+  const urlMessage = checkIsError ? `Path name: ${router.pathname}\n\n${error?.stack}` : ''
+
+  const isRemoveChildError = checkIsError
+    ? errorMessage.includes("Failed to execute 'removeChild' on 'Node'")
+    : false
+  const isInsertBeforeError = checkIsError
+    ? errorMessage.includes("Failed to execute 'insertBefore' on 'Node'")
+    : false
+
+  // Get Sentry issue ID from error if available
+  const sentryIssueId = (!!error && typeof error === 'object' && (error as any).sentryId) ?? ''
+
+  return (
+    <div className="w-screen mx-auto h-screen flex items-center justify-center">
+      <header className="h-12 absolute top-0 w-full border-b px-4 flex items-center">
+        <Link href="/" className="items-center justify-center">
+          <img
+            alt="Supabase"
+            src={`${router.basePath}/img/supabase-logo.svg`}
+            className={largeLogo ? 'h-[20px]' : 'h-[18px]'}
+          />
+        </Link>
+      </header>
+
+      <div className="flex flex-col gap-y-4 max-w-full sm:max-w-[660px] px-4 sm:px-0">
+        {isRemoveChildError || isInsertBeforeError ? (
+          <InsertBeforeRemoveChildErrorHandler
+            message={errorMessage}
+            sentryIssueId={sentryIssueId}
+            urlMessage={urlMessage}
+            isRemoveChildError={isRemoveChildError}
+            isInsertBeforeError={isInsertBeforeError}
+          />
+        ) : (
+          <ClientSideExceptionHandler
+            message={errorMessage}
+            sentryIssueId={sentryIssueId}
+            urlMessage={urlMessage}
+            resetErrorBoundary={resetErrorBoundary}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/studio/components/ui/ErrorBoundary/InsertBeforeRemoveChildErrorHandler.tsx b/apps/studio/components/ui/ErrorBoundary/InsertBeforeRemoveChildErrorHandler.tsx
new file mode 100644
index 0000000000000..77501d94a1b36
--- /dev/null
+++ b/apps/studio/components/ui/ErrorBoundary/InsertBeforeRemoveChildErrorHandler.tsx
@@ -0,0 +1,89 @@
+import { SupportCategories } from '@supabase/shared-types/out/constants'
+import { Blocks, ExternalLink } from 'lucide-react'
+import { useRouter } from 'next/router'
+
+import { SupportLink } from 'components/interfaces/Support/SupportLink'
+import { detectBrowser } from 'lib/helpers'
+import { Button } from 'ui'
+
+interface InsertBeforeRemoveChildErrorHandlerProps {
+  message: string
+  sentryIssueId: string
+  urlMessage: string
+  isRemoveChildError: boolean
+  isInsertBeforeError?: boolean
+}
+
+export const InsertBeforeRemoveChildErrorHandler = ({
+  message,
+  sentryIssueId,
+  urlMessage,
+  isRemoveChildError,
+  isInsertBeforeError,
+}: InsertBeforeRemoveChildErrorHandlerProps) => {
+  const router = useRouter()
+  const browser = detectBrowser()
+
+  return (
+    <>
+      <div className="flex flex-col gap-y-4 text-left py-2 w-full">
+        <div className="flex items-center gap-x-3">
+          <p className="text-lg font-bold">Sorry! A browser extension may have caused an error.</p>
+          <Blocks className="text-foreground-lighter" />
+        </div>
+
+        <div className="flex flex-col gap-y-2">
+          <p className="text-sm text-foreground-light">
+            Browser translation tools (like Chrome's built-in Translate) or some third-party browser
+            extensions are known to cause errors when using the Supabase Dashboard.
+          </p>
+
+          <p className="text-sm text-foreground-light">
+            We highly recommend{' '}
+            <span className="text-foreground">
+              {browser === 'Chrome'
+                ? 'disabling Chrome Translate or certain browser extensions'
+                : 'avoiding the use of browser translation tools or disabling certain extensions'}
+            </span>{' '}
+            while using the Supabase Dashboard to avoid running into this error. Try to refresh the
+            browser to see if it occurs again.
+          </p>
+        </div>
+
+        <p className="text-foreground-lighter text-sm">Error: {message}</p>
+      </div>
+
+      <div className="flex gap-x-2 justify-center items-center">
+        <Button asChild type="default" icon={<ExternalLink />}>
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href={
+              isRemoveChildError
+                ? 'https://github.com/facebook/react/issues/17256'
+                : isInsertBeforeError
+                  ? 'https://github.com/facebook/react/issues/24865'
+                  : '/'
+            }
+          >
+            More information
+          </a>
+        </Button>
+        <Button type="outline" onClick={() => router.reload()}>
+          Refresh page
+        </Button>
+      </div>
+      <SupportLink
+        className="text-center text-xs text-foreground-lighter hover:text-foreground-light transition"
+        queryParams={{
+          category: SupportCategories.DASHBOARD_BUG,
+          subject: `Client error: Failed to execute '${isRemoveChildError ? 'removeChild' : 'insertBefore'}' on 'Node'`,
+          sid: sentryIssueId,
+          error: urlMessage,
+        }}
+      >
+        Still stuck?
+      </SupportLink>
+    </>
+  )
+}
diff --git a/apps/studio/components/ui/GlobalErrorBoundaryState.tsx b/apps/studio/components/ui/GlobalErrorBoundaryState.tsx
deleted file mode 100644
index 6747f5717f491..0000000000000
--- a/apps/studio/components/ui/GlobalErrorBoundaryState.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { isError } from 'lodash'
-import { ExternalLink } from 'lucide-react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-
-import { SupportCategories } from '@supabase/shared-types/out/constants'
-import { SupportLink } from 'components/interfaces/Support/SupportLink'
-import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
-import { Button, cn } from 'ui'
-import { Admonition } from 'ui-patterns'
-import CopyButton from './CopyButton'
-import { InlineLinkClassName } from './InlineLink'
-
-export type FallbackProps = {
-  error: unknown
-  resetErrorBoundary: (...args: any[]) => void
-}
-
-export const GlobalErrorBoundaryState = ({ error, resetErrorBoundary }: FallbackProps) => {
-  const router = useRouter()
-  const checkIsError = isError(error)
-
-  const largeLogo = useIsFeatureEnabled('branding:large_logo')
-
-  const errorMessage = checkIsError ? error.message : ''
-  const urlMessage = checkIsError ? `Path name: ${router.pathname}\n\n${error?.stack}` : ''
-  const isRemoveChildError = checkIsError
-    ? errorMessage.includes("Failed to execute 'removeChild' on 'Node'")
-    : false
-  const isInsertBeforeError = checkIsError
-    ? errorMessage.includes("Failed to execute 'insertBefore' on 'Node'")
-    : false
-
-  // Get Sentry issue ID from error if available
-  const sentryIssueId = (!!error && typeof error === 'object' && (error as any).sentryId) ?? ''
-
-  const handleClearStorage = () => {
-    try {
-      localStorage.clear()
-      sessionStorage.clear()
-    } catch (e) {
-      // ignore
-    }
-    window.location.reload()
-  }
-
-  return (
-    <div className="w-screen mx-auto h-screen flex items-center justify-center">
-      <header className="h-12 absolute top-0 w-full border-b px-4 flex items-center">
-        <Link href="/" className="items-center justify-center">
-          <img
-            alt="Supabase"
-            src={`${router.basePath}/img/supabase-logo.svg`}
-            className={largeLogo ? 'h-[20px]' : 'h-[18px]'}
-          />
-        </Link>
-      </header>
-
-      <div className="flex flex-col gap-y-4 max-w-full sm:max-w-[660px] px-4 sm:px-0">
-        <div className="flex flex-col gap-y-1 text-left py-2 w-full">
-          <div className="flex items-center justify-between mb-3">
-            <p className="text-lg font-bold">Sorry! An unexpected error occurred.</p>
-            <CopyButton type="outline" text={errorMessage} copyLabel="Copy error" />
-          </div>
-          <p className="text-sm">
-            Application error: a client-side exception has occurred (see browser console for more
-            information)
-          </p>
-          <p className="text-foreground-light text-sm">{errorMessage}</p>
-        </div>
-        {isRemoveChildError || isInsertBeforeError ? (
-          <Admonition
-            type="warning"
-            title="This error might be caused by Google translate or third-party browser extensions"
-          >
-            <p className="prose max-w-full text-sm !leading-normal">
-              Try to avoid using Google translate or disable certain browser extensions to avoid
-              running into the{' '}
-              <code className="text-xs">
-                {isRemoveChildError
-                  ? `'removeChild' on 'Node'`
-                  : isInsertBeforeError
-                    ? `'insertBefore' on 'Node'`
-                    : ''}
-              </code>{' '}
-              error.{' '}
-              <span
-                className={cn(InlineLinkClassName, 'cursor-pointer')}
-                onClick={() => window.location.reload()}
-              >
-                Refresh
-              </span>{' '}
-              the browser to see if occurs again.
-            </p>
-            <Button asChild className="mt-2" type="default" icon={<ExternalLink />}>
-              <a
-                target="_blank"
-                rel="noreferrer"
-                href={
-                  isRemoveChildError
-                    ? 'https://github.com/facebook/react/issues/17256'
-                    : isInsertBeforeError
-                      ? 'https://github.com/facebook/react/issues/24865'
-                      : '/'
-                }
-              >
-                More information
-              </a>
-            </Button>
-          </Admonition>
-        ) : (
-          <Admonition type="warning" showIcon={false} title="We recommend trying the following:">
-            <ul className="list-disc pl-2 list-inside text-sm space-y-1 [&_b]:font-medium [&_b]:text-foreground">
-              <li>
-                <span
-                  className={cn(InlineLinkClassName, 'cursor-pointer')}
-                  onClick={() => window.location.reload()}
-                >
-                  Refresh
-                </span>{' '}
-                the page
-              </li>
-              <li>
-                <span
-                  className={cn(InlineLinkClassName, 'cursor-pointer')}
-                  onClick={() => router.push('/logout')}
-                >
-                  Sign out
-                </span>{' '}
-                and sign back in
-              </li>
-              <li>
-                <span
-                  className={cn(InlineLinkClassName, 'cursor-pointer')}
-                  onClick={handleClearStorage}
-                >
-                  Clear your browser storage
-                </span>{' '}
-                to clean potentially outdated data
-              </li>
-              <li>
-                Disable browser extensions that might modify page content (e.g., Google Translate)
-              </li>
-              <li>If the problem persists, please contact support for assistance</li>
-            </ul>
-          </Admonition>
-        )}
-        <div
-          className={cn(
-            'w-full mx-auto grid gap-2',
-            !isRemoveChildError && !isInsertBeforeError
-              ? 'grid-cols-2 sm:w-1/2'
-              : 'grid-cols-1 sm:w-1/4'
-          )}
-        >
-          {!isRemoveChildError && !isInsertBeforeError && (
-            <Button asChild type="default" icon={<ExternalLink />}>
-              <SupportLink
-                queryParams={{
-                  category: SupportCategories.DASHBOARD_BUG,
-                  subject: 'Client side exception occurred on dashboard',
-                  sid: sentryIssueId,
-                  message: urlMessage,
-                }}
-              >
-                Contact support
-              </SupportLink>
-            </Button>
-          )}
-
-          {/* [Joshen] For local and staging, allow us to escape the error boundary */}
-          {/* We could actually investigate how to make this available on prod, but without being able to reliably test this, I'm not keen to do it now */}
-          {process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod' ? (
-            <Button type="outline" onClick={() => resetErrorBoundary()}>
-              Return to dashboard
-            </Button>
-          ) : (
-            <Button type="outline" onClick={() => router.reload()}>
-              Reload dashboard
-            </Button>
-          )}
-
-          {(isRemoveChildError || isInsertBeforeError) && (
-            <SupportLink
-              className="text-center text-xs text-foreground-lighter hover:text-foreground-light transition"
-              queryParams={{
-                category: SupportCategories.DASHBOARD_BUG,
-                subject: 'Client side exception occurred on dashboard',
-                sid: sentryIssueId,
-                message: urlMessage,
-              }}
-            >
-              Still stuck?
-            </SupportLink>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index 04aac87207aa9..fb4ae48c14c00 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -48,7 +48,7 @@ import { StudioCommandMenu } from 'components/interfaces/App/CommandMenu'
 import { FeaturePreviewContextProvider } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import FeaturePreviewModal from 'components/interfaces/App/FeaturePreview/FeaturePreviewModal'
 import { MonacoThemeProvider } from 'components/interfaces/App/MonacoThemeProvider'
-import { GlobalErrorBoundaryState } from 'components/ui/GlobalErrorBoundaryState'
+import { GlobalErrorBoundaryState } from 'components/ui/ErrorBoundary/GlobalErrorBoundaryState'
 import { useRootQueryClient } from 'data/query-client'
 import { customFont, sourceCodePro } from 'fonts'
 import { useCustomContent } from 'hooks/custom-content/useCustomContent'
@@ -143,6 +143,7 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                     <title>{appTitle ?? 'Supabase'}</title>
                     <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                     <meta property="og:image" content={`${BASE_PATH}/img/supabase-logo.png`} />
+                    <meta name="googlebot" content="notranslate" />
                     {/* [Alaister]: This has to be an inline style tag here and not a separate component due to next/font */}
                     <style
                       dangerouslySetInnerHTML={{

From a3fc267d4a0432457e425b727d54e94879eaa415 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 23 Oct 2025 11:40:57 +0800
Subject: [PATCH 2/2] Add threshold value to persist sort by in auth users
 (#39782)

* Add threshold value to persist sort by in auth users

* Update apps/studio/components/interfaces/Auth/Users/UsersV2.tsx

Co-authored-by: Ali Waseem <waseema393@gmail.com>

* Fix local storage values getting overriden when landing on auth users page directly, and merge useEffect for loading local storage values

* Nit

* Fix

* Update warning

* Fix

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
---
 .../interfaces/Auth/Users/UsersV2.tsx         | 86 +++++++++++++++----
 packages/common/constants/local-storage.ts    |  1 +
 2 files changed, 70 insertions(+), 17 deletions(-)

diff --git a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
index cbe1a7e379bda..394a533578810 100644
--- a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
@@ -14,6 +14,7 @@ import { FilterPopover } from 'components/ui/FilterPopover'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
 import { authKeys } from 'data/auth/keys'
 import { useUserDeleteMutation } from 'data/auth/user-delete-mutation'
+import { useUsersCountQuery } from 'data/auth/users-count-query'
 import { User, useUsersInfiniteQuery } from 'data/auth/users-infinite-query'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
@@ -54,6 +55,8 @@ import { formatUserColumns, formatUsersData } from './Users.utils'
 import { UsersFooter } from './UsersFooter'
 import { UsersSearch } from './UsersSearch'
 
+const SORT_BY_VALUE_COUNT_THRESHOLD = 10_000
+
 export const UsersV2 = () => {
   const queryClient = useQueryClient()
   const { ref: projectRef } = useParams()
@@ -97,7 +100,7 @@ export const UsersV2 = () => {
     parseAsStringEnum(['all', 'verified', 'unverified', 'anonymous']).withDefault('all')
   )
   const [filterKeywords, setFilterKeywords] = useQueryState('keywords', { defaultValue: '' })
-  const [sortByValue, setSortByValue] = useQueryState('id:asc', { defaultValue: 'id:asc' })
+  const [sortByValue, setSortByValue] = useQueryState('sortBy', { defaultValue: 'id:asc' })
   const [sortColumn, sortOrder] = sortByValue.split(':')
   const [selectedColumns, setSelectedColumns] = useQueryState(
     'columns',
@@ -116,6 +119,15 @@ export const UsersV2 = () => {
       'id'
     )
 
+  const [
+    localStorageSortByValue,
+    setLocalStorageSortByValue,
+    { isSuccess: isLocalStorageSortByValueLoaded },
+  ] = useLocalStorageQuery<string>(
+    LOCAL_STORAGE_KEYS.AUTH_USERS_SORT_BY_VALUE(projectRef ?? ''),
+    'id'
+  )
+
   const [
     columnConfiguration,
     setColumnConfiguration,
@@ -134,6 +146,23 @@ export const UsersV2 = () => {
   const [isDeletingUsers, setIsDeletingUsers] = useState(false)
   const [showFreeformWarning, setShowFreeformWarning] = useState(false)
 
+  const { data: totalUsersCountData, isSuccess: isCountLoaded } = useUsersCountQuery(
+    {
+      projectRef,
+      connectionString: project?.connectionString,
+      // [Joshen] Do not change the following, these are to match the count query in UsersFooter
+      // on initial load with no search configuration so that we only fire 1 count request at the
+      // beginning. The count value is for all users - should disregard any search configuration
+      keywords: '',
+      filter: undefined,
+      providers: [],
+      forceExactCount: false,
+    },
+    { keepPreviousData: true }
+  )
+  const totalUsers = totalUsersCountData?.count ?? 0
+  const isCountWithinThresholdForSortBy = totalUsers <= SORT_BY_VALUE_COUNT_THRESHOLD
+
   const {
     data,
     error,
@@ -195,6 +224,19 @@ export const UsersV2 = () => {
     organization: selectedOrg?.slug ?? 'Unknown',
   }
 
+  const updateStorageFilter = (value: 'id' | 'email' | 'phone' | 'freeform') => {
+    setLocalStorageFilter(value)
+    setSpecificFilterColumn(value)
+    if (value !== 'freeform') {
+      updateSortByValue('id:asc')
+    }
+  }
+
+  const updateSortByValue = (value: string) => {
+    if (isCountWithinThresholdForSortBy) setLocalStorageSortByValue(value)
+    setSortByValue(value)
+  }
+
   const handleScroll = (event: UIEvent<HTMLDivElement>) => {
     const isScrollingHorizontally = xScroll.current !== event.currentTarget.scrollLeft
     xScroll.current = event.currentTarget.scrollLeft
@@ -281,7 +323,7 @@ export const UsersV2 = () => {
         config: columnConfiguration ?? [],
         users: users ?? [],
         visibleColumns: selectedColumns,
-        setSortByValue,
+        setSortByValue: updateSortByValue,
         onSelectDeleteUser: setSelectedUserToDelete,
       })
       setColumns(columns)
@@ -301,16 +343,22 @@ export const UsersV2 = () => {
     specificFilterColumn,
   ])
 
-  // [Joshen] Load URL state for filter column only once, if no filter column found in URL params
+  // [Joshen] Load URL state for filter column and sort by only once, if no respective values found in URL params
   useEffect(() => {
-    if (specificFilterColumn === 'id' && localStorageFilter !== 'id') {
-      setSpecificFilterColumn(localStorageFilter)
+    if (
+      isLocalStorageFilterLoaded &&
+      isLocalStorageSortByValueLoaded &&
+      isCountLoaded &&
+      isCountWithinThresholdForSortBy
+    ) {
+      if (specificFilterColumn === 'id' && localStorageFilter !== 'id') {
+        setSpecificFilterColumn(localStorageFilter)
+      }
+      if (sortByValue === 'id:asc' && localStorageSortByValue !== 'id:asc') {
+        setSortByValue(localStorageSortByValue)
+      }
     }
-  }, [])
-
-  useEffect(() => {
-    setLocalStorageFilter(specificFilterColumn)
-  }, [specificFilterColumn])
+  }, [isLocalStorageFilterLoaded, isLocalStorageSortByValueLoaded, isCountLoaded])
 
   return (
     <>
@@ -353,9 +401,13 @@ export const UsersV2 = () => {
                   }}
                   setSpecificFilterColumn={(value) => {
                     if (value === 'freeform') {
-                      setShowFreeformWarning(true)
+                      if (isCountWithinThresholdForSortBy) {
+                        updateStorageFilter(value)
+                      } else {
+                        setShowFreeformWarning(true)
+                      }
                     } else {
-                      setSpecificFilterColumn(value)
+                      updateStorageFilter(value)
                     }
                   }}
                 />
@@ -469,7 +521,7 @@ export const UsersV2 = () => {
                       config: updatedConfig,
                       users: users ?? [],
                       visibleColumns: value,
-                      setSortByValue,
+                      setSortByValue: updateSortByValue,
                       onSelectDeleteUser: setSelectedUserToDelete,
                     })
 
@@ -486,7 +538,7 @@ export const UsersV2 = () => {
                   sortByValue={sortByValue}
                   setSortByValue={(value) => {
                     const [sortColumn, sortOrder] = value.split(':')
-                    setSortByValue(value)
+                    updateSortByValue(value)
                     sendEvent({
                       action: 'auth_users_search_submitted',
                       properties: {
@@ -669,15 +721,15 @@ export const UsersV2 = () => {
         confirmLabel="Confirm"
         title="Confirm to search across all columns"
         onConfirm={() => {
-          setSpecificFilterColumn('freeform')
+          updateStorageFilter('freeform')
           setShowFreeformWarning(false)
         }}
         onCancel={() => setShowFreeformWarning(false)}
         alert={{
           base: { variant: 'warning' },
-          title: 'Searching across all columns is not recommended',
+          title: 'Searching across all columns is not recommended with many users',
           description:
-            'This may adversely impact your database, in particular if your project has a large number of users - use with caution.',
+            'This may adversely impact your database, in particular if your project has a large number of users - use with caution. Search mode will not be persisted across browser sessions as a safeguard.',
         }}
       >
         <p className="text-foreground-light text-sm">
diff --git a/packages/common/constants/local-storage.ts b/packages/common/constants/local-storage.ts
index 3784822e32b76..26ad2f83d50e5 100644
--- a/packages/common/constants/local-storage.ts
+++ b/packages/common/constants/local-storage.ts
@@ -28,6 +28,7 @@ export const LOCAL_STORAGE_KEYS = {
   STORAGE_PREFERENCE: (ref: string) => `storage-explorer-${ref}`,
 
   AUTH_USERS_FILTER: (ref: string) => `auth-users-filter-${ref}`,
+  AUTH_USERS_SORT_BY_VALUE: (ref: string) => `auth-users-sort-by-value-${ref}`,
   AUTH_USERS_COLUMNS_CONFIGURATION: (ref: string) => `supabase-auth-users-columns-${ref}`,
 
   SQL_EDITOR_INTELLISENSE: 'supabase_sql-editor-intellisense-enabled',