Application Real-Time Monitoring Service:JS error diagnostics

Access the feature

1. Log on to the ARMS console. In the left-side navigation pane, choose Browser Monitoring > Browser Monitoring.

2. On the Browser Monitoring page, select a region in the top navigation bar and click the name of the application that you want to manage.

3. In the left-side navigation pane, choose Application > JS Error Diagnostics.

   In the upper-right corner of the JS Error Diagnostics page, you can select a time range.

Error overview

The Error Overview section displays key statistics and trends for JS errors within the selected time range, including the following metrics:

• Errors: The total number of JS errors in the selected time range.

• JS Error Rate: The percentage of page views with errors out of the total page views in the selected time range.

• Affected Users: The number and percentage of users affected by JS errors.

In the Error Overview section, you can:

• Hover over the chart. A tooltip appears showing the number of errors, error rate, and affected users for that point in time.

• Hover over a data point on the chart until your pointer becomes a hand icon, and then click the data point to open the Exception Insight dialog box. For more information, see View Exception Insight.

• Click and drag across a section of the chart to zoom in on a specific time frame. To restore the original view, click Reset Zoom in the upper-right corner.

Exception insight

The Exception Insight dialog box displays details about JS errors at a specific point in time, including the following metrics:

• Errors: The total number of JS errors at the corresponding point in time.

• JS Error Rate: The percentage of page views with errors out of the total page views at the corresponding point in time.

• Affected Users: The number and percentage of users affected by JS errors.

• High frequency error Top 5: The five most frequent JS errors at the corresponding point in time. This includes the error message captured by ARMS, the number of occurrences, and the number of affected users.

• Page Error Rate Top 5: The five pages with the highest JS error rates at the corresponding point in time. This includes the page name, the page's JS error rate, and the number of page views.

In the Exception Insight dialog box, you can:

• Click the High frequency error Top 5 tab. In the Actions column, click Diagnosis to go to the Error details page. For more information, see View Error Detail.

• Click the Page Error Rate Top 5 tab. In the Actions column for a target page, click Analyze to view the error overview for that page.

Pages by error rate

The Page Ranked by Error Rate tab lists pages where JS errors occurred, sorted by JS error rate in descending order for the selected time range. The list includes the following metrics:

• Page: The page where the JS error occurred.

• Error Rate: The percentage of a page's total page views that contained errors within the selected time range.

• Views: The number of page views for the page.

In the Actions column, click Analyze to view the error overview for that specific page.

Frequent errors

The Frequent Errors tab lists JS errors that occurred in the selected time range, sorted by the number of occurrences in descending order. The list includes the following metrics:

• Error Message: The JS error message captured by ARMS.

• Page: The page where the JS error occurred.

• Errors: The number of occurrences of the JS error.

• Affected Users: The number and percentage of users affected by the JS error.

In the Actions column, click Diagnosis to go to the Error details tab. For more information, see View Error Detail.

Error detail

The Error details tab displays the following information:

• Summary

  • Name

  • Type

  • Time (The time when the JS error was detected)

  • Device

  • Operating System

  • Browser

  • IP

  • Network Type

  • Region

  • Lines

  • Column

  • URL

  • File (The path of the file where the JS error occurred)

  • App Version

• Stack Information: The sequence of function calls that led to the error.

• User Behavior Backtracking: A trace of user actions to help reproduce the error.

On the Error details tab, you can perform the following operations:

• To pinpoint the exact location of a JS error, expand an entry in the Stack Information section and click Select SourceMap File. In the SourceMap File dialog box, select an existing source map or upload a new one, and then click OK.

  ARMS then uses the source map to relate the minified code to the original source, revealing the error's precise location.

• To view the user's journey, see the User Behavior Trace section.

• To view the distribution of the error, click the Error Distribution tab.

User Behavior Trace

The User Behavior Backtracking section on the Error details tab displays the user's journey to help you reproduce the context of an error.

The stack trace section shows the specific error message, such as Error Request failed with status code 504, and the detailed call stack. The behavior log includes event types such as API request, click event, and page navigation, arranged chronologically. Click View Session to see the complete session.

Error distribution

The Error Distribution tab on the JS error diagnostics page shows how a specific JS error is distributed across the following dimensions:

• Time View: Supported only for page-level error distribution.

• Browser View

• Operating System Distribution

• Device Distribution

• Version View

• Geographical View: Statistics are aggregated by province, municipality, or autonomous region on the China view and by country/region on the World view.

On the Error Distribution tab, you can:

• In the Time View section, hover over the distribution chart to display the specific error count.

• In the Operating System Distribution, Device Distribution, Version View, and Browser View sections, hover over a distribution chart to display the specific error count and its percentage.

• In the Geographical View section, on the China or World tab, click the arrow in the Errors column header to sort the table in ascending or descending order.

FAQ

• How do I enable or disable the User Behavior Trace feature?

  This feature is enabled by default. To disable it, add the SDK configuration item behavior: false to the config object. For more information about SDK configurations, see SDK reference.

• After you enable User Behavior Trace, messages printed by console.log during debugging are traced to the ARMS SDK file bl.js instead of their location in the source code. How can you solve this?

  This occurs because ARMS monitors the output in the browser console by overriding methods of the console object, such as log. The solution is as follows:

  • Method 1 (Recommended): Configure blackboxing in Chrome.

    1. Open Chrome. Press Ctrl+Shift+I to open DevTools, and then click the Settings icon.

    2. In the navigation pane on the left of the Settings panel, click Blackboxing. Click Add pattern. In the Pattern field, enter /bl.*\.js$, and then click Add.

  • Method 2: Disable User Behavior Trace by using the SDK configuration item behavior: false.

    <script>
        ! (function ( c , b, d, a ) {
            c [a] || ( c[a] = {});
            c [a].config = {
                pid: "xxxxx",
                imgUrl: "https://arms-retcode.aliyuncs.com/r.png?",
                sendResource: true,
                enableLinkTrace: true,
                behavior: false
            };
            with(b) with(body) with(insertBefore(createElement("script"), firstChild)) setAttribute("crossorigin", "", src = d)
        })(window, document, "https://sdk.rum.aliyuncs.com/v1/bl.js", "__bl");
    </script>

  After you follow the steps above, the messages printed by console.log will point to the corresponding location in the source code.