openreplay resourceBaseHref ignored for some stylesheets

Describe the issue I've enabled resourceBaseHref as that the production domain in behind a local dns resolver (imv4.local). For some reason, openreplay won't respect resourceBaseHref for all my css files. (The first entry is found and resolved from assets.imv4.com and the latter are still resolved from imv4.local)

Steps to reproduce the issue

Create a tracker inside Nuxt behind a local domain.
Use tracker with resourceBaseHref to a public domain where assets are hosted.

Expected behavior Find that some resources are resolved through /sessions-assets/https%213A%212F%212Fworker.assets.imv4.devd.pw%212F_nuxt%212Fentry.d648316f.css.18 and others are resolved from /sessions-assets/http%213A%212F%212Fimv4-worker.local%212F_nuxt%212Findex.1405e00f.css.18

Screenshots

OpenReplay Environment

Frontend stack: Nuxt, Typescript, GraphQL
OpenReplay version: v1.14.0
Tracker version: v9.0.6
Plugins used: GraphQL
Cloud provider: Kubernetes
System specs: No clue 😓

Additional context

Response from /event

{
  "data": {
    "events": [
      ... irrelevant? ...
    ],
    "stackEvents": [
      
    ],
    "errors": [
      
    ],
    "userEvents": [
      
    ],
    "resources": [
      {
        "datetime": 1697638531255,
        "url": "http://imv4-worker.local/_nuxt/entry.e0d80335.js",
        "type": "script",
        "duration": 72,
        "ttfb": 21,
        "headerSize": null,
        "encodedBodySize": 2074924,
        "decodedBodySize": 2074924,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638531258, // 👇 This one is resolved from actual resource domain!?
        "url": "http://imv4-worker.local/_nuxt/entry.d648316f.css",
        "type": "stylesheet",
        "duration": 24,
        "ttfb": 21,
        "headerSize": null,
        "encodedBodySize": 843,
        "decodedBodySize": 843,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638531272,
        "url": "http://imv4-worker.local/_nuxt/i18n.config.1b46049a.js",
        "type": "script",
        "duration": 88,
        "ttfb": 60,
        "headerSize": null,
        "encodedBodySize": 126,
        "decodedBodySize": 126,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638531273,
        "url": "http://imv4-worker.local/_nuxt/default.2aa43c77.css",
        "type": "stylesheet",
        "duration": 119,
        "ttfb": 74,
        "headerSize": null,
        "encodedBodySize": 1102,
        "decodedBodySize": 1102,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638538470,
        "url": "http://imv4-worker.local/_nuxt/setup.0a986e0d.css",
        "type": "stylesheet",
        "duration": 36,
        "ttfb": 28,
        "headerSize": null,
        "encodedBodySize": 304,
        "decodedBodySize": 304,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551003,
        "url": "http://imv4-worker.local/_nuxt/i-order-nr.211cd3d7.css",
        "type": "stylesheet",
        "duration": 106,
        "ttfb": 75,
        "headerSize": null,
        "encodedBodySize": 79,
        "decodedBodySize": 79,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551010,
        "url": "http://imv4-worker.local/_nuxt/i-task-status-circle.be28f2bc.js",
        "type": "script",
        "duration": 108,
        "ttfb": 70,
        "headerSize": null,
        "encodedBodySize": 5242,
        "decodedBodySize": 5242,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551019,
        "url": "http://imv4-worker.local/_nuxt/i-task-status-circle.6e66bdbc.css",
        "type": "stylesheet",
        "duration": 99,
        "ttfb": 62,
        "headerSize": null,
        "encodedBodySize": 249,
        "decodedBodySize": 249,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551024,
        "url": "http://imv4-worker.local/_nuxt/n-result-feedback.f2da4d98.css",
        "type": "stylesheet",
        "duration": 95,
        "ttfb": 60,
        "headerSize": null,
        "encodedBodySize": 552,
        "decodedBodySize": 552,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551026,
        "url": "http://imv4-worker.local/_nuxt/headers.5e70aa82.js",
        "type": "script",
        "duration": 92,
        "ttfb": 63,
        "headerSize": null,
        "encodedBodySize": 3312,
        "decodedBodySize": 3312,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551028,
        "url": "http://imv4-worker.local/_nuxt/this-workplace.a3588ff5.css",
        "type": "stylesheet",
        "duration": 90,
        "ttfb": 64,
        "headerSize": null,
        "encodedBodySize": 84,
        "decodedBodySize": 84,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551230,
        "url": "http://imv4-worker.local/_nuxt/Tooltip.8c776e9b.js",
        "type": "script",
        "duration": 21,
        "ttfb": 13,
        "headerSize": null,
        "encodedBodySize": 1376,
        "decodedBodySize": 1376,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551231,
        "url": "http://imv4-worker.local/_nuxt/index.4f5df8ea.js",
        "type": "script",
        "duration": 32,
        "ttfb": 19,
        "headerSize": null,
        "encodedBodySize": 1418,
        "decodedBodySize": 1418,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551232,
        "url": "http://imv4-worker.local/_nuxt/Tag.dc642e21.js",
        "type": "script",
        "duration": 35,
        "ttfb": 31,
        "headerSize": null,
        "encodedBodySize": 15158,
        "decodedBodySize": 15158,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551233,
        "url": "http://imv4-worker.local/_nuxt/use-active-worklog.6ea691bd.js",
        "type": "script",
        "duration": 30,
        "ttfb": 22,
        "headerSize": null,
        "encodedBodySize": 5353,
        "decodedBodySize": 5353,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551315,
        "url": "http://imv4-worker.local/_nuxt/default.2aa43c77.css",
        "type": "stylesheet",
        "duration": 15,
        "ttfb": 9,
        "headerSize": null,
        "encodedBodySize": 1102,
        "decodedBodySize": 1102,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551337,
        "url": "http://imv4-worker.local/_nuxt/default.15cba5e9.js",
        "type": "script",
        "duration": 27,
        "ttfb": 10,
        "headerSize": null,
        "encodedBodySize": 84455,
        "decodedBodySize": 84455,
        "success": true,
        "status": 200
      },
      {
        "datetime": 1697638551376,
        "url": "http://imv4-worker.local/_nuxt/Ellipsis.0e7804d9.js",
        "type": "script",
        "duration": 11,
        "ttfb": 9,
        "headerSize": null,
        "encodedBodySize": 5786,
        "decodedBodySize": 5786,
        "success": true,
        "status": 200
      },
      ... A couple of more resources ...
    ],
    "issues": [
      ... 2 items ...
    ]
  }
}

Oct 19 '23 07:10 not-Ryan

all related to replay resources are cached before replay (to prevent sessions looking differently if original file will be changed in future) and fetched through assets storage, so /sessions-assets/https%213A%212F%212Fworker.assets.imv4.devd.pw%212F_nuxt%212Fentry.d648316f.css.18 is a correct path to cached asset as long as encoded url (https://worker.assets.imv4.devd.pw/_nuxt/entry.d648316f.css.18) is correct.

resourceBaseHref tells the service where exactly to look for assets to grab and cache.

In other words, if this does not lead to any visual issues, everything is fine.

Oct 27 '23 15:10 nick-delirium

Sadly, it did lead to visual issues. Quite a lot actually. My hypothesis was that the we misconfigured the resourceBaseHref on initial setup, assets cached the wrong response and now we are always getting (some) resources wrong.

Is there anyway we can clear the assets cache forcefully and (force) re-use resourceBaseHref in new sessions? I've tried clearing using the docs. But it seem to worsen only our other sessions :(

Oct 31 '23 08:10 not-Ryan

If you're using OR standalone installation, you can see all cached assets in sessions-assets. You can access these files from either minio container, or s3.

You can login to minio container using

kubectl get po -n db | grep minio
kubecl exec -it <above pod id> bash
cd /data/session-assets
ls

Oct 31 '23 10:10 rjshrjndrn

I've cleared that folder entirely. But the retrieved assets still point to http://imv4-worker.local instead of what is configured in resourceBaseHref.

We have even updated the entire app multiple times, re-created the OpenReplay project and tried another domain. But it always seems to point to the local files instead of resourceBaseHref.

Nov 07 '23 13:11 not-Ryan

hello @not-Ryan if still relevant, please re-test with latest versions, if not, can you try to create small example app so I can replicate the issue or just make an example snippets: example css, how its injected in code, webpack setup etc so I can try to recreate it myself

if no close the issue please

May 21 '24 12:05 nick-delirium

openreplay openreplay copied to clipboard

resourceBaseHref ignored for some stylesheets

openreplay
openreplay copied to clipboard