index.tsx37 lines · main

1	'use client'
2
3	import dynamic from 'next/dynamic.js'
4	import { ErrorBoundary, FallbackProps } from 'react-error-boundary'
5
6	import { Admonition } from '../admonition'
7	import { SqlToRestProps } from './sql-to-rest'
8
9	function FallbackComponent({ error }: FallbackProps) {
10	if (error instanceof Error && error.message === 'WebAssembly is not defined') {
11	return (
12	<Admonition type="danger" title="WebAssembly is not supported in this browser">
13	<p>
14	The translator requires WebAssembly to run. Your browser might be outdated or it might
15	have a policy that disables WebAssembly.
16	</p>
17	</Admonition>
18	)
19	}
20
21	return (
22	<Admonition type="danger" title="Something went wrong">
23	<pre>{error instanceof Error ? error.message : JSON.stringify(error)}</pre>
24	</Admonition>
25	)
26	}
27
28	// Lazy load client side to prevent hydration issues when browser produces an error
29	const SqlToRest = dynamic(() => import('./sql-to-rest'), { ssr: false })
30
31	export default function SqlToRestWithFallback(props: SqlToRestProps) {
32	return (
33	<ErrorBoundary FallbackComponent={FallbackComponent}>
34	<SqlToRest {...props} />
35	</ErrorBoundary>
36	)
37	}