All files / Rindu/components/ErrorBoundary ErrorBoundary.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
56
57
58
59
60
61
19x
 
19x
 
19x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { Component, ErrorInfo, ReactNode } from "react";
 
import ErrorLayout, { ErrorTranslations } from "layouts/ErrorLayout";
 
const translations: ErrorTranslations = {
  es: {
    title: "😫 Error del cliente",
    description: "¡Perdimos el compás! Algo salió mal de nuestro lado.",
    description2: "¿Qué tal si empezamos de nuevo?",
    button: "Volver al inicio",
  },
  en: {
    title: "😫 Client Error",
    description: "Whoops! We lost our rhythm. Something's off.",
    description2: "Let's rewind and try again!",
    button: "Back to home",
  },
};
 
interface ErrorBoundaryProps {
  children: ReactNode;
}
 
interface ErrorBoundaryState {
  hasError: boolean;
}
 
export default class ErrorBoundary extends Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = {
      hasError: false,
    };
  }
 
  static getDerivedStateFromError(): ErrorBoundaryState {
    return { hasError: true };
  }
 
  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.error("ErrorBoundary caught an error", error, errorInfo);
  }
 
  render(): ReactNode {
    Iif (this.state.hasError) {
      return (
        <ErrorLayout
          errorTranslations={translations}
          playlistId="37i9dQZF1DXcBWIGoYBM5M"
          exDescription="Client Error"
        />
      );
    }
 
    return this.props.children;
  }
}