[BUG] 使用Safari 13浏览器访问时接口报错的调试过程

[HiKarry]

之前我在Safari 13浏览器使用waline时发现获取评论列表的接口出错了，访问了：

http://localhost:9000/undefined/comment?path=undefined&pageSize=undefined&page=1

最近我在本地运行了waline，大概找到了bug产生的原因，下面说一下查找bug的过程以供参考。

首先在js代码里搜索关键字comment，找到了请求评论列表的代码，可以发现传进来的变量基本为undefined：

在代码调用堆栈往回找，发现有些变量是通过...config.value传进来的：

在控制台打印一下结果，发现使用...操作符得到的是空字典：

> config.value
Proxy {el: "#waline", serverURL: "http://localhost:9090", path: "/", lang: "zh-CN", locale: Object, …}

> {...config.value}
{}

而在Chrome浏览器打印结果，得到的字典是有值的：

> config.value
Proxy {el: '#waline', serverURL: 'http://localhost:9090', path: '/', lang: 'zh-CN', locale: {…}, …}

> {...config.value}
{el: '#waline', serverURL: 'http://localhost:9090', path: '/', lang: 'zh-CN', locale: Proxy, …}

猜想Safari浏览器使用...语法会有问题，但是测试了以下语句又是正常的：

> var object = new Object();
  object.path = "xxx";
  console.log({...object});
{path: "xxx"}

所以，问题很可能出在config.value身上，config.value的类型是Proxy，在网上搜了一下发现是Vue的类，猜想对这个类进行...操作可能有问题。

而在调试的过程中，我发现config还有一个_rawValue的属性，应该是value的原始数据：

打印一下结果，发现字典有值了：

> {...config._rawValue}
{el: "#waline", serverURL: "http://localhost:9090", path: "/", lang: "zh-CN", locale: Proxy, …}

然后我修改了一下Waline.vue文件里这个方法：

      fetchCommentList({
        ...config._rawValue,
        page: pageNumber,
        signal,
      })

刷新网页后，请求评论的接口正常了：

http://localhost:9090/comment?path=%2F&pageSize=10&page=1

在Chrome试了一下也是OK的。

但是我没学过Vue，所以不知道这样修改会不会有问题，还是有更好的修改方法？

[Mister-Hope]

这。。。。怎么兼容啥的再说，但本质上我觉得这应该属于safari的bug。Proxy可以使用spread运算符，正常执行get逻辑取值。

不过这个调试要给大大的赞👍！

[HiKarry]

我测试了一下，Object.assign可以获取到值：

> Object.assign({}, config.value)
{el: "#waline", serverURL: "http://localhost:9090", path: "/", lang: "zh-CN", locale: Proxy, …}

代码这样改可以正常请求数据：

      fetchCommentList({
        ...Object.assign({}, config.value),
        page: pageNumber,
        signal,
      })

搜了一下代码，用到...操作符的代码有这么多，不过不知道哪些是Proxy类型的：

src/composables/config.ts
24:    options = { ...options, ...newOptions };

src/Waline.vue
101:        ...Object.assign({}, config.value),
108:          data.value.push(...resp.data);

src/utils/emoji.ts
52:        ...emojiInfo,

src/utils/config.ts
73:  ...more
93:      ...$locale,
94:      ...(typeof locale === 'object' ? locale : {}),
122:    ...more,

src/components/CommentBox.vue
533:        setUserInfo({ ...userInfo.value, ...data });

[Mister-Hope]

好的感谢，回头我更正一下

[Mister-Hope]

A little bit busy these days, but I will try to fix this tonight.

[HiKarry]

Thanks.

[Mister-Hope]

A PR is created, but I can not test if it's working. ( It should work though)