Как обработать ошибку сервера в React-admin?

Question

Я использую GraphQL-Yoga в качестве бэкэнда.
Формат возвращаемых ошибок не соответствует документации.Но мне нужен их перевод.Есть ли в React -admin место, где я мог бы перехватить все ошибки с сервера и сделать их, как ожидается компонентом Notification?

Error:{
    extraInfo: undefined
    graphQLErrors: {
        locations: [{ column: 3, line: 2 }]
        message: "User with such login does not exist."
        path: ["login"]
    }
    message: "GraphQL error: User with such login does not exist."
    networkError: null
    stack: "Error: GraphQL error: User with such login does not exist.↵    at new ApolloError (http://localhost:3000/static/js/1.chunk.js:39388:24)↵    at Object.next (http://localhost:3000/static/js/1.chunk.js:38008:21)↵    at notifySubscription (http://localhost:3000/static/js/1.chunk.js:270732:18)↵    at onNotify (http://localhost:3000/static/js/1.chunk.js:270776:3)↵    at SubscriptionObserver.next (http://localhost:3000/static/js/1.chunk.js:270828:7)↵    at Object.next (http://localhost:3000/static/js/1.chunk.js:47919:22)↵    at notifySubscription (http://localhost:3000/static/js/1.chunk.js:270732:18)↵    at onNotify (http://localhost:3000/static/js/1.chunk.js:270776:3)↵    at SubscriptionObserver.next (http://localhost:3000/static/js/1.chunk.js:270828:7)↵    at http://localhost:3000/static/js/1.chunk.js:48354:18"
}

Answer 1

Я столкнулся с той же проблемой с обратной связью, поскольку она отправляет ошибку внутри объекта ошибки, а не непосредственно в атрибуте сообщения ответа. Я сделал следующее:

Создайте свой собственный httpClient, как в документации по настройке токена авторизации.

const httpClient = (url, options = {}) => {
    // ...
    return fetchUtils.fetchJson(url, options);
}
const dataProvider = jsonServerProvider('http://localhost:3000/api', httpClient);

В вашем админ-компоненте:

<Admin dataProvider={dataProvider}>

Затем вам нужно создать собственную реализацию fetchJson:

import { HttpError } from 'react-admin';

const fetchJson = async (url, options = {}) => {
    const requestHeaders = (options.headers ||
        new Headers({
            Accept: 'application/json',
        })
    );
    if (!requestHeaders.has('Content-Type') &&
        !(options && options.body && options.body instanceof FormData)) {
        requestHeaders.set('Content-Type', 'application/json');
    }
    if (options.user && options.user.authenticated && options.user.token) {
        requestHeaders.set('Authorization', options.user.token);
    }
    const response = await fetch(url, { ...options, headers: requestHeaders })
    const text = await response.text()
    const o = {
        status: response.status,
        statusText: response.statusText,
        headers: response.headers,
        body: text,
    };
    let status = o.status, statusText = o.statusText, headers = o.headers, body = o.body;
    let json;
    try {
        json = JSON.parse(body);
    } catch (e) {
        // not json, no big deal
    }
    if (status < 200 || status >= 300) {
        return Promise.reject(new HttpError((json && json.error && json.error.message) || statusText, status, json));
    }
    return Promise.resolve({ status: status, headers: headers, body: body, json: json });
};

На самом деле это просто копия fetchUtils.fetchJson, но обратите внимание:

return Promise.reject(new HttpError((json && json.error && json.error.message) || statusText, status, json));

Здесь вы должны установить сообщение об ошибке из ответа json.

Наконец, вам просто нужно изменить fetchUtils.fetchJson на ваш метод fetchJson:

const httpClient = (url, options = {}) => {
    // ...
    return fetchJson(url, options); // <--- change this line
}