Access to Session Replay¶

Open Session Replay¶

Replace the NPM package with > 3.0.0 version, or replace the original CDN link with https://static.guance.com/browser-sdk/v3/dataflux-rum.js. by using your previous SDK introduction. Session Replay Record data is not automatically collected after the SDK initializes init(), and you need to execute startSessionReplayRecording to start data collection, which is useful for collecting Session Replay Record data only for specific situations, such as:

 // Collect only the operation data after the user logs in
 if (user.isLogin()) {
    DATAFLUX_RUM.startSessionReplayRecording();
 }

NPM¶

Introduce the @cloudcare/browser-rum package, and guarantee the version of @cloudcare/browser-rum is over 3.0.0, and if you want to start recording, after initialization, execute datafluxRum.startSessionReplayRecording().

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

datafluxRum.init({
    applicationId: '<DATAFLUX_APPLICATION_ID>',
    datakitOrigin: '<DATAKIT ORIGIN>',
    service: 'browser',
    env: 'production',
    version: '1.0.0',
    sessionSampleRate: 100,
    sessionReplaySampleRate: 100,
    trackInteractions: true,
});

datafluxRum.startSessionReplayRecording();

CDN¶

Replace the original CDN address https://static.guance.com/browser-sdk/v2/dataflux-rum.js with https://static.guance.com/browser-sdk/v3/dataflux-rum.js, and execute DATAFLUX_RUM.startSessionReplayRecording() after executing DATAFLUX_RUM.init().

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

window.DATAFLUX_RUM && window.DATAFLUX_RUM.startSessionReplayRecording()
</script>

Notes¶

Some HTML elements are not visible during replay

Session Replay does not support the following HTML elements during replay: iframes, videos, audios, or canvases. Session Replay also does not support Web Components and Shadow DOM.

FONT 或 IMG 无法正确呈现

Session Replay is not a video, but it reconstructs iframes based on DOM snapshots. Therefore, replay relies on various static resources of the page, such as fonts and images.

There are several reasons why static resources may not be available during replay:

• The static resource no longer exists, for example, it was part of a previous deployment.
• The static resource is not accessible, for example, it requires authentication, or the resource can only be accessed from an internal network.

• The static resource is blocked by the browser due to CORS (typically for web fonts).

  • During replay, since it is based on the guance.com sandbox environment for the iframe, if certain static resources do not have authorization from a specific domain, your browser will block the request.
  • Allow guance.com to access any font or image static resources that your website depends on through the Access-Control-Allow-Origin header, to ensure access to these resources for replay.

  For more information, see Cross-Origin Resource Sharin。

CSS style 未正确应用或者鼠标悬停事件未重放

Unlike fonts and images, Session Replay Record attempts to bundle various applied CSS rules as part of the recorded data using the CSSStyleSheet interface. If it cannot be executed, it falls back to recording the link to the CSS file.

To obtain proper mouse hover support, CSS rules must be accessible through the CSSStyleSheet interface.

If the style file is hosted on a different domain than the webpage, access to the CSS rules will be subject to the browser's cross-origin security check, and the browser must load the CORS-enabled style file with the crossorigin attribute specified.

For example, if your application is hosted on the example.com domain and relies on a CSS file on assets.example.com through the link element, the crossorigin attribute should be set to anonymous.

<link rel="stylesheet" crossorigin="anonymous"
      href="https://assets.example.com/style.css”>

Furthermore, authorize the example.com domain in assets.example.com. This allows the resource files to be correctly loaded by setting the Access-Control-Allow-Origin header.

More Reading¶