feat: new error message

- clean up of translation code
Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/ErrorBoundary.jsx

@@ -1,19 +1,51 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
-class ErrorBoundary extends Component {
+import { captureException } from '@sentry/react';
+
+class ErrorBoundary extends PureComponent {
   constructor(props) {
     super(props);
-    this.state = { hasError: false };
+    this.state = {
+      error: false,
+      errorData: '',
+      showReport: true,
+    };
   }
 
   componentDidCatch(error, errorInfo) {
-    this.setState({ hasError: true });
+    this.setState({ error: true, errorData: errorInfo });
     console.error('Error boundary caught an error:', error, errorInfo);
   }
 
+  reportError() {
+    captureException(this.state.errorData);
+    this.setState({
+      showReport: false,
+    });
+  }
+
   render() {
-    if (this.state.hasError) {
-      return <div>Mue has broken horribly</div>;
+    if (this.state.error) {
+      return (
+        <div className="criticalError">
+          <div className="criticalError-message">
+            <h1>A critical error has occurred</h1>
+            <p>
+              The new tab page could not be loaded. Please uninstall the extension and try again.
+            </p>
+            <div className="criticalError-actions">
+              {this.state.showReport ? (
+                <button onClick={() => this.reportError()}>Report Issue</button>
+              ) : (
+                <p>Sent Successfully</p>
+              )}
+              <a href="https://discord.gg/zv8C9F8" target="_blank" rel="noreferrer">
+                Support Discord
+              </a>
+            </div>
+          </div>
+        </div>
+      );
     }
 
     return this.props.children;