Web Application Access¶

Update Logs¶

2022.9.29

• The initialization parameter adds isIntakeUrl configuration, which is used to determine whether the data of the corresponding resource needs to be captured according to the requested resource url, and by default they are all captured.

2022.3.10

• New traceType configuration, configure the link tracing tool type, if not configure the default is ddtrace. Currently supports ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, w3c_traceparent 6 data types.
• New allowedTracingOrigins allows to inject a list of all requests with the header headers required by the trace collector. It can be the origin of the request, or it can be a regular.
• The original configuration item allowedDDTracingOrigins and the new configuration item allowedTracingOrigins are part of the same feature configuration. Either one can be configured, but if both are configured, allowedTracingOrigins is given more weight than allowedDDTracingOrigins.

2021.5.20

• In line with the V2 version metric data changes, you need to upgrade the DataKit 1.1.7-rc0 onwards Refer to DataKit Configuration.
• SDK upgrade V2, CDN address changed to https://static.guance.com/browser-sdk/v2/dataflux-rum.js.
• Removed rum_web_page_performance, rum_web_resource_performance, js_error, page metrics data collection, added view, action, long_task, error metrics data collection.
• Initialize the new trackInteractions configuration to enable action (user behavior data) collection, and turn off the default state.

Overview¶

Guance Real User Monitoring can analyze the performance of each Web application in a visual way by collecting the metrics data of each Web application.

Precondition¶

• Installing DataKit (DataKit Installation Documentation)

Web Application Access¶

Login to Guance Console, enter "Real User Monitoring" page, click "New Application" in the upper right corner, enter "Application Name" and customize "Application ID" in the new window, and click "Create" to select the application type to get access.

• Application Name (required): The name of the application used to identify the current implementation of user access monitoring.
• Application ID (required): The unique identification of the application in the current workspace, which is used for SDK data collection and upload matching, and corresponds to the field: app_id after data entry. This field only supports English, numeric, underscore input, up to 48 characters.

import { datafluxRum } from '@cloudcare/browser-rum'

datafluxRum.init({
    applicationId: '<DATAFLUX_APPLICATION_ID>',
    datakitOrigin: '<DATAKIT ORIGIN>',
    env: 'production',
    version: '1.0.0',
    trackInteractions: true,
})

<script>
(function (h, o, u, n, d) {
    h = h[d] = h[d] || {
    q: [],
    onReady: function (c) {
        h.q.push(c)
    }
    }
    d = o.createElement(u)
    d.async = 1
    d.src = n
    n = o.getElementsByTagName(u)[0]
    n.parentNode.insertBefore(d, n)
})(
    window,
    document,
    'script',
    'https://static.guance.com/browser-sdk/v2/dataflux-rum.js',
    'DATAFLUX_RUM'
)
DATAFLUX_RUM.onReady(function () {
    DATAFLUX_RUM.init({
        applicationId: '<DATAFLUX_APPLICATION_ID>',
        datakitOrigin: '<DATAKIT ORIGIN>',
        env: 'production',
        version: '1.0.0',
        trackInteractions: true,
    })
})
</script>

<script
src="https://static.guance.com/browser-sdk/v2/dataflux-rum.js" 
type="text/javascript"
></script>
<script>
window.DATAFLUX_RUM &&
    window.DATAFLUX_RUM.init({
        applicationId: '<DATAFLUX_APPLICATION_ID>',
        datakitOrigin: '<DATAKIT ORIGIN>',
        env: 'production',
        version: '1.0.0',
        trackInteractions: true,
    })
</script>

Configuration¶

Initialization Parameters¶

Questions¶

Reasons for Script Error Messages¶

When using DataFlux Web Rum Sdk for web-side error collection, you often see an error message like Script error. in js_error without any details included.

Possible Reasons for the Above Problem¶

1. The user is using a browser that does not support error catching (very unlikely).
2. The error script file is loaded to the page across the domain. We can't deal with the case that the user's browser doesn't support this; here we mainly address the reasons and solutions for not collecting cross-domain script errors.

In general, script files are loaded using the <script> tag. For homologous script errors, when using the browser's GlobalEventHandlers API, the error message collected will contain detailed error information; when a different source script error occurs, the error message collected will only be the Script error. text, which is controlled by the This is controlled by the browser's homology policy, and is the normal case. For non-homologous scripts we only need to do non-homologous resource sharing (also called HTTP access control / CORS).

Solution¶

1.Script files are stored directly on the server¶

Add Header to static file output on the server

Access-Control-Allow-Origin: *

Add the genus crossorigin="anonymous" to the Script tag where the non-homologous script is located

<script type="text/javascript" src="path/to/your/script.js" crossorigin="anonymous"></script>

2.Script files are stored on CDN¶

Add Header to the CDN settings

Access-Control-Allow-Origin: *

Add the genus crossorigin="anonymous" to the Script tag where the non-homologous script is located

<script type="text/javascript" src="path/to/your/script.js" crossorigin="anonymous"></script>

3.Script files are loaded from third parties¶

Add the genus crossorigin="anonymous" to the Script tag where the non-homologous script is located

<script type="text/javascript" src="path/to/your/script.js" crossorigin="anonymous"></script>

Reference and Extended Reading¶

GlobalEventHandlers.onerror

Cross-Origin Resource Sharing (CORS)

The Script element

CORS settings attributes

Incomplete Collection of Resource Data (ssl, tcp, dns, trans,ttfb)¶

During the data reporting process, some of the resource timing data may be collected incompletely. For example, tcp, dns data is not collected and reported.

Reasons for the Above Problems¶

1. For example, if dns data is not collected, it is possible that this resource request of your application is kept linked with keep-alive, this situation is only when you make the first request, there will be the process of creating the link, after that the requests will keep the same connection and will not recreate the tcp connection. So there will be a situation where the dns data is not available, or the data is 0.
2. The resources of the application are loaded to the page in the form of cross-domain, and your website is not the same source (the main reason).
3. The browser does not support the Performance API (very rare case)

For Cross-Domain Resources¶

1.Resource files are stored directly on the server¶

Add Header to resource file output on the server

Timing-Allow-Origin: *

2. Resource files are stored on CDN¶

Add Header to the CDN settings

Timing-Allow-Origin: *

Reference and Expansion¶

Coping_with_CORS

Resource Timing Standard; W3C Editor's Draft

Resource Timing practical tips; Steve Souders

Measuring network performance with Resource Timing API