记一个bug

[askwuxue]

之前生产环境报错，因为是脚本测试的。所以没有准确定位到报错的页面。经过排查，有两处代码存在隐患。

错误信息

根据报错信息，定位到时URL编码报错，主要是URL中含有特殊字符。详情请参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Errors/Malformed_URI

第一处：页面跳转时，通过URL传递参数。

举个例子

点击后跳转的URL

可以看到URL含有特殊字符%，解码失败，导致报错。我们有如下代码

onClick={() => {

  onClick?.();

  history.push(

    urlJoin(

      LINK_INFORMATION_NEWS,

      // title 有可能含有特殊字符，没有进行编码。

      urlQueriesSerialize({ type, id, pushtime, title, subType }),

    ),

  );

}}

对URL中不确定的参数进行编码。

className="flex-column flex-auto"

onClick={() => {

  onClick?.();

  history.push(

    urlJoin(

      LINK_INFORMATION_NEWS,

      // 对title进行编码，在跳转后的页面对title使用decodeURIComponent()解码获得编码前参数

      urlQueriesSerialize({ type, id, pushtime, encodeURIComponent(title), subType }),

    ),

  );

}}

页面跳转时，如果通过URL传递参数，可以进行参数编码，在跳转后的页面进行参数解码。

另一种处是对decodeURIComponent(encodedURI)方法的使用。

该方法接受的参数中含有特殊字符会解码失败报错，如果无法判断参数的具体内容。
可以使用try catch 对该方法进行包裹，可以避免报错后页面空白，用户刷新无效等。