All files / app error.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'; // Error boundaries must be Client Components
 
import { useEffect } from 'react';
import Button from 'react-bootstrap/Button';
 
import CofrnLayout from '@/components/layout';
import { AddErrorApi } from '@/types/api/errors';
import { typeFetch } from '@/utils/frontend/typeFetch';
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    typeFetch<AddErrorApi>({
      path: '/api/v2/errors/',
      method: 'POST',
      body: {
        url: window.location.href,
        message: error.message,
        trace: error.stack || 'No Stack',
      },
    })
      .catch(e => console.error(e));
    console.error(error);
  }, [ error, ]);
 
  return (
    <CofrnLayout
      pageConfig={{
        title: 'Send To William',
        requireAuth: false,
        requireAdmin: false,
        hasAudio: false,
        centerAll: true,
        fluid: true,
        containerClass: 'container-md',
      }}
    >
      <div>
        <h2>Screenshot this page and send it to William</h2>
        <h3><b>{ error.message }</b></h3>
        <Button
          variant='warning'
          onClick={() => reset()}
        >Try Again</Button>
      </div>
    </CofrnLayout>
  );
}