如何处理 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
}