etesync/src/components/ErrorBoundary.tsx

// SPDX-FileCopyrightText: © 2017 EteSync Authors
// SPDX-License-Identifier: AGPL-3.0-only

import * as React from "react";

import { store, persistor } from "../store";
import { resetKey } from "../store/actions";

import { EncryptionPasswordError, IntegrityError } from "etesync";
import PrettyError from "../widgets/PrettyError";

interface PropsType {
  children: React.ReactNode | React.ReactNode[];
}

class ErrorBoundary extends React.Component<PropsType> {
  public state: {
    error?: Error;
  };

  constructor(props: PropsType) {
    super(props);
    this.state = { };
  }

  public componentDidCatch(error: Error, _info: any) {
    if (error instanceof EncryptionPasswordError) {
      store.dispatch(resetKey());
    } else if (error instanceof IntegrityError) {
      persistor.purge();
    }

    this.setState({ error });
  }

  public render() {
    const { error } = this.state;
    if (error) {
      if (error instanceof EncryptionPasswordError) {
        return (
          <div>
            <h2>Wrong Encryption Password</h2>
            <p>
              It looks like you've entered the wrong encryption password, please refresh the page and try again.
            </p>
          </div>
        );
      } else if (error instanceof IntegrityError) {
        return (
          <div>
            <h2>Integrity Error</h2>
            <p>
              Please log out from the menu, refresh the page and try again, and if the problem persists, contact support.
            </p>
            <pre>
              {error.message}
            </pre>
          </div>
        );
      }
    }

    if (error) {
      return (
        <div>
          <h2>Something went wrong!</h2>
          <PrettyError error={this.state.error} />
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;