记一次 script error导致的线上白屏，手把手教你如何定位问题代码

近日一次线上遇到白屏，通过vconsole发现console只打印了Script error , 没有其他任何有用的信息，看起来很棘手。

为啥出现Script error?

线上的资源( css，js，image )通常会放到cdn上，当这些从cdn 的JavaScript脚本执行出错，因为违背了同源策略, 为了保证用户信息不被泄露，错误信息不会显示出来，取而代之只会返回一个Script error。

具体看 Webkit 源码

 bool ScriptExecutionContext::sanitizeScriptError(String& errorMessage, int& lineNumber, String& sourceURL)
  {
    KURL targetURL = completeURL(sourceURL);
   if (securityOrigin()->canRequest(targetURL))
          return false;
          errorMessage = "Script error.";
          sourceURL = String();
          lineNumber = 0;
          return true;
  }

解法

开启CORS跨域资源共享

第一步: script标签 添加 crossorigin="anonymous"属性

<script
      src="https://s1.domain.com/u/offline_store_screen/static/js/app.5f6d1b77.js"
      crossorigin="anonymous"
    ></script>

通过指定 crossorigin="anonymous"，可以告诉浏览器该资源可以匿名访问，从而放宽浏览器的安全检查，使跨域请求能够顺利进行。

我们的项目是基于vue-cli建立的，所以在配置中添加这个属性即可，当然，解决完问题，再把这个属性关掉

第二步: 添加跨域HTTP响应头

Access-Control-Allow-Origin: *

通过以上步骤，就可以把问题定位的更加准确了

可以看到图中可以定位到一些有用的信息，

message: "Unexpected identifier" 
stack: "SyntaxError: Unexpected identifier
https://s1.zhuanstatic.com/u/offlinestore_ screen/static/js/chunk
vendors.41faefe3.is 77 22714

可以定位在低端机上遇到了不可预料的标识符，而且可以看到哪个一个js导致的，可以找到行和列。

所以通过这些信息，我们能够快速定位了。

在chrome中打开关键的js，然后使用左下角的 {} 进行格式化后，使用ctrl+g 或者command+g，当然我的电脑是ctrl + g 可以进行行列号定位输入77:22714回车，就可以定位到问题代码

可以看到问题代码是async 没有被转成es5。通过在node_modules搜索问题代码，找到pinia和 @vue/devtools-api 都没有自动转es5，所以需要手动在配置中添加一下

transpileDependencies: ['pinia', '@vue/devtools-api']

总结

一旦遇到script error的问题不要慌，首先根据上述步骤定位到问题代码，一步步去解决。