0

使用 webpack 的 Terser 插件缩小我的 JavaScript 应用程序后，此 catch 函数无法在浏览器中正确运行

        .catch((error)=> {
            vm.loginError = true;
            vm.loading = false;

            if (!error || !error.error){return};

            if (error.error.indexOf('user exists')) {
                <!-- expecting this line to run when error.error contains "user exists" but this line is never executed -->
                vm.emailTakenError = true;
            } else {
                vm.serverGeneralError = true;
            }
        });

在此示例中，后端发送一个错误对象，其中包含设置为“用户存在”的错误属性。

{"status":"error","error_message":"user exists","error":"user exists"}

浏览器应该能够解析错误对象并读取error.error，但它不能。

使用未缩小的代码，脚本可以正常工作，并且浏览器会执行“vm.emailTakenError = true”行。

在浏览器控制台命令行中，缩小后，返回 error.error 给出此错误（Chrome 开发工具）：

未捕获的 ReferenceError：错误未在 eval 处定义（eval at (signup.ts:92), :1:1）

奇怪的是，在 Chrome 开发工具中使用缩小代码上的源映射，控制台可以使用鼠标悬停解析 error.error 属性，但不能作为 Watch 或浏览器窗口或任何其他方法。

同样神秘的是，这条线永远不会运行：

if (!error || !error.error){return};

该代码在 Firefox 中也失败了。

我对缩小器、代码或其他东西有问题吗？如何解决这个问题？

4

1 回答 1

1

感谢@Ry，谜团解开了。

问题是环境和缩小的结合。

在本地（非缩小）环境中，后端服务将不同的字符串传递给 catch 函数

error.error.indexOf('user exists') == 148 // true

在我们的 Staging/Prod 环境中，我们得到了不同的结果，这是我们服务器的一个怪癖。

error.error.indexOf('user exists') === 0 // true

所以error.error.indexOf('user exists')返回一个假值，所以条件失败。

接下来，该debugger语句在缩小代码中不起作用，至少在这种情况下不起作用。

于 2019-10-11T10:11:43.400 回答