ResourcesExceededErrorRenderer.tsx60 lines · main

1	import { useState } from 'react'
2	import {
3	Accordion,
4	AccordionContent,
5	AccordionItem,
6	AccordionTrigger,
7	copyToClipboard,
8	InputGroup,
9	InputGroupAddon,
10	InputGroupButton,
11	InputGroupTextarea,
12	} from 'ui'
13
14	import { ErrorRendererProps } from './DefaultErrorRenderer'
15
16	const ResourcesExceededErrorRenderer: React.FC<ErrorRendererProps> = ({ error, isCustomQuery }) => {
17	const errorAsJson = JSON.stringify(error, null, 2)
18	const [copied, setCopied] = useState(false)
19	return (
20	<div className="flex flex-col gap-2 text-foreground-light">
21	<div className="flex flex-col gap-1 text-sm">
22	<p>This query requires too much memory to be executed.</p>
23	<p>
24	{isCustomQuery
25	? 'Avoid selecting entire objects and instead select specific keys using dot notation.'
26	: 'Avoid querying across a large datetime range.'}
27	</p>
28	{!isCustomQuery && <p>Please contact support if this error persists.</p>}
29	</div>
30	<Accordion className="text-sm" type="single">
31	<AccordionItem value="1">
32	<AccordionTrigger>Full error message</AccordionTrigger>
33	<AccordionContent>
34	<InputGroup>
35	<InputGroupTextarea value={errorAsJson} className="font-mono" rows={5} />
36	<InputGroupAddon align="block-end">
37	<InputGroupButton
38	size="tiny"
39	type="default"
40	className="ml-auto"
41	onClick={() => {
42	copyToClipboard(errorAsJson)
43	setCopied(true)
44	setTimeout(() => {
45	setCopied(false)
46	}, 3000)
47	}}
48	>
49	{copied ? 'Copied' : 'Copy'}
50	</InputGroupButton>
51	</InputGroupAddon>
52	</InputGroup>
53	</AccordionContent>
54	</AccordionItem>
55	</Accordion>
56	</div>
57	)
58	}
59
60	export default ResourcesExceededErrorRenderer