ReactNative代码运行状态监控方法及装置与流程

本发明涉及计算机技术，尤其涉及一种React Native代码运行状态监控方法及装置。

背景技术：

React Native是一项利用javascript和react构建原生APP的技术，React Native支持通过编写JSX代码来实现应用程序的前端界面，支持动态下发代码来实现界面和更改业务逻辑，从而使得移动终端中的应用程序(Application，简称APP)及时地进行功能更新，让用户更快的体验新功能，并且可以及时的修复一些问题，提供更好的用户体验。

但是，React Native虽然可以动态的下发代码执行程序，但是仍然依赖应用程序为其提供运行的载体，并且其渲染和调用最终都会转化为应用程序的操作。如果在此过程中前端页面或者应用程序的载体页出现执行错误，则会导致APP不可用，影响用户体验。

因此，急需一种能够监控React Native代码运行状态的方法来及时发现React Native代码运行的问题。

技术实现要素：

本发明提供一种React Native代码运行状态监控方法及装置，用于监控React Native代码运行状态。

本发明第一方面提供一种React Native代码运行状态监控方法，包括：

接收打开第一前端页面的请求；

判断所述第一前端页面前次运行时是否异常退出，若是，则将所述第一前端页面所对应的连续异常退出次数加上1；

判断所述第一前端页面所对应的连续异常退出次数是否达到预设次数，若是，则从服务器下载所述第一前端页面的当前代码；

使用所述载体页加载第一前端页面的当前代码。

进一步地，还包括：

接收所述第一前端页面发送的功能数据，所述功能数据由所述第一前端页面中所部署的功能代码执行后所获得；

根据所述第一前端页面所发送的功能数据判断所述第一前端页面是否存在执行异常。

进一步地，所述判断所述第一前端页面前次运行时是否异常退出，包括：

判断所述第一前端页面所对应的开闭标签的值是否为打开，若是，则确定所述第一前端页面前次运行时异常退出。

进一步地，还包括：

若使用所述载体页加载第一前端页面的当前代码成功，则将所述第一前端页面所对应的开闭标签的值设置为打开。

进一步地，还包括：

若所述第一前端页面在加载成功之后成功退出，则将所述第一前端页面所对应的开闭标签的值设置为关闭；

将所述第一前端页面所对应的连续异常退出次数设置为0。

本发明第二方面提供一种React Native代码运行状态监控装置，包括：

第一接收模块，用于接收打开第一前端页面的请求；

第一判断模块，用于判断所述第一前端页面前次运行时是否异常退出，若是，则将所述第一前端页面所对应的连续异常退出次数加上1；

第二判断模块，用于判断所述第一前端页面所对应的连续异常退出次数是否达到预设次数，若是，则从服务器下载所述第一前端页面的当前代码；

加载模块，用于使用所述载体页加载第一前端页面的当前代码。

进一步地，还包括：

第二接收模块，用于接收所述第一前端页面发送的功能数据，所述功能数据由所述第一前端页面中所部署的功能代码执行后所获得；

第三判断模块，用于根据所述第一前端页面所发送的功能数据判断所述第一前端页面是否存在执行异常。

进一步地，所述第一判断模块具体用于：

判断所述第一前端页面所对应的开闭标签的值是否为打开，若是，则确定所述第一前端页面前次运行时异常退出。

进一步地，还包括：

第一设置模块，用于若使用所述载体页加载第一前端页面的当前代码成功，则将所述第一前端页面所对应的开闭标签的值设置为打开。

进一步地，还包括：

第二设置模块，用于若所述第一前端页面在加载成功之后成功退出，则将所述第一前端页面所对应的开闭标签的值设置为关闭；第三设置模块，用于将第一前端页面所对应的连续异常退出次数设置为0。

本发明所提供的React Native代码运行状态监控方法及装置，通过在载体页加载第一前端页面的代码的过程中增加状态判断标签，即增加第一前端页面的连续异常退出次数的判断，来判断第一前端页面的代码是否存在异常，从而保证在React Native架构下可以快速准确地识别前端页面的代码异常，实现了对React Native代码的运行状态的监控，进而在第一前端页面执行出现问题时及时进行修正处理，提升用户满意度。

附图说明

为了更清楚地说明本发明或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明所提供的React Native代码运行状态监控方法的系统架构图；

图2为本发明所提供的React Native代码运行状态监控方法实施例一的流程示意图；

图3为本发明所提供的React Native代码运行状态监控方法的整体流程图；

图4为本发明所提供的React Native代码运行状态监控方法实施例二的流程示意图；

图5为本发明所提供的React Native代码运行状态监控装置实施例一的模块结构图；

图6为本发明所提供的React Native代码运行状态监控装置实施例二的模块结构图；

图7为本发明所提供的React Native代码运行状态监控装置实施例三的模块结构图；

图8为本发明所提供的React Native代码运行状态监控装置实施例四的模块结构图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1为本发明所提供的React Native代码运行状态监控方法的系统架构图，如图1所示，该方法中涉及第一前端页面、应用程序以及服务器，其中，第一前端页面是指APP所提供的可以供用户在其上进行各种操作的页面，应用程序是指APP的处理程序，即Native，服务器是指APP厂商的后台服务器。在该架构中，第一前端页面和应用程序都位于用户所操作的移动终端侧，而服务器则是APP厂商专门设置的服务器。其中，一个应用程序可以对应多个前端页面，此处的第一前端页面可以指一个应用程序中的任意一个前端页面。

在React Native架构下，第一前端页面对应的代码中可以部署多个功能代码，例如埋点功能、定位功能等，第一前端页面对应的代码可以保存在服务器中或者缓存在应用程序的缓存中，当在APP中打开一个前端页面时，应用程序会通过其内部的载体页来从服务器或者应用程序的缓存中加载第一前端页面的代码。

本发明通过在载体页加载第一前端页面的代码的过程中增加状态判断标签，以及根据第一前端页面运行过程中所上报的功能数据，来对React Native代码的运行状态进行监控，以保证在第一前端页面执行出现问题时及时进行修正处理，提升用户满意度。

图2为本发明所提供的React Native代码运行状态监控方法实施例一的流程示意图，该方法站在应用程序的角度进行描述，如图1所示，该方法包括：

S101、接收打开第一前端页面的请求。

当用户点击前端页面时，应用程序就会接收到打开该页面的请求，此时，应用程序首先会启动载体页。在React Native中，载体页是React Native代码运行的容器界面。当用户点击APP上的一个页面时，应用程序会接收到该请求，进而，应用程序首先启动载体页，通过载体页来加载页面所对应的JS代码然后解析，进而动态生成页面。一般情况下，当载体页第一次从服务器下载页面对应的代码后，会将页面对应的代码缓存在应用程序的缓存中，后续再加载时就可以直接使用应用程序缓存中的代码来加载。因此，载体页加载第一前端页面的代码时，可能是从服务器或应用程序的缓存中进行加载。

S102、判断第一前端页面前次运行时是否异常退出，若是，则将第一前端页面所对应的连续异常退出次数加上1。

S103、判断第一前端页面所对应的连续异常退出次数是否达到预设次数，若是，则从服务器下载第一前端页面的当前代码。

具体地，应用程序在每次加载第一前端页面之前，首先判断第一前端页面上一次运行时是否异常退出，如果是，就将第一前端页面所对应的连续异常退出次数加1。

需要注意的是，第一前端页面所对应的连续异常退出次数是指第一前端页面连续异常退出的次数，而不是累积的异常退出次数。

当第一前端页面的连续异常退出次数达到了预设次数，例如已经达到2次，则可以确认第一前端页面的代码存在问题，此时，则应用程序会从服务器下载第一前端页面的当前代码。其中，服务器中的第一前端页面的当前代码，是指第一前端页面的最新代码，因此，从服务器中下载到第一前端页面的当前代码后就能解决第一前端页面之前存在的执行问题。

S104、使用载体页加载第一前端页面的当前代码。

当从服务器下载到最新的代码后，应用程序的载体页就会重新加载第一前端页面的最新的代码。

本实施例中，通过在载体页加载第一前端页面的代码的过程中增加状态判断标签，即增加第一前端页面的连续异常退出次数的判断，来判断第一前端页面的代码是否存在异常，从而保证在React Native架构下可以快速准确地识别前端页面的代码异常，实现了对React Native代码的运行状态的监控，进而在第一前端页面执行出现问题时及时进行修正处理，提升用户满意度。

在一种优选的实施方式中，上述步骤S102中判断第一前端页面前次运行时是否异常退出的具体方法为：

判断第一前端页面所对应的开闭标签的值是否为打开，若是，则确定第一前端页面前次运行时异常退出。

具体地，第一前端页面所对应的开闭标签为本发明实施例所提出的一个判断标签，每个前端页面都对应唯一的一个开闭标签，这个开闭标签的值有两个，一个为打开，一个为关闭。当第一前端页面加载成功后，这个开闭标签的值会被设置为打开，用来表示当前这个第一前端页面被打开了。当用户关闭第一前端页面，即第一前端页面正常退出时，这个开闭标签的值被设置为关闭，用来表示当前这个第一前端页面正常关闭了。正常情况下，当开始加载第一前端页面的代码时，第一前端页面的开闭标签的值应该为关闭，而如果此时判断出该开闭标签的值为打开，则说明第一前端页面之前被成功打开，但是并没有成功退出，则可以确定第一前端页面在上一次运行时异常退出。

本实施例中，通过设置这个开闭标签，就可以快速地确定出第一前端页面在前次运行时是否异常退出。

图3为本发明所提供的React Native代码运行状态监控方法的整体流程图，如图3所示，该方法的整体执行过程为：

S201、接收打开第一前端页面的请求。

该步骤的具体执行方法可参考前述实施例。

S202、获取第一前端页面的开闭标签的值。

可选地，应用程序中设置一个特定的文件，该应用程序的所有前端页面的开闭标签的值以及连续异常退出次数的值都保存在该文件中，应用程序可以从该文件中读取开闭标签和连续异常退出次数的值，同时，也可以向该文件中写入开闭标签和连续异常退出次数的新值。

S203、判断第一前端页面的开闭标签的值是否为打开，若是，则执行S204，若否，则执行S205。

S204、第一前端页面的连续异常退出次数加1。

该步骤的具体实施方式可以参照前述实施例。

S205、第一前端页面的连续异常退出次数置为0。

本步骤中，当判断出第一前端页面的开闭标签的值为关闭时，可以确定，第一前端页面在上一次运行时成功退出了，进而可以确定第一前端页面的代码执行是正常的，因此，此时，就将第一前端页面的连续异常退出次数重新置为0。

S206、判断连续异常退出次数是否达到预设次数，若是，则执行S207，否则执行S209。

S207、从服务器下载第一前端页面的当前代码。

当判断出第一前端页面的连续异常退出次数达到预设次数，例如已经达到2次时，可以确定第一前端页面的代码存在问题，此时，应用程序会从服务器中下载第一前端页面的最新代码，即当前代码。之后执行S209。

S208、向服务器上报异常，之后结束。

在从服务器下载第一前端页面的最新代码之后，应用程序还会向服务器上报异常，以告知服务器第一前端页面之前的代码执行出现问题，以使得服务器根据所上报的异常对第一前端页面之前的代码进行分析等。

S209、载体页开始加载第一前端页面的当前代码。

S2010-S2011、加载完成后，判断第一前端页面的界面功能是否正常，若是，则执行S2012，若否，则执行S2015。

S2012、将第一前端页面所对应的开闭标签的值设置为打开。

当判断出第一前端页面的界面功能正常，则说明使用所述载体页加载第一前端页面的当前代码成功，此时，将第一前端页面所对应的开闭标签的值设置为打开，来表示第一前端页面已经被打开。

S2013、第一前端页面成功退出时，将第一前端页面所对应的开闭标签的值设置为关闭。

当第一前端页面在加载成功之后成功退出，例如由用户点击退出按钮退出，此时，将第一前端页面所对应的开闭标签的值设置为关闭，来表示第一前端页面已经正常退出。

S2014、将第一前端页面的连续异常退出次数置为0，并结束。

当第一前端页面正常退出时，可以确定第一前端页面的代码执行是正常的，因此，此时，就将第一前端页面的连续异常退出次数重新置为0。

S2015、向服务器上报异常。

如果第一前端页面加载出现异常，则向服务器上报异常，以使得服务器对第一前端页面的代码进行进一步的分析。

S2016、显示加载错误界面。

当第一前端页面加载出现异常时，应用程序还会向用户显示一个加载错误界面，以使得用户得知页面加载出现异常，从而提升用户感受。

图4为本发明所提供的React Native代码运行状态监控方法实施例二的流程示意图，如图4所示，该方法还包括：

S301、接收第一前端页面发送的功能数据，该功能数据由第一前端页面中所部署的功能代码执行后所获得。

具体地，在React Native架构下，第一前端页面对应的代码中可以部署多个功能代码，例如埋点功能、定位功能等，这些功能代码在第一前端页面被打开之后都会根据预设的流程来执行，以获取其希望获取的数据。

S302、根据第一前端页面所发送的功能数据判断第一前端页面是否存在执行异常。

当第一前端页面中的功能代码获取到对应的功能数据之后，会将这些数据按照一定的规则发送给应用程序，应用程序通过判断这些数据是否符合规则的要求来确定第一前端页面是否存在执行异常。例如，当第一前端页面的功能代码调用了一个不存在接口，或者，当第一前端页面发送了一个错误的不符合规则的内容，则应用程序就可以确定第一前端页面的功能代码出现异常，进而可以根据这些异常来进行相应的处理。

图5为本发明所提供的React Native代码运行状态监控装置实施例一的模块结构图，如图5所示，该装置包括：

第一接收模块501，用于接收打开第一前端页面的请求。

第一判断模块502，用于判断第一前端页面前次运行时是否异常退出，若是，则将第一前端页面所对应的连续异常退出次数加上1。

第二判断模块503，用于判断第一前端页面所对应的连续异常退出次数是否达到预设次数，若是，则从服务器下载第一前端页面的当前代码。

加载模块504，用于使用载体页加载第一前端页面的当前代码。

该装置用于实现前述方法实施例，其实现原理和技术效果类似，此处不再赘述。

图6为本发明所提供的React Native代码运行状态监控装置实施例二的模块结构图，如图6所示，还包括：

第二接收模块505，用于接收第一前端页面发送的功能数据，功能数据由第一前端页面中所部署的功能代码执行后所获得。

第三判断模块506，用于根据第一前端页面所发送的功能数据判断第一前端页面是否存在执行异常。

另一实施例中，第一判断模块502具体用于：

判断第一前端页面所对应的开闭标签的值是否为打开，若是，则确定第一前端页面前次运行时异常退出。

图7为本发明所提供的React Native代码运行状态监控装置实施例三的模块结构图，如图7所示，还包括：

第一设置模块507，用于若使用载体页加载第一前端页面的当前代码成功，则将第一前端页面所对应的开闭标签的值设置为打开。

图8为本发明所提供的React Native代码运行状态监控装置实施例四的模块结构图，如图8所示，还包括：

第二设置模块508，用于若第一前端页面在加载成功之后成功退出，则将第一前端页面所对应的开闭标签的值设置为关闭。

第三设置模块509，用于将第一前端页面所对应的连续异常退出次数设置为0。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。