TypeError: je.filter不是函数排查：预期数组却获字符串格式数据

我们在调用.filter()的代码行触发了TypeError: je.filter is not a function错误，Sentry中je对应的变量playerAggPbpStatsNoPctiles本应始终是数组类型，却出现了非数组的异常情况。

相关代码片段 #

PlayerStats.js #

// fetch data, filter fetched data
const fetchConfig = { ep: 'player-agg-pbp-stats', cfg: { competitionId, teamId } }
const { data: playerAggPbpStatsNoPctiles = [], isLoading: isLoading1, isError: isError1 } = useCBBQuery(fetchConfig);
const playerAggPbpStats = playerAggPbpStatsNoPctiles.filter(row => filterForScope({ row, scope }));

useCBBQuery.js #

// wrapper around useQuery for fetching data from our API
const useCBBQuery = ({ ep, routeKey = 'gs', cfg = {}, optionsConfig = {}, refetchKey = 0 }) => {
    // ep:              endpoint
    // routeKey:        the base part of the URL for the route, one of [gs, gsl, users, email, stripe]
    // cfg:             parameters config
    // optionsConfig:   react-query options config
    // refetchKey:      integer that we increment to trigger refetching, add to queryKey array

    // create queryKey, return useQuery using fetchData
    const cfgString = JSON.stringify(cfg);
    const queryKey = [ep, cfgString, refetchKey];
    const isDisabled = cfg && cfg.pass === true;

    // create fetch URL
    let fetchUrl = createUrl(ep, cfg, routeKey);

    // call useQuery
    const query = useQuery({
        queryKey,
        queryFn: () => fetchData({ fetchUrl }),
        refetchOnWindowFocus: false,
        enabled: !isDisabled,
        ...optionsConfig
    });

    return {
        ...query,
        isLoading: query.isLoading && query.fetchStatus !== 'idle'
    };
};

已排查信息 #

• 我们在解构playerAggPbpStatsNoPctiles时设置了空数组[]作为默认回退值
• 接口文档定义该接口始终返回数组，且99.9%的请求都正常返回数组
• 新增Sentry日志监控后发现，报错时该变量的类型是字符串，但内容外观和数组类似

Sentry监控代码 #

export function sentryIsArray({ arr, page, name }) {
    // array:       variable that should be an array
    if (!Array.isArray(arr)) {
        const error = new Error('Input is not an array');
        Sentry.captureException(error, {
            extra: {
                info: `${page} expected an array for ${name}`,
                receivedType: typeof arr,
                receivedValue: arr
            }
        });

        console.error('Expected an array, received:', arr);
    }
}

疑问 #

• 为什么playerAggPbpStatsNoPctiles会被识别为字符串类型？
• 排查过程中可能忽略了哪些点？
• 该采取哪些进一步的排查手段？

内容的提问来源于stack exchange，提问作者Canovice