# Development Quality Development quality is a feature in the developer console that provides application quality monitoring data for owners, administrators, or operation roles of the application. By viewing the development quality dashboard, you can obtain monitoring data on the quality of the application's API calls, gadget, or web app front-end. This helps you understand the running status of the application dynamically and improves the efficiency of resolving exceptional situations. ## Background information When you develop or manage applications on the Feishu Open Platform, you may encounter the following issues: - As an application administrator, after the application is published and deployed, you are unable to understand the stability of its operation, making it difficult to judge the application quality. Consequently, managing the application and iterating it with developers becomes challenging. - As an application developer, after the application is published and deployed, you are unable to understand its running status and find online issues easily. Furthermore, even if you identify the issues, the lack of diagnostic tools can lead to lower problem-solving efficiency. To address the above issues, the developer console provides the development quality dashboard with the following capabilities: - Provide open interface quality monitoring, including server interface failure rate, event push failure rate, client interface failure rate, specific failure times of each interface and event, error change trends and other key information. - Provides front-end quality monitoring for web app and gadget, including white screen rate, time-to-interaction (TTI) for the initial screen, JS exception rate, request failure rate (exclusive to gadget), specific occurrence counts of various exceptions, number of affected users, exception trends, and other key information. Both enterprise self-built applications and store applications support development quality capabilities. This article only uses self-built applications as an example to introduce how to use development quality capabilities. ## View API Quality Monitoring 1. Log in to the [Developer Console](https://open.feishu.cn/app). 2. On the **Custom Apps** tab, locate the specified application and enter its details. 3. In the left navigation bar, select **Operation & Monitoring** > **Performance & Quality** > **Development Quality**. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/574a7f8629142ddb8212e1f436412de3_IuVPvz7ai7.png?height=1236&lazyload=true&maxWidth=600&width=2804) 4. Go to the **APIs Quality** tab to view the statistical data. - In the **Quality Overview** section, you can view real-time indicators for the specified date, including **Fail rate of server APIs**, **Fail rate of event pushes**, and **Fail rate of client APIs**. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/5b08e40c5a6af0f546656ad8aad89066_Tq5QDHzi0U.png?height=836&lazyload=true&maxWidth=600&width=2260) - In the **Indicator details** section, you can switch to the **Server log**, **Event log**, or **Client log** tab to view detailed quality monitoring data for specific time periods. You can view data statistics for up to one month. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/64fddcd7ab6ff6354d23aa664e002336_Pjkn6XxoJW.png?height=1234&lazyload=true&maxWidth=600&width=2172) Related operations: - If the time period spans multiple days, you can only select **Daily** as the time granularity. If the time period is within the same day, you can also select **Hourly** or **Minutely** as the time granularity. - Click **Export** in the upper right corner of the area to export detailed quality monitoring data to the cloud document Feishu table. - If you select **Server log**, you can view **Statistical analysis of sever API errors** at the bottom of the page. - If you select **Event log**, you can view **Statistical analysis of event push errors** at the bottom of the page. - If you select **Client log**, you can view **Statistical analysis of client API errors** at the bottom of the page. Using **Server log** as an example: - In the **Statistical analysis of sever API errors** section, you can specify a specific date to view the API call data for that day. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/de9f2b52cb39276c8c217e9bca69adef_2fzjEij28w.png?height=848&lazyload=true&maxWidth=600&width=2254) - In the statistics list, you can select specific abnormal APIs and mark them as ignored or important. Later, you can filter abnormal APIs by their status. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/4c60ab65ade39b5c60fca58e5757ee18_7zI2DTDors.png?height=722&lazyload=true&maxWidth=600&width=2244) - In the **Actions** column of the specified abnormal API, click **View Logs** to access the log search function, where you can search for detailed log information. For specific operations, refer to [Log Search](/docs/en/tools-and-resources/open-api-log-query). - Click on the **Error distribution** under the **Actions** column of the specified exception interface to view the error code distribution of failed API calls. Click on **Log** to go to the log retrieval function, where you can search for detailed log information. For specific operations, refer to [Log Retrieval](https://open.feishu.cn/document/tools-and-resources/open-api-log-query). ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/eaddbe83f187a784fb1480062506ac0b_fmpzbyCJ1j.png?height=810&lazyload=true&maxWidth=600&width=2254) Note that in the **Client log** metrics, under the **Statistical analysis of client API errors** column, the **Actions** column only supports clicking on **View Details** to obtain the user IDs with the most errors, the error count, and the corresponding log data. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/e1db077bd1d1a9cf9641841de0aa3f83_rWqIDtrGAl.png?height=842&lazyload=true&maxWidth=600&width=2180) ## Viewing Client-side Quality Monitoring for Applications Front-end quality for applications can be analyzed based on two dimensions: gadget and web app. You can switch to the corresponding statistical page based on your actual business scenario to view the data. ### Gadget You can view client-side quality monitoring data for gadget after enabling and publishing the gadget capability for your application. 1. Log in to the [developer console](https://open.feishu.cn/app). 2. On the **Custom Apps** tab, locate the specified application and enter its details. 3. In the left navigation bar, select **Operation & Monitoring** > **Performance & Quality** > **Development Quality**. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/574a7f8629142ddb8212e1f436412de3_IuVPvz7ai7.png?height=1236&lazyload=true&maxWidth=600&width=2804) 4. Go to the **Client-side Quality** tab and select **Gadget** to view the statistical data for gadgets' front-end quality. - In the **Quality Overview** section, you can choose a specified date to view the **White screen rate**, **Time to Interactive (TTI)** for the initial screen, **JS error rate**, and **Request fail rate** generated during the operation of gadget. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/9bc3a3d444c6e5755f035467dc1a3559_1yYJSFRCWe.png?height=968&lazyload=true&maxWidth=600&width=2170) Description of each indicator: - **White screen rate**: The ratio of the number of white screens that occur when closing a gadget to the total number of times the gadget is opened. When a user closes the gadget, if it has been open for more than 5 seconds, a screenshot is taken to determine if a blank screen occurred. Calculation method: Blank Screen Rate = Blank Screen PVs / Total PVs >5s. - **Time to Interactive (TTI)**: The time it takes from loading the gadget page to the first interactive step. - **JS error rate**: The ratio of the number of JS errors in the gadget to the number of times the gadget interface is opened. - **Request fail rate**: The ratio of the number of exceptions that occur when calling an interface using `tt.request` to the total number of requests made. - In the **Indicator details** section, you can switch to **White Screens**, **TTI**, **JS Exceptions**, or **Request Errors** pages and set a specific time period to view detailed quality monitoring data. You can view data statistics for up to one month. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/899432944dec783befb5a70ab4a2e42c_6F5TvvCn1y.png?height=1200&lazyload=true&maxWidth=600&width=2186) Related operations: - If the time period spans multiple days, you can only select **Daily** as the time granularity. If the time period is within the same day, you can also select **Hourly** or **Minutely** as the time granularity. - Click **Export** in the upper right corner of the area to export detailed quality monitoring data to the cloud document Feishu table. - If you need to compare indicators for different versions of the same system based on time, click **Indicator comparison by version** in the upper-right corner. - If you select **White Screens**, you can view the **White screen details** at the bottom of the page. You can filter the range of exception pages by time, operating system, or version, and you can also search for exception pages using fuzzy page addresses. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/27267f950d33d0d6156762607e355b61_ZlrQASYUiW.png?height=516&lazyload=true&maxWidth=600&width=2178) - If you select **TTI**, you can view **TTI details** and information about the gadget package version and distribution. You can filter the range of TTI by time, operating system, or version, and you can also search for TTI using fuzzy page addresses. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f738acf80180a64da73b3d73a4bf2bdc_M5GzXsZyvr.png?height=506&lazyload=true&maxWidth=600&width=2180) In addition, since the gadget package affects the time-to-interaction, the platform also displays the version information of the gadget package for easier troubleshooting. This includes the gadget type, package version number, package size, and release time. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/971f5e02107fffaeb87fa6013d927d9a_htaNMxe8yP.png?height=498&lazyload=true&maxWidth=600&width=2182) You can use the time and operating system settings to view the coverage and trend of gadget package versions. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/d187b10aa9fb788558cd14022bfab997_QXhSHkLpv5.png?height=970&lazyload=true&maxWidth=600&width=2158) - If you select **JS Exceptions**, you can view **JS details** at the bottom of the page. You can filter the exception content by time or operating system. You can also select specific rows, mark them as ignore or pay attention, and then filter the data by status. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/806c74f034fde2787c311da5d32706f6_4uqwtjqmyo.png?height=340&lazyload=true&maxWidth=600&width=1577) Click **View Details** in the **Action** column to view additional data, such as the generation time, reporting time, exception content, gadget package version, and device information. - If you select **Request Errors**, you can view **Request error details** at the bottom of the page. You can filter the exception content by time or operating system. You can also select specific rows, mark them as ignore or pay attention, and then filter the data by status. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/789bf5045eb9170aaaaab88559e2fcf1_AyxJt0lzgi.png?height=332&lazyload=true&maxWidth=600&width=1567) Click **View Details** in the **Action** column to view additional data, such as the generation time, reporting time, request method, interface address, and device information. ### Web App You can view front-end quality monitoring data for web app after enabling and publishing the web app capability for your application. 1. Log in to the [developer console](https://open.feishu.cn/app). 2. On the **Custom Apps** tab, locate the specified application and enter its details. 3. In the left navigation bar, select **Operation & Monitoring** > **Performance & Quality** > **Development Quality**. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/574a7f8629142ddb8212e1f436412de3_IuVPvz7ai7.png?height=1236&lazyload=true&maxWidth=600&width=2804) 4. Go to the **Client-side Quality** tab and select **Web app** to view the statistical data for web apps' front-end quality. - In the **Quality overview** section, you can choose a specified date to view the **White screen rate**, **Time to Interactive (TTI)** for the initial screen, and **JS error rate** generated during the operation of web app. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/59483d75598491efdc7097d30f71b529_5tgWyyojSi.png?height=910&lazyload=true&maxWidth=600&width=2280) Description of each indicator: - **White screen rate**: The ratio of the number of white screens that occur when closing an app to the total number of times the app is opened. Blank screen detection: Recognize 100% pure white pixels upon page exit. Calculation method: Blank Screen Rate = Blank Screen PVs / Number of Web Container Opens. - **Time to Interactive (TTI)**: The time it takes from loading the application page to the first interactive step. - **JS error rate**: The ratio of the number of JS errors in the application to the number of times the application interface is opened. - In the **Indicator details** section, you can switch to **White Screens**, **TTI**, or **JS Exceptions** pages and set a specific time period to view detailed quality monitoring data. You can view data statistics for up to one month. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/a2b6726ac3eecd056b099bf529c79a57_8XZ4x5RolF.png?height=1152&lazyload=true&maxWidth=600&width=2180) Related operations: - If the time period spans multiple days, you can only select **Daily** as the time granularity. If the time period is within the same day, you can also select **Hourly** or **Minutely** as the time granularity. - Click **Export** in the upper right corner of the area to export detailed quality monitoring data to the cloud document Feishu table. - If you select **White Screens**, you can view the **white screen details** at the bottom of the page. You can filter the range of exception pages by time or operating system, and you can also search for exception pages using fuzzy page addresses. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/1180a6a169d1b53ca33a3de66087e2bd_6xiz4UQo28.png?height=434&lazyload=true&maxWidth=600&width=2184) - If you select **TTI**, you can view **FMP details** at the bottom of the page. You can filter the range of pages by time or operating system, and you can also search for pages using fuzzy page addresses. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/cb0754d7d38a4cf1ed643b8701e9506b_8RVnxcDojs.png?height=592&lazyload=true&maxWidth=600&width=2162) - If you select **JS Exceptions**, you can view **JS details** at the bottom of the page. You can filter the exception content by time or operating system. You can also select specific rows, mark them as ignore or pay attention, and then filter the data by status. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/6f5de0af6e2612e5c546c79bb0bc1516_ZvhuaS0uvG.png?height=722&lazyload=true&maxWidth=600&width=2162) Click **View Details** in the **Actions** column to view additional data, such as the generation time, reporting time, exception content, and device information. ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/a576ca9a028cf27b39c4778b662b3ab7_MzYDFPprNJ.png?height=818&lazyload=true&maxWidth=600&width=2158)