"Uncaught TypeError: Cannot read properties of null (reading 'replace')" from replay mutation observer

[joshkel]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using? If you use the CDN bundles, please specify the exact bundle (e.g. bundle.tracing.min.js) in your SDK setup.

@sentry/react

SDK Version

7.38.0

Framework Version

18.2.0

Link to Sentry event

No response

SDK Setup

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

  replaysSessionSampleRate: 1.0,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    new Sentry.Breadcrumbs({
      dom: {
        serializeAttribute: ["id", "data-testid", "aria-label"]
      }
    }),
    new Sentry.Replay({
      maskAllText: true,
      blockAllMedia: true
    })
  ]
});

Steps to Reproduce

Clear the aria-label DOM attribute.

See https://codesandbox.io/s/sentry-mutation-observer-zy6bkf for an example: Click the "Test" button to set the aria-label attribute on the checkbox (which works), then click it again to clear it (which causes Sentry to throw an error).

Expected Result

No errors

Actual Result

Sentry logs an error similar to the following:

TypeError
Cannot read properties of null (reading 'replace')
    at defaultMaskFn (https://zy6bkf.csb.app/node_modules/
sentry/replay/esm/index.js:76:14
    at transformAttribute (https://zy6bkf.csb.app/node_modules/
sentry/replay/esm/index.js:246:45
    at MutationBuffer.processMutation (https://zy6bkf.csb.app/node_modules/
sentry/replay/esm/index.js:1389:50
    at MutationBuffer.processMutations (https://zy6bkf.csb.app/node_modules/
sentry/replay/esm/index.js:1168:17
    at MutationObserver.rrwebWrapped (https://zy6bkf.csb.app/node_modules/
sentry/replay/esm/index.js:1502:14

Or, as seen in my minified app:

134.a8595ef1.js:2 Uncaught TypeError: Cannot read properties of null (reading 'replace')
    at D (134.a8595ef1.js:2:2557492)
    at B (134.a8595ef1.js:2:2559414)
    at 134.a8595ef1.js:2:2580494
    at Array.forEach (<anonymous>)
    at we.processMutations (134.a8595ef1.js:2:2576096)
    at MutationObserver.<anonymous> (134.a8595ef1.js:2:2582528)

The problem appears to be within rrweb; if the mutation event is from the attribute being removed, then the new attribute value is null, but mutation.ts assumes that it's always non-null:

https://github.com/getsentry/rrweb/blob/1.103.0/packages/rrweb/src/record/mutation.ts#L479

https://github.com/getsentry/rrweb/blob/1.103.0/packages/rrweb/src/record/mutation.ts#L546

[minnyww]

can u resolve this issue now ?

[Lms24]

Hi @joshkel thanks for reporting and for the great reproduction! We're working on a fix. It will be released with the next SDK release.