Track canvas resizes performed through attributes

Author: BeltranBulbarellaDD

packages/browser-rum/src/domain/record/trackers/trackCanvas.spec.ts

@@ -77,13 +77,39 @@ describe('trackCanvas2DMutations', () => {
     expect(markCanvasDirtySpy.calls.argsFor(1)[0]).toBe(canvas)
   })
 
-  it('stops tracking drawing operations', () => {
+  it('marks the canvas dirty when it is resized through attributes', () => {
+    tracker = trackCanvas2DMutations(markCanvasDirtySpy)
+
+    canvas.setAttribute('width', '100')
+    canvas.setAttribute('HEIGHT', '50')
+    canvas.removeAttribute('width')
+    canvas.removeAttribute('height')
+
+    expect(markCanvasDirtySpy).toHaveBeenCalledTimes(4)
+    markCanvasDirtySpy.calls.allArgs().forEach(([dirtyCanvas]) => expect(dirtyCanvas).toBe(canvas))
+  })
+
+  it('does not mark the canvas dirty for unrelated attribute mutations', () => {
+    tracker = trackCanvas2DMutations(markCanvasDirtySpy)
+    const div = document.createElement('div')
+
+    canvas.setAttribute('class', 'foo')
+    canvas.removeAttribute('class')
+    canvas.removeAttribute('width')
+    div.setAttribute('width', '100')
+    div.removeAttribute('width')
+
+    expect(markCanvasDirtySpy).not.toHaveBeenCalled()
+  })
+
+  it('stops tracking canvas mutations', () => {
     const clock: Clock = mockClock()
     tracker = trackCanvas2DMutations(markCanvasDirtySpy)
     tracker.stop()
 
     context.fillRect(0, 0, 1, 1)
     canvas.width = 100
+    canvas.setAttribute('height', '50')
     clock.tick(0)
 
     expect(markCanvasDirtySpy).not.toHaveBeenCalled()

packages/browser-rum/src/domain/record/trackers/trackCanvas.ts

@@ -30,6 +30,8 @@ const CANVAS_2D_DRAWING_METHODS: readonly Canvas2DDrawingMethod[] = [
   'reset',
 ]
 
+const CANVAS_SIZE_ATTRIBUTES = ['width', 'height']
+
 export function trackCanvas2DMutations(markCanvasDirty: MarkCanvasDirty): Tracker {
   const instrumentationStoppers: Tracker[] = []
 
@@ -46,11 +48,29 @@ export function trackCanvas2DMutations(markCanvasDirty: MarkCanvasDirty): Tracke
   if (typeof HTMLCanvasElement !== 'undefined') {
     instrumentationStoppers.push(
       instrumentSetter(HTMLCanvasElement.prototype, 'width', markCanvasDirty),
-      instrumentSetter(HTMLCanvasElement.prototype, 'height', markCanvasDirty)
+      instrumentSetter(HTMLCanvasElement.prototype, 'height', markCanvasDirty),
+      instrumentMethod(Element.prototype, 'setAttribute', ({ target, parameters, onPostCall }) => {
+        if (target instanceof HTMLCanvasElement && isCanvasSizeAttribute(parameters[0])) {
+          onPostCall(() => markCanvasDirty(target))
+        }
+      }),
+      instrumentMethod(Element.prototype, 'removeAttribute', ({ target, parameters, onPostCall }) => {
+        if (
+          target instanceof HTMLCanvasElement &&
+          isCanvasSizeAttribute(parameters[0]) &&
+          target.hasAttribute(parameters[0])
+        ) {
+          onPostCall(() => markCanvasDirty(target))
+        }
+      })
     )
   }
 
   return {
     stop: () => instrumentationStoppers.forEach((stopper) => stopper.stop()),
   }
 }
+
+function isCanvasSizeAttribute(attributeName: string): boolean {
+  return CANVAS_SIZE_ATTRIBUTES.includes(attributeName.toLowerCase())
+}