8000 fix(studio): Handle query timeout error (#34865) · CodersSampling/supabase@4a3baa6 · GitHub 8000
[go: up one dir, main page]
Skip to content

Commit 4a3baa6

Browse files
avalletejoshenlim
avallete
and
joshenlim
authored
fix(studio): Handle query timeout error (supabase#34865)
* fix(studio): Handle query timeout error There is a global timeout of about 50s on /query endpoint This would fail the request independently from the user statement timeout setting add a case to handle this error and add a CTA to suggest the user of direct connection for long running queries * chore: apply pr comments * Tiny refactor --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
1 parent 8b55ffe commit 4a3baa6

File tree

2 files changed

+31
-30
lines changed

2 files changed

+31
-30
lines changed

‎apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { ExternalLink, Loader2 } from 'lucide-react'
2-
import Link from 'next/link'
2+
import { parseAsBoolean, useQueryState } from 'nuqs'
33
import { forwardRef } from 'react'
44

55
import { useParams } from 'common'
66
import { subscriptionHasHipaaAddon } from 'components/interfaces/Billing/Subscription/Subscription.utils'
77
import CopyButton from 'components/ui/CopyButton'
8+
import { InlineLink, InlineLinkClassName } from 'components/ui/InlineLink'
89
import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
910
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
1011
import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
1112
import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
12-
import { AiIconAnimation, Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
13+
import { AiIconAnimation, Button, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
1314
import Results from './Results'
1415

1516
export type UtilityTabResultsProps = {
@@ -21,11 +22,12 @@ export type UtilityTabResultsProps = {
2122
}
2223

2324
const UtilityTabResults = forwardRef<HTMLDivElement, UtilityTabResultsProps>(
24-
({ id, isExecuting, isDisabled, isDebugging, onDebug }, htmlRef) => {
25+
({ id, isExecuting, isDisabled, isDebugging, onDebug }) => {
2526
const { ref } = useParams()
2627
const state = useDatabaseSelectorStateSnapshot()
2728
const organization = useSelectedOrganization()
2829
const snapV2 = useSqlEditorV2StateSnapshot()
30+
const [, setShowConnect] = useQueryState('showConnect', parseAsBoolean.withDefault(false))
2931

3032
const result = snapV2.results[id]?.[0]
3133
const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug })
@@ -35,7 +37,9 @@ const UtilityTabResults = forwardRef<HTMLDivElement, UtilityTabResultsProps>(
3537

3638
const isTimeout =
3739
result?.error?.message?.includes('canceling statement due to statement timeout') ||
38-
result?.error?.message?.includes('upstream request timeout')
40+
result?.error?.message?.includes('upstream request timeout') ||
41+
result?.error?.message?.includes('Query read timeout')
42+
3943
const isNetWorkError = result?.error?.message?.includes('EHOSTUNREACH')
4044

4145
if (isExecuting) {
@@ -61,26 +65,25 @@ const UtilityTabResults = forwardRef<HTMLDivElement, UtilityTabResultsProps>(
6165
<div className="flex flex-row justify-between items-start py-4 px-6 gap-x-4">
6266
{isTimeout ? (
6367
<div className="flex flex-col gap-y-1">
64-
<p className="font-mono text-sm">SQL query ran into an upstream timeout</p>
65-
<p className="font-mono text-sm text-foreground-light">
68+
<p className="font-mono text-sm tracking-tight">
69+
Error: SQL query ran into an upstream timeout
70+
</p>
71+
<p className="text-sm text-foreground-light">
6672
You can either{' '}
67-
<a
68-
target="_blank"
69-
rel="noreferrer"
70-
className="underline transition hover:text-foreground"
71-
href="https://supabase.com/docs/guides/platform/performance#examining-query-performance"
72-
>
73+
<InlineLink href="https://supabase.com/docs/guides/platform/performance#examining-query-performance">
7374
optimize your query
74-
</a>
75+
</InlineLink>
7576
, or{' '}
76-
<a
77-
target="_blank"
78-
rel="noreferrer"
79-
className="underline transition hover:text-foreground"
80-
href="https://supabase.com/docs/guides/database/timeouts"
81-
>
77+
<InlineLink href="https://supabase.com/docs/guides/database/timeouts">
8278
increase the statement timeout
83-
</a>
79+
</InlineLink>
80+
{' or '}
81+
<span
82+
className={cn(InlineLinkClassName, 'cursor-pointer')}
83+
onClick={() => setShowConnect(true)}
84+
>
85+
connect to your database directly
86+
</span>
8487
.
8588
</p>
8689
</div>
@@ -110,15 +113,13 @@ const UtilityTabResults = forwardRef<HTMLDivElement, UtilityTabResultsProps>(
110113
{payloadTooLargeError && (
111114
<p className="text-sm text-foreground-light flex items-center gap-x-1">
112115
Run this query by{' '}
113-
<Link
114-
target="_blank"
115-
rel="noreferrer"
116-
href={`/project/${ref}/settings/database`}
117-
className="underline transition hover:text-foreground flex items-center gap-x-1"
116+
<span
117+
onClick={() => setShowConnect(true)}
118+
className={cn(InlineLinkClassName, 'flex items-center gap-x-1')}
118119
>
119120
connecting to your database directly
120121
<ExternalLink size={12} />
121-
</Link>
122+
</span>
122123
.
123124
</p>
124125
)}

‎apps/studio/components/ui/InlineLink.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@ interface InlineLinkProps {
99
rel?: string
1010
}
1111

12+
export const InlineLinkClassName =
13+
'underline transition underline-offset-2 decoration-foreground-lighter hover:decoration-foreground text-foreground'
14+
1215
export const InlineLink = ({
1316
href,
1417
className: _className,
1518
children,
1619
...props
1720
}: PropsWithChildren<InlineLinkProps>) => {
18-
const className = cn(
19-
'underline transition underline-offset-2 decoration-foreground-lighter hover:decoration-foreground text-foreground',
20-
_className
21-
)
21+
const className = cn(InlineLinkClassName, _className)
2222
if (href.startsWith('http')) {
2323
return (
2424
<a className={className} href={href} target="_blank" rel="noreferrer noopener" {...props}>

0 commit comments

Comments
 (0)
0