[Replay] Replay not sending on errors

[davidflypei]

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?

Self-hosted/on-premise

Which package are you using?

@sentry/browser

SDK Version

7.24.1

Framework Version

No response

Link to Sentry event

No response

Steps to Reproduce

<script src="https://browser.sentry-cdn.com/7.24.1/bundle.tracing.min.js" integrity="sha384-xKLOnjJfdV4JM9nuAF86HQTBBQXJRhRYRqSR21KCAENOj3ldIBc10a4oq8wWZ3/R" crossorigin="anonymous"></script>
<script src="https://browser.sentry-cdn.com/7.24.1/captureconsole.min.js" integrity="sha384-yK9cwgbRIq3vYQnne4GeTRvPKHLSFh3Ak8ZD9XU992sLYom9dgYy34D43rFvjpRq" crossorigin="anonymous"></script>
<script src="https://browser.sentry-cdn.com/7.24.1/replay.min.js" integrity="sha384-ifYtT/moOdbKa0RUX6esCLi2AU6bNBHWE13ESYZ4Q2j/RFVx1iuIcYadvhEbGMjF" crossorigin="anonymous"></script>
<script>
 Sentry.init({
 dsn: "DSN",
 environment: "HOSTNAME",
 integrations: [
 new Sentry.BrowserTracing(),
 new Sentry.Integrations.Replay({
 maskAllInputs: false,
 }),
 new Sentry.Integrations.CaptureConsole(
 {
 levels: ['error']
 })
 ],
 sampleRate: 1,
 replaysOnErrorSampleRate: 1.0,
 replaysSessionSampleRate: 1.0,
 tracesSampleRate: 0.25,
 });
</script>

This is not sending a replay with the error. I know it's not in the UI yet, or at least I'm assuming it isn't. Just looking at the network tab in firefox.

Expected Result

It would send another request to sentry with the replay when an error occurs.

Actual Result

No replay data is sent when an error occurs. A replay ID is attached to the error/event. But nothing is sent for the replay data. If you set all the sampling to 1 it will send a replay for the transaction at the start but if you trigger an error it won't send the replay.

[davidflypei]

Here is the event that is sent when the error occurs.

Event

[
 {
 "event_id": "d811535b0ebf4a28af095765ba10b30d",
 "sent_at": "2022-12-07T19:42:42.252Z",
 "sdk": {
 "name": "sentry.javascript.browser",
 "version": "7.24.1"
 }
 },
 {
 "type": "event"
 },
 {
 "exception": {
 "values": [
 {
 "type": "ReferenceError",
 "value": "thing is not defined",
 "stacktrace": {
 "frames": [
 {
 "filename": "http://local.greathobbies.com:8080/productinfo/?prod_id=DUM1233",
 "function": "?",
 "in_app": true,
 "lineno": 1573,
 "colno": 18
 },
 {
 "filename": "https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js",
 "function": "f.fn[b]",
 "in_app": true,
 "lineno": 3,
 "colno": 11851
 },
 {
 "filename": "https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js",
 "function": "on",
 "in_app": true,
 "lineno": 3,
 "colno": 10195
 },
 {
 "filename": "https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js",
 "function": "each",
 "in_app": true,
 "lineno": 2,
 "colno": 8304
 },
 {
 "filename": "https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js",
 "function": "each",
 "in_app": true,
 "lineno": 2,
 "colno": 11776
 },
 {
 "filename": "https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js",
 "function": "on/<",
 "in_app": true,
 "lineno": 3,
 "colno": 10219
 },
 {
 "filename": "https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js",
 "function": "add",
 "in_app": true,
 "lineno": 3,
 "colno": 1154
 },
 {
 "filename": "https://browser.sentry-cdn.com/7.24.1/replay.min.js",
 "function": "x/</</<",
 "in_app": true,
 "lineno": 2,
 "colno": 3328
 },
 {
 "filename": "https://browser.sentry-cdn.com/7.24.1/bundle.tracing.min.js",
 "function": "G/</</<",
 "in_app": true,
 "lineno": 2,
 "colno": 6657
 },
 {
 "filename": "https://browser.sentry-cdn.com/7.24.1/bundle.tracing.min.js",
 "function": "EventListener.handleEvent*le/</<",
 "in_app": true,
 "lineno": 2,
 "colno": 50288
 },
 {
 "filename": "https://browser.sentry-cdn.com/7.24.1/bundle.tracing.min.js",
 "function": "sentryWrapped",
 "in_app": true,
 "lineno": 2,
 "colno": 37387
 },
 {
 "filename": "https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js",
 "function": "i",
 "in_app": true,
 "lineno": 3,
 "colno": 709
 },
 {
 "filename": "https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js",
 "function": "dispatch",
 "in_app": true,
 "lineno": 3,
 "colno": 4816
 },
 {
 "filename": "http://local.greathobbies.com:8080/productinfo/?prod_id=DUM1233",
 "function": "?",
 "in_app": true,
 "lineno": 1574,
 "colno": 5
 }
 ]
 },
 "mechanism": {
 "type": "instrument",
 "handled": true,
 "data": {
 "function": "addEventListener",
 "handler": "i",
 "target": "EventTarget"
 }
 }
 }
 ]
 },
 "level": "error",
 "event_id": "d811535b0ebf4a28af095765ba10b30d",
 "platform": "javascript",
 "timestamp": 1670442162.249,
 "environment": "6f74c67353c8",
 "sdk": {
 "integrations": [
 "InboundFilters",
 "FunctionToString",
 "TryCatch",
 "Breadcrumbs",
 "GlobalHandlers",
 "LinkedErrors",
 "Dedupe",
 "HttpContext",
 "BrowserTracing",
 "Replay",
 "CaptureConsole"
 ],
 "name": "sentry.javascript.browser",
 "version": "7.24.1",
 "packages": [
 {
 "name": "npm:@sentry/browser",
 "version": "7.24.1"
 }
 ]
 },
 "contexts": {
 "Replays": {
 "it": 1
 }
 },
 "breadcrumbs": [
 {
 "timestamp": 1670442155.209,
 "category": "fetch",
 "data": {
 "method": "GET",
 "url": "https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?token=669cc4ef36",
 "__span": "8fae50ca9e4c0e8b",
 "status_code": 200
 },
 "type": "http"
 },
 {
 "timestamp": 1670442155.257,
 "category": "fetch",
 "data": {
 "method": "GET",
 "url": "https://ka-f.fontawesome.com/releases/v5.15.4/css/free-v4-shims.min.css?token=669cc4ef36",
 "__span": "84aa923bfa59bca8",
 "status_code": 200
 },
 "type": "http"
 },
 {
 "timestamp": 1670442155.257,
 "category": "fetch",
 "data": {
 "method": "GET",
 "url": "https://ka-f.fontawesome.com/releases/v5.15.4/css/free-v4-font-face.min.css?token=669cc4ef36",
 "__span": "95ac333f1f7f75fa",
 "status_code": 200
 },
 "type": "http"
 },
 {
 "timestamp": 1670442156.979,
 "category": "xhr",
 "data": {
 "method": "POST",
 "url": "https://www.google-analytics.com/j/collect?v=1&_v=j98&a=42735948&t=pageview&_s=1&dl=http%3A%2F%2Flocal.greathobbies.com%2Fproductinfo%2F%3Fprod_id%3DDUM1233&ul=en-us&de=UTF-8&dt=DUM1233%20-%20US%20Navy%20PT-109%20-%2033%22%20By%20DUMAS%20%40%20Great%20Hobbies&sd=24-bit&sr=1920x1080&vp=1920x891&je=0&_u=QACAAUALAAAAACAAI~&jid=866525508&gjid=456022285&cid=297214427.1651167700&tid=UA-11143483-1&_gid=1255318881.1670419766&_r=1&gtm=2oubu0&z=1773000426",
 "status_code": 200
 },
 "type": "http"
 },
 {
 "timestamp": 1670442157.668,
 "category": "xhr",
 "data": {
 "method": "POST",
 "url": "https://stats.g.doubleclick.net/j/collect?t=dc&aip=1&_r=3&v=1&_v=j98&tid=UA-11143483-1&cid=297214427.1651167700&jid=866525508&gjid=456022285&_gid=1255318881.1670419766&_u=QACAAUAKAAAAACAAI~&z=2198106",
 "status_code": 200
 },
 "type": "http"
 },
 {
 "timestamp": 1670442158.231,
 "category": "console",
 "data": {
 "arguments": [
 "Cannot get CSS styles from text's parentNode. Error: SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet",
 {
 "__sn": "[Object]"
 }
 ],
 "logger": "console"
 },
 "level": "warning",
 "message": "Cannot get CSS styles from text's parentNode. Error: SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet [object Text]"
 },
 {
 "timestamp": 1670442158.253,
 "category": "console",
 "data": {
 "arguments": [
 "Cannot get CSS styles from text's parentNode. Error: SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet",
 {
 "__sn": "[Object]"
 }
 ],
 "logger": "console"
 },
 "level": "warning",
 "message": "Cannot get CSS styles from text's parentNode. Error: SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet [object Text]"
 },
 {
 "timestamp": 1670442158.36,
 "category": "xhr",
 "data": {
 "method": "GET",
 "url": "http://local.greathobbies.com:8080/status/legend_inventory_status.php",
 "status_code": 200
 },
 "type": "http"
 }
 ],
 "request": {
 "url": "http://local.greathobbies.com:8080/productinfo/?prod_id=DUM1233",
 "headers": {
 "User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:108.0) Gecko/20100101 Firefox/108.0"
 }
 },
 "tags": {
 "replayId": "c6deac23902741fc84c1090934d8df47"
 },
 "extra": {
 "arguments": [
 {
 "type": "click",
 "target": "div#content > div.productinfo > div.productinfo > div.prod_specs",
 "currentTarget": "div#content > div.productinfo > div.productinfo > div.prod_specs",
 "isTrusted": true
 }
 ]
 }
 }
]

[billyvg]

@davidflypei When you're testing it, do you have replaysSessionSampleRate set to 0? If it is sampled as a session replay, it will continuously record the session and will not react to errors specifically.

[davidflypei]

@davidflypei When you're testing it, do you have replaysSessionSampleRate set to 0? If it is sampled as a session replay, it will continuously record the session and will not react to errors specifically.

What I have there is what I'm testing with. Other then the DSN and hostname of course. So replaysSessionSampleRate is set to 1.0. If I'm reading what you are saying correctly, if it's set to 0 it will send a replay when there is an error but it is set to anything else it won't send a replay on a error?

[mydea]

Basically sampling works as follows:

1. First we check the replaysSessionSampleRate. If that matches, the session will be fully recorded & sent to Sentry
   a. In your case, as this is 1, this means every session will be fully recorded and sent
2. Only if 1. does not match, we check replaysOnErrorSampleRate. If that matches, we always keep the last 60 seconds of replay, and if an error occurs we send this.
   a. In your case, this will never happen because everything is already sampled by replaysSessionSampleRate

Just to be clear, are any replays sent?

[sawin-dennis]

Same setup and same issue here but on SDK v7.24.2:

 <script src="https://browser.sentry-cdn.com/7.24.2/bundle.tracing.min.js"
 integrity="sha384-Nb9Pkx/WZV5kujSYUYEjIqArDFhw1LX9tsEjSylkWLAvjP4kgIQZ47O98EQfeUwX"
 crossorigin="anonymous"
 ></script>
 <script src="https://browser.sentry-cdn.com/7.24.2/replay.min.js"
 integrity="sha384-peg5id/SrU4JhHmiaKfF8HJg6EqD7xxsKhPEVahgyx5WJhgmvlf8p0CO0AhIWppm"
 crossorigin="anonymous"
 ></script>

 <script>
 Sentry.onLoad(function () {
 Sentry.init({
 dsn: "***",
 environment: '{{ENV_TYPE}}',
 release: '{{RELEASE_VERSION}}',
 tracesSampleRate: 0.25,
 replaysSessionSampleRate: 1, // tried both 0.1 and 1.0
 replaysOnErrorSampleRate: 1.0,
 integrations: [
 new Sentry.BrowserTracing(),
 new Sentry.Integrations.Replay({
 })
 ],
 tracingOrigins: ['{{ BASE_URL }}'],
 beforeSend(event) {
 if (event.exception.values[0].value === "$(...).cookieBar is not a function") {
 return null;
 }
 return event;
 }
 });
 });
 </script>

<script type="text/javascript">
myUndefinedFunction();
</script>

-->

Seems even though all replays should be sent, none are actually being sent – regardless of with or without errors.

We tested both on a local and a remote env, but just to double check – are there any restrictions regarding localhost?
Also here a replayid is attached but the relevant replay nowhere to be found:

[mydea]

Thank you for the information!
Could you try one more thing, that is setting replaysSessionSampleRate to 0 (but keep replaysOnErrorSampleRate=1)? This way, it should only ever send replays on errors.

[sawin-dennis]

@mydea Same outcome from local also after adjusting replaysSessionSampleRate to 0

[Lms24]

Can you try loading the debug CDN bundles and setting debug: true in your Sentry.init config:

<script src="https://browser.sentry-cdn.com/7.24.2/bundle.tracing.debug.min.js" integrity="sha384-EIFdnwadrD1cOpzkLtFBsbYZN6mgr3No4E+IRHNNiwpNYM/LJeZ0uLtxUgBmzeYl" crossorigin="anonymous"></script>
<script src="https://browser.sentry-cdn.com/7.24.2/replay.debug.min.js" integrity="sha384-FytmbIOn4Fu7KM6oFQZ2Y0lx1juPs0k6m1SEolYYu9xeRAgzw29yvtxjdCMfaWFh" crossorigin="anonymous"></script>

This should add debug output in the dev console. Can you check if there's some kind of warning or error being logged to the console?

[davidflypei]

This is what I'm getting.

Log

Navigated to http://local.greathobbies.com:8080/
Sentry Logger [log]: No outcomes to send logger.js:60
GET - http://local.greathobbies.com:8080/enews/national/2022/20221209-gh-dec-09/images/assets/header.jpg
[HTTP/1.1 404 Not Found 1ms]

GET - http://local.greathobbies.com:8080/enews/national/2022/20221201-gh-dec-01/images/assets/header.jpg
[HTTP/1.1 404 Not Found 1ms]

GET - http://local.greathobbies.com:8080/enews/national/2022/20221202-gh-dec-02/images/assets/header.jpg
[HTTP/1.1 404 Not Found 0ms]

GET - http://local.greathobbies.com:8080/enews/national/2022/20221208-hzn-holidayroundup/images/assets/header.jpg
[HTTP/1.1 404 Not Found 1ms]

Sentry Logger [log]: Integration installed: InboundFilters logger.js:60
Sentry Logger [log]: Integration installed: FunctionToString logger.js:60
Sentry Logger [log]: Integration installed: TryCatch logger.js:60
Sentry Logger [log]: Integration installed: Breadcrumbs logger.js:60
Sentry Logger [log]: Global Handler attached: onerror logger.js:60
Sentry Logger [log]: Global Handler attached: onunhandledrejection logger.js:60
Sentry Logger [log]: Integration installed: GlobalHandlers logger.js:60
Sentry Logger [log]: Integration installed: LinkedErrors logger.js:60
Sentry Logger [log]: Integration installed: Dedupe logger.js:60
Sentry Logger [log]: Integration installed: HttpContext logger.js:60
Sentry Logger [log]: [Tracing] Starting pageload transaction on scope logger.js:60
Sentry Logger [log]: Setting idle transaction on scope. Span ID: bd75d64debcd377f logger.js:60
Sentry Logger [log]: [Tracing] Discarding transaction because it's not included in the random sample (sampling rate = 0.25) logger.js:60
Sentry Logger [log]: Integration installed: BrowserTracing logger.js:60
Sentry Logger [log]: Integration installed: Replay logger.js:60
Sentry Logger [log]: [Replay] Using compression worker logger.js:60
Sentry Logger [error]: TypeError: can't access property "call", n is undefined
 n replay.ts:1
 d replay.ts:1111
 Mn replay.ts:1
 d replay.ts:1109
 sendReplayRequest replay.ts:1108
 sendReplay replay.ts:1200
 runFlush replay.ts:1008
 flush replay.ts:1050
 _t replay.ts:129
 Lodash 3
 flushImmediate replay.ts:1085
 conditionalFlush replay.ts:944
 doChangeToBackgroundTasks replay.ts:705
 handleWindowBlur replay.ts:581
 sentryWrapped helpers.js:90
 me trycatch.js:215
 Y instrument.js:486
 addListeners replay.ts:309
 start replay.ts:172
 start integration.ts:157
 setupOnce integration.ts:143
 sentryWrapped helpers.js:90
 setTimeout handler*le/Sentry trycatch.js:105
 setupOnce integration.ts:143
 K integration.js:83
 K integration.js:79
 setupIntegrations baseclient.js:218
 bindClient hub.js:64
 init sdk.js:33
 init sdk.js:118
 <anonymous> (index):20
logger.js:60
 k</</n[e]/< logger.js:60
 x logger.js:34
 e logger.js:59
 sendReplay replay.ts:1210
 runFlush replay.ts:1008
 flush replay.ts:1050
 _t replay.ts:129
 Lodash 3
 flushImmediate replay.ts:1085
 conditionalFlush replay.ts:944
 doChangeToBackgroundTasks replay.ts:705
 handleWindowBlur replay.ts:581
 sentryWrapped helpers.js:90
 (Async: EventListener.handleEvent)
 me trycatch.js:215
 Y instrument.js:486
 addListeners replay.ts:309
 start replay.ts:172
 start integration.ts:157
 setupOnce integration.ts:143
 sentryWrapped helpers.js:90
 (Async: setTimeout handler)
 Sentry trycatch.js:105
 setupOnce integration.ts:143
 K integration.js:83
 K integration.js:79
 setupIntegrations baseclient.js:218
 bindClient hub.js:64
 init sdk.js:33
 init sdk.js:118
 <anonymous> (index):20
Sentry Logger [log]: No outcomes to send logger.js:60
Sentry Logger [log]: [Tracing] Transaction: cancelled -> since tab moved to the background, op: pageload logger.js:60
Sentry Logger [log]: [Tracing] No active IdleTransaction logger.js:60
Sentry Logger [log]: [Tracing] Discarding transaction because its trace was not chosen to be sampled. logger.js:60
Sentry Logger [log]: Adding outcome: "sample_rate:transaction" logger.js:60
GET - http://local.greathobbies.com:8080/enews/national/2022/20221209-gh-dec-09/images/assets/header.jpg
[HTTP/1.1 404 Not Found 0ms]

GET - http://local.greathobbies.com:8080/enews/national/2022/20221201-gh-dec-01/images/assets/header.jpg
[HTTP/1.1 404 Not Found 0ms]

GET - http://local.greathobbies.com:8080/enews/national/2022/20221202-gh-dec-02/images/assets/header.jpg
[HTTP/1.1 404 Not Found 0ms]

GET - http://local.greathobbies.com:8080/enews/national/2022/20221208-hzn-holidayroundup/images/assets/header.jpg
[HTTP/1.1 404 Not Found 0ms]

Sentry Logger [error]: TypeError: can't access property "call", n is undefined
 n replay.ts:1
 d replay.ts:1111
 Mn replay.ts:1
 d replay.ts:1109
 sendReplayRequest replay.ts:1108
 sendReplay replay.ts:1200
 sendReplay replay.ts:1230
 sentryWrapped helpers.js:90
 setTimeout handler*le/Sentry trycatch.js:105
 sendReplay replay.ts:1228
 sendReplay replay.ts:1227
 runFlush replay.ts:1008
 flush replay.ts:1050
 _t replay.ts:129
 Lodash 3
 flushImmediate replay.ts:1085
 conditionalFlush replay.ts:944
 doChangeToBackgroundTasks replay.ts:705
 handleWindowBlur replay.ts:581
 sentryWrapped helpers.js:90
 me trycatch.js:215
 Y instrument.js:486
 addListeners replay.ts:309
 start replay.ts:172
 start integration.ts:157
 setupOnce integration.ts:143
 sentryWrapped helpers.js:90
 setTimeout handler*le/Sentry trycatch.js:105
 setupOnce integration.ts:143
 K integration.js:83
 K integration.js:79
 setupIntegrations baseclient.js:218
 bindClient hub.js:64
 init sdk.js:33
 init sdk.js:118
 <anonymous> (index):20
logger.js:60
Sentry Logger [error]: TypeError: can't access property "call", n is undefined
 n replay.ts:1
 d replay.ts:1111
 Mn replay.ts:1
 d replay.ts:1109
 sendReplayRequest replay.ts:1108
 sendReplay replay.ts:1200
 sendReplay replay.ts:1230
 sentryWrapped helpers.js:90
 setTimeout handler*le/Sentry trycatch.js:105
 sendReplay replay.ts:1228
 sendReplay replay.ts:1227
 sendReplay replay.ts:1230
 sentryWrapped helpers.js:90
 setTimeout handler*le/Sentry trycatch.js:105
 sendReplay replay.ts:1228
 sendReplay replay.ts:1227
 runFlush replay.ts:1008
 flush replay.ts:1050
 _t replay.ts:129
 Lodash 3
 flushImmediate replay.ts:1085
 conditionalFlush replay.ts:944
 doChangeToBackgroundTasks replay.ts:705
 handleWindowBlur replay.ts:581
 sentryWrapped helpers.js:90
 me trycatch.js:215
 Y instrument.js:486
 addListeners replay.ts:309
 start replay.ts:172
 start integration.ts:157
 setupOnce integration.ts:143
 sentryWrapped helpers.js:90
 setTimeout handler*le/Sentry trycatch.js:105
 setupOnce integration.ts:143
 K integration.js:83
 K integration.js:79
 setupIntegrations baseclient.js:218
 bindClient hub.js:64
 init sdk.js:33
 init sdk.js:118
 <anonymous> (index):20
logger.js:60

[Lms24]

Okay, so I managed to reproduce it with the minified bundles. To me it seems like it might be related to minification because if I use the unminified bundles (bundle.tracing.js and replay.js), I don't get these errors.
@davidflypei could you confirm that the unminified version works for you, too? I'll take a look in the meantime at what might be going wrong during minification.