如何在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

我遇到了与loopback相同的问题，因为它将错误发送到错误对象中而不是直接发送到响应的message属性中。我做的是以下内容：

创建自己的httpClient，就像设置auth令牌的文档一样。

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
}