@betterbugs/rrweb-plugin-css-proxy

Replay plugin that rewrites <link rel="stylesheet"> hrefs to load through a proxy URL. Use this when replaying sessions whose CSS is on another origin and would otherwise be blocked by CORS.

Installation

npm install @betterbugs/rrweb-plugin-css-proxy

Usage

Pass the plugin via the plugins option of the Replayer (or rrweb-player props). The original stylesheet URL is sent as the url query parameter.

With rrweb-player

import rrwebPlayer from 'rrweb-player';
import { getCssProxyPlugin } from '@betterbugs/rrweb-plugin-css-proxy';
import 'rrweb-player/dist/style.css';

new rrwebPlayer({
  target: document.body,
  props: {
    events,
    plugins: [getCssProxyPlugin({ proxyUrl: 'https://corsproxy.io/' })],
  },
});

With Replayer directly

import { Replayer } from '@betterbugs/replay';
import { getCssProxyPlugin } from '@betterbugs/rrweb-plugin-css-proxy';

const replayer = new Replayer(events, {
  plugins: [getCssProxyPlugin({ proxyUrl: 'https://corsproxy.io/' })],
});
replayer.play();

Options

| key | type | description | | --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------- | | proxyUrl | string | Base URL of the proxy. The original stylesheet URL is appended as ?url=<encoded> (or &url=<encoded> if proxyUrl already contains ?). |

Example proxy URLs:

• 'https://corsproxy.io/' → https://corsproxy.io/?url=https%3A%2F%2Fexample.com%2Fstyle.css
• 'https://myproxy.com/fetch?key=123' → https://myproxy.com/fetch?key=123&url=https%3A%2F%2Fexample.com%2Fstyle.css

Relative href values are resolved to absolute URLs before being passed to the proxy. data: and blob: URLs are left unchanged.