konnosDashboard
InsertBeforeRemoveChildErrorHandler.tsx89 lines · main
1import { SupportCategories } from '@supabase/shared-types/out/constants'
2import { Blocks, ExternalLink } from 'lucide-react'
3import { useRouter } from 'next/router'
4import { Button } from 'ui'
5
6import { SupportLink } from '@/components/interfaces/Support/SupportLink'
7import { detectBrowser } from '@/lib/helpers'
8
9interface InsertBeforeRemoveChildErrorHandlerProps {
10 message: string
11 sentryIssueId: string
12 urlMessage: string
13 isRemoveChildError: boolean
14 isInsertBeforeError?: boolean
15}
16
17export const InsertBeforeRemoveChildErrorHandler = ({
18 message,
19 sentryIssueId,
20 urlMessage,
21 isRemoveChildError,
22 isInsertBeforeError,
23}: InsertBeforeRemoveChildErrorHandlerProps) => {
24 const router = useRouter()
25 const browser = detectBrowser()
26
27 return (
28 <>
29 <div className="flex flex-col gap-y-4 text-left py-2 w-full">
30 <div className="flex items-center gap-x-3">
31 <p className="text-lg font-bold">Sorry! A browser extension may have caused an error.</p>
32 <Blocks className="text-foreground-lighter" />
33 </div>
34
35 <div className="flex flex-col gap-y-2">
36 <p className="text-sm text-foreground-light">
37 Browser translation tools (like Chrome's built-in Translate) or some third-party browser
38 extensions are known to cause errors when using the Briven Dashboard.
39 </p>
40
41 <p className="text-sm text-foreground-light">
42 We highly recommend{' '}
43 <span className="text-foreground">
44 {browser === 'Chrome'
45 ? 'disabling Chrome Translate or certain browser extensions'
46 : 'avoiding the use of browser translation tools or disabling certain extensions'}
47 </span>{' '}
48 while using the Briven Dashboard to avoid running into this error. Try to refresh the
49 browser to see if it occurs again.
50 </p>
51 </div>
52
53 <p className="text-foreground-lighter text-sm">Error: {message}</p>
54 </div>
55
56 <div className="flex gap-x-2 justify-center items-center">
57 <Button asChild type="default" icon={<ExternalLink />}>
58 <a
59 target="_blank"
60 rel="noreferrer"
61 href={
62 isRemoveChildError
63 ? 'https://github.com/facebook/react/issues/17256'
64 : isInsertBeforeError
65 ? 'https://github.com/facebook/react/issues/24865'
66 : '/'
67 }
68 >
69 More information
70 </a>
71 </Button>
72 <Button type="outline" onClick={() => router.reload()}>
73 Refresh page
74 </Button>
75 </div>
76 <SupportLink
77 className="text-center text-xs text-foreground-lighter hover:text-foreground-light transition"
78 queryParams={{
79 category: SupportCategories.DASHBOARD_BUG,
80 subject: `Client error: Failed to execute '${isRemoveChildError ? 'removeChild' : 'insertBefore'}' on 'Node'`,
81 sid: sentryIssueId,
82 error: urlMessage,
83 }}
84 >
85 Still stuck?
86 </SupportLink>
87 </>
88 )
89}