Electron 启用 DevTool 调试修复 ArcGIS

背景介绍

在 ArcGIS Monitor 的使用过程中，发现在ArcGIS Server 服务目录存在中文文件夹时，部分Counter会测试失败，返回异常信息Error: ARCGIS - getFolderStats !200 ERROR: <FolderName>:null 如下图所示。

ArcGIS Server 服务目录存在中文路径
Counter 测试失败

观察 ArcGIS Monitor Administrator 的安装目录 C:\ArcGIS Monitor\Administrator\resources\app 可发现, 该产品主要是基于Angular + NodeJS编写的，然后采用 Electron 打包成的桌面应用程序，推测是HTTP请求的时候对对URL的中文编码问题导致，决定着手修复该问题。

参考资料

• Electron调试应用
• 使用 VSCode 进行主进程调试

DevTool 调试渲染进程

• VSCode 打开源码所在文件夹 C:\ArcGIS Monitor\Administrator\resources\app
• 添加调试配置文件
  在主进程的代码main.js文件里，找到createWindow()函数，添加mainWindow.webContents.openDevTools();。如下所示。

function createWindow() {
 //......
        mainWindow.webContents.openDevTools();  //打开DevTool工具

        mainWindow.loadURL(url.format({
            pathname: path.join(__dirname, 'index.html'),
            protocol: 'file:',
            slashes: true
        }));
 //......
}

重新运行 ArcGIS Monitor Administrator 程序，可以在程序右侧默认打开DevTool调试窗口，如下图所示。

打开DevTool调试ArcGIS Monitor渲染进程
中文目录无法正常获取监控信息

再继续调试下去发现，发现只能跟到app\app\modules\analysis\sm.analysis.js

sm.analysis.js

而根据报错信息Error: ARCGIS - getFolderStats !200 ERROR:中文: null，定位到报错的文件应该是在.\app\collector\machines\arcgis-info.js

image.png

继续翻源码文件发现，ArcGIS Monitor 通过 NodeJS 的 child_process 模块创建了多个进程，以便更好的利用多核CPU的性能。Collector 部分是运行在另一个Node进程下，与 Administrator 主进程之间采用WebSocket进行通信。这样处理的好处是通过 Collector 去获取监控信息的时候， Administrator 主进程不会受到影响。但也因为不在渲染进程里面，那么DevTool就无法继续跟踪下去。

修改进程代码

由于前面已经定位到报错的信息是在.\app\collector\machines\arcgis-info.js文件中的 function getReports(siteUrl, token, callback) 方法里，分析并修改其中Http请求拼接的语句，将中文路径的变量名 folder 加上编码方法 encodeURIComponent ，如下所示。

encodeURIComponent(folder)
修改的是后台进程，需要重启服务 ArcGIS Monitor Service <ServiceName>，再次执行测试，测试通过。
测试通过

补充

在跟售后沟通的时候了解到，该问题已经被ESRI定为一个BUG，韩语和中文都能复现问题。

BUG# : BUG-000121931
Synopsis : ArcGIS Monitor fails to add ArcGIS Counter if ArcGIS Server has a folder containing Korean characters
Status : In Product Plan 

在ESRI推出补丁修复该BUG之前，可以通过此方法先行处理。暂未经过充分测试。若存在类似问题也可以自行跟踪调试。