Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Eyesonly88 opened this issue Apr 3, 2024 · 2 comments
Assignees
Labels
bug Something isn't working session-replay Session replay related

Comments

@Eyesonly88
Copy link

Eyesonly88 commented Apr 3, 2024

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.

@Eyesonly88 Eyesonly88 added the bug Something isn't working label Apr 3, 2024
@estradino estradino added the session-replay Session replay related label Apr 3, 2024
@estradino estradino assigned nick-delirium and unassigned estradino Apr 3, 2024
@rjshrjndrn
Copy link
Contributor

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

@Eyesonly88
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working session-replay Session replay related
Projects
None yet
Development

No branches or pull requests

4 participants