mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +03:00
Danny WhiteandJoshen Lim
78dc739901
## Problem AlertError forces a vertical layout whenever additional actions are supplied, even when the caller explicitly requests horizontal or responsive layout. Stripe Sync Engine's uninstall error is one affected call site, the other was Pipelines as demoed in #51311. ## Solution Honour an explicit layout. Preserve the existing defaults: vertical with additional actions, responsive otherwise. Replace the standalone Contact support action with an InlineLink in the contact support prose, preserving support form context and breadcrumb capture. Keep custom actions such as Retry. If instructions are hidden or custom prose omits contact support, retain a separate inline support link. With `hideContactSupport`, show no support link and shorten the default instructions to “Try refreshing your browser.” Custom descriptions remain unchanged. The local Pipelines configuration error explicitly hides support. Add the explicit responsive layout at the Pipelines call site. | Before | After | | --- | --- | | <img width="914" height="426" alt="CleanShot 2026-10-07 at 17 51 20@2x" src="https://github.com/user-attachments/assets/6cbddfee-97f5-4a7a-bafa-7b5dfd6ab8bf" /> | <img width="916" height="422" alt="CleanShot 2026-10-07 at 18 26 06@2x" src="https://github.com/user-attachments/assets/a21952a6-1c1a-437c-af73-c5736f33fd98" /> | | <img width="1566" height="384" alt="CleanShot 2026-10-07 at 18 28 07@2x" src="https://github.com/user-attachments/assets/bdc2a043-421f-4c22-9bd3-37859c6e85c7" /> | <img width="1568" height="308" alt="CleanShot 2026-10-07 at 18 26 58@2x" src="https://github.com/user-attachments/assets/da0f2c6a-6254-4196-944b-5665e87b3c3c" /> | ## Review instructions 1. In a fresh local test project with no existing `stripe` schema, run this in SQL Editor: ```sql begin; create schema stripe; comment on schema stripe is '{"status":"uninstall error","errorMessage":"Local layout test: uninstallation failed"}'; commit; ``` 2. Open **Integrations → Stripe Sync Engine → Overview** and reload. Check **Failed to uninstall Stripe Sync Engine** at wide and narrow widths, including **Retry uninstallation** and the inline **contact support** link. Do not click Retry: it invokes the real uninstall operation. 3. Remove the empty fixture with `drop schema stripe restrict;`. 4. Block the Pipelines source-status request and resize the page: Retry uses the responsive layout. 5. AlertError callers without an explicit layout should retain their existing presentation. Confirm default and custom contact support prose use an inline link, with no standalone support action. Hidden instructions and custom prose without contact support retain an inline fallback. With `hideContactSupport`, the default prose is “Try refreshing your browser.” and no support link appears; custom descriptions remain unchanged. 6. Automated regression coverage checks that an explicit responsive layout survives additional actions, and that hiding support removes the default support wording while preserving custom descriptions. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import { SupportCategories } from '@supabase/shared-types/out/constants'
|
|
import { Blocks, ExternalLink } from 'lucide-react'
|
|
import { useRouter } from 'next/router'
|
|
import { Button } from 'ui'
|
|
|
|
import { SupportLink } from '@/components/interfaces/Support/SupportLink'
|
|
import { detectBrowser } from '@/lib/helpers'
|
|
|
|
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 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 variant="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,
|
|
errorMessage: urlMessage,
|
|
}}
|
|
>
|
|
Still stuck?
|
|
</SupportLink>
|
|
</>
|
|
)
|
|
}
|