Application Real-Time Monitoring Service:JS error diagnostics

Interact with the error trend chart

• View data at a point in time -- Hover over the curve to see the error count, error rate, and affected user count at that moment.

• Open Exception Insight -- Hover over a turning point on the curve until the pointer changes to a hand icon, then click. The Exception Insight dialog box opens. See Exception Insight for details.

• Zoom in on a time range -- Click and drag to select an area on the chart. The view zooms in to show the selected range. Click Reset Zoom in the upper-right corner to restore the original view.

Summary

The Summary section includes the following fields:

Stack trace

The Stack Info section displays the call stack at the time of the error. Use it to trace the error back to the exact function and line of code that failed.

Map minified stack traces with source maps

Minified or bundled JS files produce stack traces that are difficult to read. Upload a source map file to map these traces back to your original source code.

1. In the Stack Info section, click the triangle icon on the left side of a stack frame to expand it.

2. Click Choose Sourcemap.

3. In the Sourcemap File dialog box, select an existing source map file or upload a new one.

4. Click OK.

ARMS uses the source map file to resolve the minified stack trace to the exact file, function, and line in your original source code.

User behavior trace

The User Behavior Trace section records a timeline of user actions leading up to the error. Review this timeline to reconstruct the steps that triggered the error.

User behavior backtracking is enabled by default. To disable it, set behavior: false in the SDK configuration. For more information, see SDK reference.

Error distribution

Click the Error View tab to see how a specific JS error is distributed across different dimensions:

On the Error View tab:

• In the Time View section, hover over the chart to see error counts at each time point.

• In the Browser View, OS View, Device View, and Version View sections, hover over the chart to see error counts and percentages.

• In the Geographical View section, on the China View or World View tab, click the arrows next to the Errors column header to sort by ascending or descending order.

How do I enable or disable user behavior backtracking?

User behavior backtracking is enabled by default. To disable it, add behavior: false to the SDK configuration:

<script>
    !(function (c, b, d, a) {
        c[a] || (c[a] = {});
        c[a].config = {
            pid: "<your-pid>",
            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://retcode.alicdn.com/retcode/bl.js", "__bl");
</script>

Replace <your-pid> with your actual application PID.

For the full list of SDK configuration items, see SDK reference.

console.log shows errors in bl.js instead of my source code. How do I fix this?

ARMS rewrites console.log to capture browser console output as part of user behavior tracking. This causes stack traces in the console to point to the ARMS SDK file (bl.js) rather than your application code.

Solution 1 (recommended): Set up blackboxing in Chrome DevTools

1. Open Chrome, press Ctrl+Shift+I to open Developer Tools, then click the Settings icon.

2. In the left-side navigation pane of the Settings panel, click Blackboxing.

3. Click Add pattern.

4. In the Pattern field, enter /bl.*\.js$, then click Add.

Chrome now skips bl.js frames in stack traces, showing your actual source code instead.

Solution 2: Disable user behavior backtracking

Set behavior: false in the SDK configuration to stop ARMS from rewriting console.log. See the previous FAQ for the configuration example.