prototype here does not refer to the correct WebGLRenderingContext … (#1013)

* `prototype` here does not refer to the correct WebGLRenderingContext when there are multiple being patched - all were referring to the same one meaning that variables weren't being indexed correctly as `canvasVarMap` in serialize-args.ts was only seeing a single context

If you revert the change from `prototype` to `this` from this commit, you'll get the following failure in the new test added in this commit:

   @@ -199,11 +199,11 @@
                "property": "bindBuffer",
                "args": [
                  34962,
                  {
                    "rr_type": "WebGLBuffer",
    -               "index": 0
    +               "index": 1
                  }
                ]
              },

This is because the 'confound' canvas was populating a single entry in the canvasVarMap so when 'myCanvas' starts populating, there is already an entry (which doesn't exist on the replay side as the 'confound' canvas was never emitted)

* Update packages/rrweb/test/integration.test.ts

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* Update packages/rrweb/test/html/canvas-webgl-shader.html

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
This commit is contained in:
Eoghan Murray
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 06dad675e5
commit f43168ba06
4 changed files with 490 additions and 2 deletions

View File

@@ -401,6 +401,19 @@ describe('record integration tests', function (this: ISuite) {
assertSnapshot(snapshots);
});
it('can correctly serialize a shader and multiple webgl contexts', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml.call(this, 'canvas-webgl-shader.html', {
recordCanvas: true,
}),
);
await waitForRAF(page);
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots);
});
it('will serialize node before record', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');