[Sentry Replay] the class must be added from html or can be added via the ngOnInit or directive

[expcapitaldev]

for sentry replay we have policy, but can we use directive via

@Directive({
	selector: '[privateData]',
	host: {
		'[attr.data-sentry-mask]': 'true',
	},
})
export class PrivateDataDirective implements OnInit {}

<div privateData>My Private Data here</>

or html should be renderer

<div data-sentry-block >My Private Data here</>

[expcapitaldev]

need to know how exactly your library will get DOM snapshots

[expcapitaldev]

need 100% to know that my privacy data will be hidden

[mydea]

Hi @expcapitaldev ,

you can provide two kinds of privacy configuration: Masking and Blocking.
You can read about them here: https://docs.sentry.io/platforms/javascript/session-replay/privacy/

To summarize:

• Blocking means the whole DOM element is not recorded & replaced with a placeholder of the same dimensions
• Masking means all text content is replaced with *

You can add data-sentry-block or data-sentry-mark attributes to elements you want to mask/block.

In addition, you can also configure more selectors to mask/block like this:

new Replay({
  block: ['.block-this-class', '[block-this-attr]'],
  mask: ['.mask-this-class', '[mask-this-attr]']
})

Note that the defaults (.sentry-block', '.sentry-mask', '[data-sentry-block]', '[data-sentry-mask]') will always apply, no matter what you configure for block and mask.

With masking, the rendered HTML would be e.g.:

<div>
  <div>My name:</div>
  <div data-sentry-mask>Francesco</div>
</div>

becomes

<div>
  <div>My name:</div>
  <div data-sentry-mask>*********</div>
</div>

With blocking, it would become:

<div>
  <div>My name:</div>
  <div data-sentry-block></div> <!-- This would be sized to take up the same space as it did originally -->
</div>

All of this masking/blocking happens client side, so data is already sent masked/blocked to the server. You can use any CSS selectors for mask/block, so also something like block: ['form > .secret-field > input'].

I hope this helped understand how this works!

[expcapitaldev]

@mydea thanks a lot!
all is clear but my question with next:

1. if rrweb-io use MutationOBserver and take snapshots from DOM from angular side we need 100% to add DOM element with provided class/atributes, and how can say me that

@Directive({
	selector: '[privateData]',
	host: {
		'[attr.data-sentry-mask]': 'true',
	},
})
export class PrivateDataDirective implements OnInit {}

should works correctly 100% with my private data because angular as I understood can add element to DOM and only after that add my class/attribute from directive

[Lms24]

Hi @expcapitaldev if I understand you correctly, you're worried that for a very short period of time, text you actually want to mask would be visible or transmitted unmasked because your PrivateDataDirective applies the data-sentry-mask attribute too late, correct?

I quickly tried out your directive in an Angular 15 test app and I inspected the sent replay recording data: It appears that everything is masked from the start. As you said, rrweb starts the recording with a full DOM checkout but at this time, the directive already ran and the text is masked in the payload. Here's a partial example of a full DOM checkout with two elements:

<p privateData>This text should appear masked</p>
<p data-sentry-mask>This text should also appear masked</p>

[
  {
    "type": 2,
    "tagName": "p",
    "attributes": {
      "_ngcontent-puj-c17": "",
      "privatedata": "",
      "data-sentry-mask": "true"
    },
    "childNodes": [
      {
        "type": 3,
        "textContent": "**** **** ****** ****** ******",
        "id": 40
      }
    ],
    "id": 39
  },
  {
    "type": 2,
    "tagName": "p",
    "attributes": {
      "_ngcontent-puj-c17": "",
      "data-sentry-mask": ""
    },
    "childNodes": [
      {
        "type": 3,
        "textContent": "**** **** ****** **** ****** ******",
        "id": 42
      }
    ],
    "id": 41
  }
]

So I think you're good to use this directive. If you want to ensure that it also works a 100% in your app, I'd recommend checking the payloads yourself, just to be 100% sure. To do this, set useCompression: false in your Replay()constructor options and inspect the request payloads sent to Sentry in your browser's dev tools.

If you don't mind me asking, why do you prefer the directive over just adding the data-sentry-mask attribute directly? Basically, the directive is just a wrapper around that and therefore adds a tiny performance overhead.

Hope this answers your question!

[expcapitaldev]

yep, thank you a lot , will check with useCompression too

[Lms24]

Just to add to this, as long as your PrivateDataDirective actually adds this attribute (or the class) to the element to which you apply the directive, you should be good to use it as well. It's probably best to record a few sample replays to try it out and make sure ;)

[expcapitaldev]

thanks!