Можно ли обрабатывать ошибки клиента Apollo / express / mon goose / graphql в React? - PullRequest
Новая
       23

Можно ли обрабатывать ошибки клиента Apollo / express / mon goose / graphql в React?

0 голосов
/ 31 марта 2020

React показывает обычные ошибки разработчика даже во встроенном, и я хочу обработать, по крайней мере, некоторые из них с помощью errorboundray или аналогичного, фактические настраиваемые ошибки генерируются mon goose в моей реализации клиента apollo / express server / graphql Видимо, componentDidCatch не ловит ни одного. Я добился того, чтобы показать некоторые из них, чтобы они были понятны человеку и правильно отображались, но я не могу вырезать поведение ошибки разработчика из встроенного React, возможно ли реализовать прямой обработчик или добавить className к ошибкам, чтобы они могут быть скрыты в CSS?

Ошибки: 

Uncaught (in promise) Error: GraphQL error:

Граница ошибки: 

import React, { Component } from "react";

export class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({
      error: error,
      errorInfo: errorInfo
    });
  }

  render() {
    if (this.state.errorInfo) {
      return (
        <div>
          <h2>Something went wrong</h2>
          <details style={{ whiteSpace: "pre-wrap" }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }
    // Render children if there's no error
    return this.props.children;
  }
}

export default ErrorBoundary;

Обтекание: 

import React from "react";
import Facebook from "./Facebook";
import Invoice from "./Invoice";
import ErrorBoundary from "./ErrorBoundary";

const Login = () => {
  return (
    <div>
      <section className="header_text sub">
        <img
          className="pageBanner"
          src="themes/images/pageBanner.png"
          alt="New products"
        />
        <h4>
          <span>Sesión y Registro</span>
        </h4>
      </section>
      <section className="main-content">
        <div className="row">
          <div className="span5">
            <Facebook />
          </div>
          <ErrorBoundary>
            <Invoice />
          </ErrorBoundary>
        </div>
      </section>
    </div>
  );
};

export default Login;

Компонент: 

import React, { useState } from "react";
import { useSelector } from "react-redux";
import { useMutation } from "@apollo/react-hooks";
import { useDispatch } from "react-redux";
import { addClientMutation, getClientQuery } from "../queries/queries";
import { addClientAction } from "../actions";
import ReCAPTCHA from "react-google-recaptcha";

const Invoice = props => {
  let client = useSelector(state => state.login);

  const dispatch = useDispatch();

  const [newClient, setNewClient] = useState([]);

  const [formDisable, setFormDisable] = useState(true);

  const [addClientToDB, { error }] = useMutation(addClientMutation);

  function refreshPage() {
    window.location.reload(false);
  }

  if (error) {
    console.log("error:", error);
...
...