ErrorMatcher.tsx51 lines · main

1	'use client'
2
3	import { ErrorDisplay, SupportFormParams } from 'ui-patterns/ErrorDisplay/ErrorDisplay'
4
5	import { getMappingForError } from './ErrorMatcher.utils'
6	import { useTrack } from '@/lib/telemetry/track'
7
8	interface ErrorMatcherProps {
9	title: string
10	error: string | { message: string }
11	supportFormParams?: SupportFormParams
12	className?: string
13	}
14
15	export function ErrorMatcher({ title, error, supportFormParams, className }: ErrorMatcherProps) {
16	const track = useTrack()
17
18	const message = typeof error === 'string' ? error : error.message
19	const mapping = getMappingForError(error)
20	const Troubleshooting = mapping?.Troubleshooting
21
22	return (
23	<ErrorDisplay
24	title={title}
25	errorMessage={message}
26	supportFormParams={supportFormParams}
27	className={className}
28	onRender={() => {
29	track('dashboard_error_created', {
30	source: 'error_display',
31	errorType: mapping?.id,
32	hasTroubleshooting: !!mapping,
33	})
34	if (mapping) {
35	track('inline_error_troubleshooter_exposed', { errorType: mapping.id })
36	}
37	}}
38	onSupportClick={
39	mapping
40	? () =>
41	track('inline_error_troubleshooter_action_clicked', {
42	errorType: mapping.id,
43	ctaType: 'contact_support',
44	})
45	: undefined
46	}
47	>
48	{Troubleshooting && <Troubleshooting />}
49	</ErrorDisplay>
50	)
51	}