Giters

openreplay / openreplay

Session replay and analytics tool you can self-host. Ideal for reproducing issues, co-browsing with users and optimizing your product.

Home Page:https://openreplay.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Font & style assets are not being downloaded from external storage (Cloudflare R2) when viewing them in the browser

Eyesonly88 opened this issue · comments

commented

Describe the issue
Font & style assets are not being downloaded from external storage (Cloudflare R2) when viewing them in the browser. The assets are being stored correctly in the Cloudflare R2 bucket, but they are not retrieved correctly. We are getting HTTP 400 Bad Request status code only for assets, recordings are working fine.

Steps to reproduce the issue

  1. Configure Cloudflare R2 as external storage and have font & style assets uploaded such as .ttf and .otf fonts.
  2. Use openreplay 17.6
  3. Record a session and close the browser tab
  4. Try to play a session from the openreplay dashboard
  5. Inspect the devtools and you will see errors getting assets
  6. You will also see the recording isn't rendering fonts correctly (for example, font-awesome icons will just be squares)

Expected behavior
Fonts are downloaded correctly the same as styles from the bucket when playing the recording

Screenshots
Here's a screenshot showing the assets that failed to download.
Note that the failed requests don't have the x-amz-* request params compared to the recordings for example.
image

OpenReplay Environment

  • Frontend stack: React
  • OpenReplay version: 1.17.6
  • Tracker version: 11.1.0
  • Plugins used: Sentry
  • Cloud provider: Cloudflare R2
  • System specs: 2vCPU/8Gb with 100Gb of storage

Additional context

  • The assets are being stored correctly into the Cloudflare R2 assets bucket.
  • The R2 Bucket also has the CORs configuration set as you can see here:
    image
  • Another note is that Cloudflare R2 buckets can only be public via a different URL. For example, to make the assets bucket public for viewing, it would need to be accessed from a different URL than the S3 endpoint (because S3 endpoint is expecting auth tokens). My guess is that's the issue that's happening. Is there a way to configure the URL to be used to access the assets bucket? (as far as I can see, I can only configure the asset bucket name in openreplay, but not the URL for reading).

Finally, if we're not able to make the assets bucket public the way openreplay expects it, can we somehow use the local minio to store the assets bucket but external storage for recordings?

Thank you.

commented

Hmm... That's a good finding. But can you please have a look at the response tab to see what triggered the bad request?

commented

Hey @rjshrjndrn , the response tab doesn't have anything:
image