线上代码修复方法及装置、存储介质及电子装置与流程

1.本技术涉及计算机技术领域，具体而言，涉及一种线上代码修复方法及装置、存储介质及电子装置。


背景技术：

2.代码就是程序员用开发工具所支持的语言写出来的源代码，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、便于识别与记忆、力求短小与格式统一以及容易修改等。源代码是代码的分支，某种意义上来说，源代码相当于代码。现代程序语言中，源代码可以书籍或磁带形式出现，但最为常用格式是文本文件，这种典型格式的目的是为了编译出计算机程序。计算机源代码最终目的是将人类可读文本翻译成为计算机可执行的二进制指令，这种过程叫编译，它由通过编译器完成。
3.随着互联网技术的快速发展，前端页面开发需求量愈来愈高，当线上页面发生代码报错，特别是造成页面卡死或白屏，严重影响到业务功能的使用，则需要前端人员定位bug并快速解决问题。现有技术中对于源代码中出错代码的修复还是靠人工修复，但人工修复存在处理问题缓慢、费时费力等问题。
4.相应地，本领域需要一种新的线上代码修复方案来解决上述问题。


技术实现要素：

5.本技术旨在解决上述技术问题，即，解决当前对于源代码中出错代码的修复还是靠人工修复，但人工修复存在处理问题缓慢、费时费力的问题，本技术提供了一种线上代码修复方法及装置、存储介质及电子装置。
6.在第一方面，本技术提供一种线上代码修复方法，该方法包括：
7.将源代码通过webpack打包生成线上代码和对应的sourcemap映射关系文件；
8.根据所述线上代码获取报错信息；
9.根据所述报错信息和所述sourcemap映射关系文件定位所述源代码的出错位置；
10.从修复方法映射库中获取所述报错信息对应的解决方法，其中，所述修复方法映射库中存储有历史报错信息以及对应的解决方法；
11.根据所述解决方法对出错代码进行修复。
12.在上述线上代码修复方法的一个技术方案中，所述根据所述报错信息和所述sourcemap映射关系文件定位所述源代码的出错位置包括：
13.对所述线上代码逐行进行代码扫描；
14.将各线上代码与所述sourcemap映射关系文件进行匹配；
15.根据所述报错信息和报错信息对应的sourcemap映射关系文件的匹配位置定位源代码的出错位置。
16.在上述线上代码修复方法的一个技术方案中，所述根据所述解决方法对出错代码
进行修复包括：
17.根据所述出错位置获取出错位置对应的出错代码；
18.从修复方法映射库存储的历史报错信息以及对应的解决方法中获取报错信息对应的修复代码；
19.将所述修复代码替换报错位置对应的出错代码得到修复后的源代码；
20.刷新修复后的源代码并运行。
21.在上述线上代码修复方法的一个技术方案中，该方法还包括：
22.若修复方法映射库中未存储报错信息对应的解决方法时，发送人工处理指令，在检测到人工处理完成后，获取人工处理后的解决方法。
23.在上述线上代码修复方法的一个技术方案中，该方法还包括：
24.根据人工处理的报错信息以及人工处理后的解决方法，更新所述修复方法映射库。
25.在上述线上代码修复方法的一个技术方案中，所述根据所述线上代码获取报错信息包括：
26.根据所述线上代码中的监听报错指令获取报错信息。在上述线上代码修复方法的一个技术方案中，所述根据所述线上代码获取报错信息还包括：
27.实时扫描线上代码是否有错误，若有，则发送线上代码报错信息。
28.在第二方面，本技术提供一种线上代码修复装置，该装置包括：
29.打包模块，用于将源代码通过webpack打包生成线上代码和对应的sourcemap映射关系文件；
30.第一获取模块，用于根据所述线上代码获取报错信息；
31.定位模块，用于根据所述报错信息和所述sourcemap映射关系文件定位所述源代码的出错位置；
32.第二获取模块，用于从修复方法映射库中获取所述报错信息对应的解决方法，其中，所述修复方法映射库中存储有历史报错信息以及对应的解决方法；
33.修复模块，用于根据所述解决方法对出错代码进行修复。
34.在第三方面，本技术提供一种计算机可读的存储介质，所述计算机可读的存储介质包括存储的程序，其中，所述程序运行时执行本技术第一方面所述的线上代码修复方法。
35.在第四方面，本技术提供一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为通过所述计算机程序执行本技术第一方面所述的线上代码修复方法。
36.本技术上述一个或多个技术方案，至少具有如下一种或多种有益效果：
37.在实施本技术的技术方案中，提出一种线上代码修复方法，该修复方法旨在将源代码通过webpack打包生成线上代码和对应的sourcemap映射关系文件；根据所述线上代码获取报错信息；根据所述报错信息和所述sourcemap映射关系文件定位所述源代码的出错位置；从修复方法映射库中获取所述报错信息对应的解决方法，其中，所述修复方法映射库中存储有历史报错信息以及对应的解决方法；根据所述解决方法对出错代码进行修复。该修复方法既可以自动化修复线上常见出错问题，解决问题的速度变快，又能减少开发成本，保证线上用户的正常使用。
附图说明
38.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本技术的实施例，并与说明书一起用于解释本技术的原理。
39.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
40.图1是根据本技术实施例的线上代码修复方法的硬件环境示意图；
41.图2是根据本技术实施例的线上代码修复方法主要步骤流程示意图；
42.图3是根据本技术实施例的线上代码修复方法整体步骤流程示意图；
43.图4是根据本技术实施例的线上代码修复装置的主要结构示意图；
44.图5是根据本技术实施例的电子装置的主要结构示意图。
具体实施方式
45.为了使本技术领域的人员更好地理解本技术方案，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分的实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本技术保护的范围。
46.需要说明的是，本技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本技术的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
47.根据本技术实施例的一个方面，提供了一种线上代码修复方法。该线上代码修复方法广泛应用于计算机领域的各个应用场景。可选地，在本实施例中，上述线上代码修复方法可以应用于如图1所示的由终端设备102和服务器104所构成的硬件环境中。如图1所示，服务器104通过网络与终端设备102进行连接，可用于为终端或终端上安装的客户端提供服务(如应用服务等)，可在服务器上或独立于服务器设置数据库，用于为服务器104提供数据存储服务，可在服务器上或独立于服务器配置云计算服务，用于为服务器104提供数据运算服务。
48.上述网络可以包括但不限于以下至少之一：有线网络，无线网络。上述有线网络可以包括但不限于以下至少之一：广域网，城域网，局域网，上述无线网络可以包括但不限于以下至少之一：wifi(wireless fidelity，无线保真)，蓝牙。终端设备102可以并不限定于为pc、手机、平板电脑、智能空调、智能烟机、智能冰箱、智能烤箱、智能炉灶、智能洗衣机、智能热水器、智能洗涤设备、智能洗碗机、智能投影设备、智能电视、智能晾衣架、智能窗帘、智能影音、智能插座、智能音响、智能音箱、智能新风设备、智能厨卫设备、智能卫浴设备、智能扫地机器人、智能擦窗机器人、智能拖地机器人、智能空气净化设备、智能蒸箱、智能微波
炉、智能厨宝、智能净化器、智能饮水机、智能门锁等。
49.参阅附图2，图2是根据本发明的一个实施例的一种线上代码修复方法的主要步骤流程图。下面以线上代码修复装置为执行主体进行示例性描述，所述线上代码修复装置可以应用于服务器中。如图2所示，本发明实施例中的线上代码修复方法主要包括下列步骤s101-步骤s105。
50.步骤s101：将源代码通过webpack打包生成线上代码和对应的sourcemap映射关系文件。
51.在一个具体示例中，在开发环境通过配置devtool属性加载sourcemap映射关系文件可以直接定位到源代码错误代码的行和列，提示信息全面，但是线上代码一般选择不加载sourcemap映射关系文件，因为加的话不仅影响用户体验，而且也会暴露源代码，所以线上代码是由开发环境中的源代码经过压缩，去空格，babel编译转化后，得到适用于生产环境的项目代码，即线上代码都是编译后都的代码，这样的代码与源代码差异很大。所以本技术中，将源代码通过webpack打包的时候不仅要生成线上代码，还要生成对应的sourcemap映射关系文件。
52.其中，sourcemap映射关系文件是源代码与编译代码对应位置映射的信息文件，sourcemap映射关系文件存储在线上代码修复装置中的sourcemap文件存储模块中。
53.步骤s102：根据所述线上代码获取报错信息。
54.在一个具体示例中，线上代码若出错时会有提示信息，该提示信息显示的是报错信息的具体内容，举例而言，可以根据线上代码中的监听报错指令获取报错信息，示例性地，监听报错指令可以为window.onerror指令，window.onerror指令可以捕获异步错误或者非异步错误。此外，还可以通过实时扫描线上代码是否有错误来检测线上代码的报错信息，若实时扫描时扫描出线上代码出错，则发送线上代码报错信息。
55.可以理解的是，线上代码修复装置可以为web端线上代码修复装置。线上代码报错信息是通过嵌入在web界面，然后web端线上代码修复装置实时在线扫描监测某web页面线上代码，使得当用户进入某web页面无法打开时，便能由扫描web页面错误代码自动上报代码报错信息到线上代码修复装置，由于线上代码为编译后的文件，因此线上代码修复装置获取的报错信息对应的报错代码的行和列也都是编译后的代码。
56.具体的，线上代码报错信息可以通过默认语法、短标签语法、脚本等方式嵌入到web界面。
57.步骤s103：根据所述报错信息和所述sourcemap映射关系文件定位所述源代码的出错位置。
58.在一个具体示例中，根据报错信息和sourcemap映射关系文件可以直接定位到源代码错误代码的行和列，对源代码错误代码的行和列进行后续步骤，以修复源代码的出错代码。
59.步骤s104：从修复方法映射库中获取所述报错信息对应的解决方法，其中，所述修复方法映射库中存储有历史报错信息以及对应的解决方法。
60.在一个具体示例中，根据历史报错信息和历史报错信息对应的解决方法建立一个修复方法映射库，当有报错信息自动上报至线上代码修复装置中时，在修复方法映射库中查询是否有相同的报错信息，若有，定位到报错信息对应的报错位置，从修复方法映射库中
找到该报错信息对应的解决方法。
61.利用历史报错信息数据汇总多种报错信息以及每一种报错信息对应的解决方法，并将报错信息以及对应的解决方法存储到修复方法映射库中，其中，需要说明的是，历史报错信息并不能涵盖所有的报错信息分类，例如对于个别报错信息比较复杂，历史报错信息中并未汇总到该个别复杂的报错信息，所以修复方法映射库中存储的也并不是所有类型的报错信息，对于一些比较常见的报错信息，修复方法映射库中都存储了其解决方法，而对于一些疑难问题的报错信息，修复方法映射库中未存储了其解决方法，就可以采用其它处理方式修复出错代码。
62.步骤s105：根据所述解决方法对出错代码进行修复。
63.在一个具体示例中，获得报错信息对应的解决方法后，即可获得报错信息对应的修复代码，将修复代码替换到源代码中的出错代码，便可自动修复出错代码，得到修复完成后的源代码，保证线上用户的正常使用。
64.基于步骤s101-步骤s105，本发明实施例提出一种线上代码修复方法，该修复方法旨在将源代码通过webpack打包生成线上代码和对应的sourcemap映射关系文件；根据所述线上代码获取报错信息；根据所述报错信息和所述sourcemap映射关系文件定位所述源代码的出错位置；从修复方法映射库中获取所述报错信息对应的解决方法，其中，所述修复方法映射库中存储有历史报错信息以及对应的解决方法；根据所述解决方法对出错代码进行修复。该修复方法既可以自动化修复线上常见出错问题，解决问题的速度变快，又能减少开发成本，保证线上用户的正常使用。
65.下面对步骤s101-步骤s105作进一步地说明。
66.在本发明实施例的一个实施方式中，步骤s102可以进一步包括以下步骤s1021：
67.步骤s1021：根据所述线上代码中的监听报错指令获取报错信息。
68.在本实施方式中，源代码经过压缩，去空格，babel编译转化后，得到适用于生产环境的项目代码，即线上代码，同时生成对应的sourcemap映射关系文件。线上代码中有监听报错指令可以用来捕获报错信息，并将捕获到的报错信息通过ajax或者fetch自动上报到线上代码修复装置。
69.需要说明的是，本发明不限定只能通过ajax或者fetch将捕获到的报错信息自动上报到线上代码修复装置，只要能将捕获到的报错信息上报至线上代码修复装置，本发明不限制通过方式。
70.在本发明实施例的一个实施方式中，步骤s102还可以进一步包括以下步骤s1021’：
71.步骤s1021’：实时扫描线上代码是否有错误，若有，则发送线上代码报错信息。
72.在一个具体示例中，当用户进入某web页面，实时对用户即将进入的下一web页面提前进行扫描，若线上代码有错误，则发送线上代码报错消息。在本发明实施例的一个实施方式中，步骤s103可以进一步包括以下步骤s1031-步骤s1033：
73.步骤s1031：对所述线上代码逐行进行代码扫描；
74.步骤s1032：将各线上代码与所述sourcemap映射关系文件进行匹配；
75.步骤s1033：根据所述报错信息和报错信息对应的sourcemap映射关系文件的匹配位置定位源代码的出错位置。
76.在一个具体示例中，当获取到线上代码报错信息之后，根据报错信息定位出错代码出错位置。由于在实时在线扫描监测某web页面时，web端线上代码修复装置可以是对web页面代码进行一次模拟执行发现代码出错，也可以是线上代码与源代码的映射关系，并存储在sourcemap映射关系文件中，在进行实时扫描监测时，将各线上代码与所述sourcemap映射关系文件进行匹配确定是否存在错误，并及时定位出错代码位置。
77.在实时在线扫描某web页面并对代码进行监测时，通过将每一代码与sourcemap映射关系文件进行匹配，匹配得到的代码是否与源代码一致，以确定是否存在错误，即是否存在出错代码。如果匹配一致，则表示代码运行正常；如果匹配不一致，则表示存在线上代码有错误，并定位该出错代码以获取该出错代码的出错位置。
78.在本示例中，对线上代码进行扫描，可以精确定位出错代码所在代码行，以方便快速修复出错代码，具体地，web端线上代码修复装置在进行扫描监测时，由于扫描过程是逐行代码扫描，当扫描到出错代码，并记录出错行，例如记录在日志中，后续修复时通过日志索引出错位置。
79.在本发明实施例的一个实施方式中，步骤s105可以进一步包括以下步骤s1051-步骤s1054：
80.步骤s1051：根据所述出错位置获取出错位置对应的出错代码；
81.步骤s1052：从修复方法映射库存储的历史报错信息以及对应的解决方法中获取报错信息对应的修复代码；
82.步骤s1053：将所述修复代码替换报错位置对应的出错代码得到修复后的源代码；
83.步骤s1054：刷新修复后的源代码并运行。
84.在一个具体示例中，根据出错位置获取源代码中出错位置对应的出错代码，若从修复方法映射库存储的历史报错信息以及对应的解决方法中找到报错信息对应的解决方法时，即找到报错信息对应的修复代码，将修复代码替换报错位置对应的出错代码，以得到修复后的源代码。
85.在本发明实施例的一个实施方式中，该方法还包括：
86.若修复方法映射库中未存储报错信息对应的解决方法时，发送人工处理指令，在检测到人工处理完成后，获取人工处理后的解决方法。
87.在一个具体示例中，若在修复方法映射库中未查询到报错信息对应的解决方法时，则认为未查询到报错信息的问题为疑难问题，发送人工处理指令，将疑难问题分配给人工处理，等人工处理完成后，得到疑难问题对应的人工处理后的解决方法。
88.在本发明实施例的一个实施方式中，该方法还包括：
89.根据人工处理的报错信息以及人工处理后的解决方法，更新所述修复方法映射库。
90.在一个具体示例中，将疑难问题对应的的修复代码也存储到修复方法映射库，以更新所述修复方法映射库。在更新所述修复方法映射库后，当再次获取到线上代码的报错信息时，从更新后的修复方法映射库中获取解决方法。
91.在一个具体示例中，如图3所示，参阅附图3，图3是根据本发明的一个实施例的一种线上代码修复方法的整体步骤流程图。首先源代码通过webpack打包生成线上代码和sourcemap映射关系文件，其中，一份不含.map文件的线上代码放到线上服务器运行，一份
含.map文件的sourcemap映射关系文件放到线上代码修复装置中的sourcemap文件存储模块中进行存储；其次，捕获线上代码的报错信息，并将报错信息上报至线上代码修复装置的错误信息模块；再次，根据报错信息和sourcemap文件存储模块存储的sourcemap映射关系文件获得源代码中出错代码的位置，定位出错代码的位置时使用sourcemap文件存储模块存储的sourcemap映射关系文件通过.map文件进行行解析关联来定位到源代码中的具体错误位置；再一次，常见问题修复方法映射库中查询是否之前出现过这个报错信息，若出现过，则直接从常见问题修复方法映射库找到对应的解决方法，并将解决方法传输给线上代码修复装置的自动化修复模块，自动化修复模块根据解决方法修复出错代码，以保证线上用户的正常使用；若常见问题修复方法映射库中没有出现过这个报错信息，则这个报错信息对应的额出错问题被认定为疑难问题，交由人工处理，处理处理完成后，产出源代码。
92.进一步地，本技术还提供了一种线上代码修复装置。
93.参阅附图4，图4是根据本技术的一个实施例的线上代码修复装置的主要结构框图。如图4所示，本技术实施例中的线上代码修复装置主要包括打包模块11、第一获取模块12、定位模块13、第二获取模块14和修复模块15。在一些实施例中，打包模块11、获取模块12、定位模块13、查询模块14和修复模块15中的一个或多个可以合并在一起成为一个模块。在一些实施例中打包模块11可以被配置成将源代码通过webpack打包生成线上代码和对应的sourcemap映射关系文件；第一获取模块12可以被配置成根据所述线上代码获取报错信息；定位模块13可以被配置成根据所述报错信息和所述sourcemap映射关系文件定位所述源代码的出错位置；第二获取模块14可以被配置成从修复方法映射库中获取所述报错信息对应的解决方法，其中，所述修复方法映射库中存储有历史报错信息以及对应的解决方法；修复模块15可以被配置成用于根据所述解决方法对出错代码进行修复。
94.在一个实施方式中，具体实现功能的描述可以参见步骤s101-步骤s105所述。
95.本领域技术人员能够理解的是，本技术实现上述一实施例的方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读存储介质可以包括：能够携带所述计算机程序代码的任何实体或装置、介质、u盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器、随机存取存储器、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读存储介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读存储介质不包括电载波信号和电信信号。
96.进一步，本技术还提供了一种计算机可读存储介质。在根据本技术的一个计算机可读存储介质实施例中，计算机可读存储介质可以被配置成存储执行上述方法实施例的线上代码修复方法的程序，该程序可以由处理器加载并运行以实现上述线上代码修复方法。为了便于说明，仅示出了与本技术实施例相关的部分，具体技术细节未揭示的，请参照本技术实施例方法部分。该计算机可读存储介质可以是包括各种电子装置形成的存储器设备，可选的，本技术实施例中计算机可读存储介质是非暂时性的计算机可读存储介质。
97.进一步，本技术还提供了一种电子装置。在根据本技术的一个电子装置实施例中，
如图5所示，电子装置包括处理器和存储器，存储器可以被配置成存储执行上述方法实施例的线上代码修复方法的程序，处理器可以被配置成用于执行存储器中的程序，该程序包括但不限于执行上述方法实施例的线上代码修复方法的程序。为了便于说明，仅示出了与本技术实施例相关的部分，具体技术细节未揭示的，请参照本技术实施例方法部分。该电子装置可以是包括各种电子设备形成的控制装置设备。
98.进一步，应该理解的是，由于各个模块的设定仅仅是为了说明本技术的装置的功能单元，这些模块对应的物理器件可以是处理器本身，或者处理器中软件的一部分，硬件的一部分，或者软件和硬件结合的一部分。因此，图中的各个模块的数量仅仅是示意性的。
99.本领域技术人员能够理解的是，可以对装置中的各个模块进行适应性地拆分或合并。对具体模块的这种拆分或合并并不会导致技术方案偏离本技术的原理，因此，拆分或合并之后的技术方案都将落入本技术的保护范围内。
100.以上所述仅是本技术的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本技术原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本技术的保护范围。