New: Project Aphrodite

frontend/src/Components/Error/ErrorBoundary.js

@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import * as sentry from '@sentry/browser';
+
+class ErrorBoundary extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      error: null,
+      info: null
+    };
+  }
+
+  componentDidCatch(error, info) {
+    this.setState({
+      error,
+      info
+    });
+
+    sentry.captureException(error);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      children,
+      errorComponent: ErrorComponent,
+      ...otherProps
+    } = this.props;
+
+    const {
+      error,
+      info
+    } = this.state;
+
+    if (error) {
+      return (
+        <ErrorComponent
+          error={error}
+          info={info}
+          {...otherProps}
+        />
+      );
+    }
+
+    return children;
+  }
+}
+
+ErrorBoundary.propTypes = {
+  children: PropTypes.node.isRequired,
+  errorComponent: PropTypes.func.isRequired
+};
+
+export default ErrorBoundary;

frontend/src/Components/Error/ErrorBoundaryError.css

@@ -0,0 +1,38 @@
+.container {
+  text-align: center;
+}
+
+.message {
+  margin: 50px 0;
+  text-align: center;
+  font-weight: 300;
+  font-size: 36px;
+}
+
+.imageContainer {
+  display: flex;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.image {
+  height: 350px;
+}
+
+.details {
+  margin: 20px;
+  text-align: left;
+  white-space: pre-wrap;
+}
+
+@media only screen and (max-width: $breakpointMedium) {
+  .image {
+    height: 250px;
+  }
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .image {
+    height: 150px;
+  }
+}

frontend/src/Components/Error/ErrorBoundaryError.js

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './ErrorBoundaryError.css';
+
+function ErrorBoundaryError(props) {
+  const {
+    className,
+    messageClassName,
+    detailsClassName,
+    message,
+    error,
+    info
+  } = props;
+
+  return (
+    <div className={className}>
+      <div className={messageClassName}>
+        {message}
+      </div>
+
+      <div className={styles.imageContainer}>
+        <img
+          className={styles.image}
+          src={`${window.Radarr.urlBase}/Content/Images/error.png`}
+        />
+      </div>
+
+      <details className={detailsClassName}>
+        {
+          error &&
+            <div>
+              {error.toString()}
+            </div>
+        }
+
+        <div className={styles.info}>
+          {info.componentStack}
+        </div>
+      </details>
+    </div>
+  );
+}
+
+ErrorBoundaryError.propTypes = {
+  className: PropTypes.string.isRequired,
+  messageClassName: PropTypes.string.isRequired,
+  detailsClassName: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  error: PropTypes.object.isRequired,
+  info: PropTypes.object.isRequired
+};
+
+ErrorBoundaryError.defaultProps = {
+  className: styles.container,
+  messageClassName: styles.message,
+  detailsClassName: styles.details,
+  message: 'There was an error loading this content'
+};
+
+export default ErrorBoundaryError;