GridJS数据加载报错：An error happened while fetching the data 求助

问题 #

测试GridJS基础功能时，页面加载、切换返回时频繁出现报错："An error happened while fetching the data"。刷新或Ctrl+F5可临时解决，但问题十分异常。想知道是否有其他用户遇到过该问题，以及可行的优化方案。

使用的代码如下：

<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
<div id="thetable"></div>
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>

<script>
new gridjs.Grid({
    columns: [
        {
            name: '',
            formatter: (cell, row) => {
                return gridjs.html(
                    `<button class="btn btn-sm btn-outline-primary" onclick="location.href='/work/work_id/${row.cells[0].data}'"><span class="material-symbols-outlined">Edit</span></button>`
                );
            },
            sort: false
        },
        { 
            name: 'work_id',
            hidden: true
        },  
        "Client", "Matter", "Date", "Initials", "Task Performed", "Time", "Rate"
    ],
    search: true,
    sort: true,
    pagination: {
        limit: 5
    },

    data: () => [
        [null, "13", "ABC Corp", "Bankruptcy", "02/05/2023", "BAL", "Review financial documents", "2.5", "$300"],
        [null, "12", "123 LLC", "Trademark", "02/07/2023", "SPM", "Research trademark availability", "1.3", "$150"],
        [null, "14", "ABC Corp", "Bankruptcy", "02/10/2023", "BAL", "Prepare for client meeting", "1.8", "$300"],
        [null, "59", "XYZ Inc", "Employment", "02/13/2023", "SPM", "Review case documents", "2.2", "$250"],
        [null, "31", "123 LLC", "Trademark", "02/17/2023", "BAL", "Draft trademark application", ".9", "$150"],
        [null, "44", "ABC Corp", "Bankruptcy", "02/20/2023", "BAL", "Client meeting", "1.5", "$300"],
        [null, "74", "XYZ Inc", "Employment", "02/24/2023", "SPM", "Phone call with client", ".8", "$250"], 
        [null, "45", "123 LLC", "Trademark", "02/27/2023", "BAL", "Revise trademark application", ".7", "$150"],
        [null, "55", "ABC Corp", "Bankruptcy", "03/01/2023", "SPM", "Draft legal brief", "2.3", "$300"],
        [null, "23", "XYZ Inc", "Employment", "03/05/2023", "BAL", "Contract review", "1.1", "$250"]
    ]
    
}).render(document.getElementById("thetable"));
</script>

已查阅GridJS所有配置选项，未找到可解决该问题的设置。

解决方案 #

不少用户反馈过类似问题，主要和GridJS对数据加载的判断、DOM初始化时机有关，以下是几个可行的优化方案：

1. 静态数据直接传入数组，而非函数式返回 #

你当前用data: () => []的函数式写法，GridJS会默认按异步数据处理，在某些页面状态（如浏览器后退缓存）下，可能触发错误判断。直接传入静态数组即可避免：

data: [
    [null, "13", "ABC Corp", "Bankruptcy", "02/05/2023", "BAL", "Review financial documents", "2.5", "$300"],
    // ... 其他数据行
]

2. 确保DOM完全加载后再初始化Grid #

如果脚本执行时#thetable元素还未渲染完成，会导致Grid初始化异常。把初始化代码包裹在DOM加载完成事件中：

document.addEventListener('DOMContentLoaded', function() {
    new gridjs.Grid({
        // 原有配置项不变
    }).render(document.getElementById("thetable"));
});

3. 处理页面切换时的实例冲突（SPA/浏览器后退场景） #

如果是在单页应用或依赖浏览器后退缓存的场景下，可能出现Grid实例重复初始化的问题。可以在初始化前先销毁已有实例：

// 全局保存Grid实例
let gridInstance;

document.addEventListener('DOMContentLoaded', function() {
    // 销毁已有实例
    if (gridInstance) {
        gridInstance.destroy();
    }
    // 创建新实例
    gridInstance = new gridjs.Grid({
        // 原有配置项不变
    }).render(document.getElementById("thetable"));
});

4. 捕获错误并定位具体原因 #

添加错误监听事件，打印详细错误信息，帮助排查深层问题：

new gridjs.Grid({
    // 其他配置项
    onError: (error) => {
        console.error('GridJS加载错误:', error);
    }
}).render(document.getElementById("thetable"));

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