Replay: canvas error not caught by CanvasManager errorHandler

[bruno-garcia]

We recently got a patch for Replay canvas that should catch rrweb errors in the canvas manager:

• https://github.com/getsentry/sentry-javascript/pull/10796/files

it's on version 8.0.0-alpha.2 as well as backported to 7.104.0

However, a customer on version 7.105.0 using the CDN observed the following error in their Sentry project:

No user code is found on the stack trace:

Raw:

"exception": {
"values": [
{
"type": "TypeError",
"value": "Cannot read properties of undefined (reading 'timestamp')",
"stacktrace": {
"frames": [
{
"function": "worker.onmessage",
"module": "@sentry-internal/rrweb/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager",
"filename": "../../../../node_modules/@sentry-internal/rrweb/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js",
"abs_path": "https://browser.sentry-cdn.com/node_modules/@sentry-internal/rrweb/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js",
"lineno": 111,
"colno": 18,
"pre_context": [
"            const { id } = data;",
"            snapshotInProgressMap.set(id, false);",
"            if (!('base64' in data))",
"                return;",
"            const { base64, type, width, height } = data;"
],
"context_line": "            this.mutationCb({",
"post_context": [
"                id,",
"                type: CanvasContext['2D'],",
"                commands: [",
"                    {",
"                        property: 'clearRect',"
],
"in_app": false,
"data": {
"sourcemap": "https://browser.sentry-cdn.com/7.105.0/replay-canvas.min.js.map",
"resolved_with": "scraping",
"symbolicated": true
}
},
{
"function": "canvasManager.mutationCb",
"module": "replay/build/npm/esm/index",
"filename": "../../../replay/build/npm/esm/index.js",
"abs_path": "https://browser.sentry-cdn.com/replay/build/npm/esm/index.js",
"lineno": 3679,
"colno": 38,
"pre_context": [
"    }",
"    const processedNodeManager = new ProcessedNodeManager();",
"    const canvasManager = _getCanvasManager(getCanvasManager, {",
"        mirror,",
"        win: window,"
],
"context_line": "        mutationCb: (p) => wrappedEmit(wrapEvent({",
"post_context": [
"            type: EventType.IncrementalSnapshot,",
"            data: {",
"                source: IncrementalSource.CanvasMutation,",
"                ...p,",
"            },"
],
"in_app": true,
"data": {
"sourcemap": "https://browser.sentry-cdn.com/7.105.0/bundle.tracing.replay.min.js.map",
"resolved_with": "scraping",
"symbolicated": true
}
},
{
"function": "wrappedEmit",
"module": "replay/build/npm/esm/index",
"filename": "../../../replay/build/npm/esm/index.js",
"abs_path": "https://browser.sentry-cdn.com/replay/build/npm/esm/index.js",
"lineno": 3618,
"colno": 38,
"pre_context": [
"                return;",
"            }",
"            incrementalSnapshotCount++;",
"            const exceedCount = checkoutEveryNth && incrementalSnapshotCount >= checkoutEveryNth;",
"            const exceedTime = checkoutEveryNms &&"
],
"context_line": "                e.timestamp - lastFullSnapshotEvent.timestamp > checkoutEveryNms;",
"post_context": [
"            if (exceedCount || exceedTime) {",
"                takeFullSnapshot(true);",
"            }",
"        }",
"    };"
],
"in_app": true,
"data": {
"sourcemap": "https://browser.sentry-cdn.com/7.105.0/bundle.tracing.replay.min.js.map",
"resolved_with": "scraping",
"symbolicated": true
}
}
]
},
"raw_stacktrace": {
"frames": [
{
"function": "u.onmessage",
"filename": "[/7.105.0/replay-canvas.min.js](https://us.sentry.io/7.105.0/replay-canvas.min.js)",
"abs_path": "https://browser.sentry-cdn.com/7.105.0/replay-canvas.min.js",
"lineno": 2,
"colno": 9553,
"pre_context": [
"[/*! @sentry-internal/replay-canvas 7.105.0 (e23dc27) | https://github.com/getsentry/sentry-javascript */](https://us.sentry.io/*!%20@sentry-internal/replay-canvas%207.105.0%20(e23dc27)%20%7C%20https://github.com/getsentry/sentry-javascript%20*/)"
],
"context_line": "{snip} n n))return;const{base64:r,type:s,width:i,height:o}=n;this.mutationCb({id:e,type:h[\"2D\"],commands:[{property:\"clearRect\",args:[0,0,i,o]},{pr {snip}",
"post_context": [
"[//# sourceMappingURL=replay-canvas.min.js.map](https://github.com/#%20sourceMappingURL=replay-canvas.min.js.map)"
],
"in_app": true
},
{
"function": "U.mutationCb",
"filename": "[/7.105.0/bundle.tracing.replay.min.js](https://us.sentry.io/7.105.0/bundle.tracing.replay.min.js)",
"abs_path": "https://browser.sentry-cdn.com/7.105.0/bundle.tracing.replay.min.js",
"lineno": 2,
"colno": 133881,
"pre_context": [
"[/*! @sentry/browser & @sentry/tracing & @sentry/replay 7.105.0 (e23dc27) | https://github.com/getsentry/sentry-javascript */](https://us.sentry.io/*!%20@sentry/browser%20&%20@sentry/tracing%20&%20@sentry/replay%207.105.0%20(e23dc27)%20%7C%20https://github.com/getsentry/sentry-javascript%20*/)"
],
"context_line": "{snip} asManager\"),new Eo}}(j,{mirror:$o,win:window,mutationCb:t=>q(Ro({type:qi.IncrementalSnapshot,data:{source:Wi.CanvasMutation,...t}})),recordC {snip}",
"post_context": [
"[//# sourceMappingURL=bundle.tracing.replay.min.js.map](https://github.com/#%20sourceMappingURL=bundle.tracing.replay.min.js.map)"
],
"in_app": true
},
{
"function": "q",
"filename": "[/7.105.0/bundle.tracing.replay.min.js](https://us.sentry.io/7.105.0/bundle.tracing.replay.min.js)",
"abs_path": "https://browser.sentry-cdn.com/7.105.0/bundle.tracing.replay.min.js",
"lineno": 2,
"colno": 133064,
"pre_context": [
"[/*! @sentry/browser & @sentry/tracing & @sentry/replay 7.105.0 (e23dc27) | https://github.com/getsentry/sentry-javascript */](https://us.sentry.io/*!%20@sentry/browser%20&%20@sentry/tracing%20&%20@sentry/replay%207.105.0%20(e23dc27)%20%7C%20https://github.com/getsentry/sentry-javascript%20*/)"
],
"context_line": "{snip} AttachIframe)return;z++;const e=r&&z>=r,s=n&&t.timestamp-U.timestamp>n;(e||s)&&Z(!0)}},W=t=>{q(Ro({type:qi.IncrementalSnapshot,data:{source: {snip}",
"post_context": [
"[//# sourceMappingURL=bundle.tracing.replay.min.js.map](https://github.com/#%20sourceMappingURL=bundle.tracing.replay.min.js.map)"
],
"in_app": true
}
]
},
"mechanism": {
"type": "onerror",
"handled": false
}
}
]
},

[web3max]

I'm having the same problem, this error keeps getting reported to sentry.

[ishields]

Same happened to me. I was on 7.108.0 and was getting the problem. I upgraded the package to the latest version and the issue was fixed. It took me a while to track this problem down to this repository so unfortunately this error caused us to hit our error budget early this month.

[Lms24]

Hey @ishields apologies for that! Let me check with our support team if we can do something about the quota! Can you share a link to the Sentry issue/event?

This issue should have been fixed with 7.109.0 (#11317). If anyone is still experiencing this issue, please let us know, thanks!

[Lms24]

Hey @ishields I talked to support. To get your quota depletion resolved please open a support ticket here. Our support team will take if from there. Sorry again for the inconvenience!

[ishields]

@Lms24 Really appreciate that. I reached out to support and they were able to fix this for me. Thanks for all the hard work!

[mydea]

Great to hear! So if I understand correctly, this is fixed on latest versions and we can close this issue?

[getsantry]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀