From ba125e95a647f79b68ea9f74ff5e23ee4a23784b Mon Sep 17 00:00:00 2001 From: xugp <1292593309@qq.com> Date: Wed, 8 Apr 2026 16:01:21 +0800 Subject: [PATCH] Fix local rrweb playback flow and add demo page --- index.html | 329 +++++++ .../rrweb-player/.svelte-kit/ambient.d.ts | 824 +++++++----------- packages/rrweb-player/src/Player.svelte | 45 +- packages/rrweb-player/vite.config.ts | 3 + packages/rrweb/scripts/stream.js | 39 +- packages/rrweb/scripts/utils.js | 5 +- vite.config.default.ts | 24 +- 7 files changed, 744 insertions(+), 525 deletions(-) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 00000000..118bb5dc --- /dev/null +++ b/index.html @@ -0,0 +1,329 @@ + + + + + + rrweb 示例 + + + +

🎥 rrweb 录制与回放

+ +
+
+

📹 录制区域

+
+

在此区域进行操作

+

点击按钮、输入文字，所有操作都会被记录：

+ + + + + +
+
+ +
+ ⚪ 等待录制 +
+ +
+ + + +
+ +
+

✨ 功能说明

+
    +
  • 点击"开始录制"开始记录
    • +
  • 点击"停止录制"结束记录
    • +
  • 右侧会自动回放录制的操作
    • +
  • 支持播放速度控制
    • +
+
+
+ +
+

▶️ 回放区域

+
+
+

🎬 回放控制

+

播放器提供完整控制：

+
    +
  • 时间轴拖动：点击任意位置跳转
    • +
  • 播放/暂停：控制播放状态
    • +
  • 速度控制：0.5x、1x、2x、4x
    • +
+
+
+
+ + + + + + + + + diff --git a/packages/rrweb-player/.svelte-kit/ambient.d.ts b/packages/rrweb-player/.svelte-kit/ambient.d.ts index baa9b47d..22f647c0 100644 --- a/packages/rrweb-player/.svelte-kit/ambient.d.ts +++ b/packages/rrweb-player/.svelte-kit/ambient.d.ts @@ -26,261 +26,179 @@ * ``` */ declare module '$env/static/private' { - export const SUDO_GID: string; - export const GITHUB_STATE: string; - export const COPILOT_AGENT_ACTION: string; - export const npm_package_scripts_test_cross_platform_build: string; - export const npm_package_devDependencies_rollup: string; - export const npm_package_devDependencies__types_node: string; - export const COPILOT_AGENT_START_TIME_SEC: string; - export const CURL_CA_BUNDLE: string; - export const DOTNET_NOLOGO: string; - export const npm_package_devDependencies_vitest: string; - export const MAIL: string; - export const NODE_EXTRA_CA_CERTS: string; - export const USER: string; - export const npm_package_bin_svelte_kit: string; - export const npm_package_dependencies_sirv: string; - export const npm_package_dependencies_sade: string; - export const npm_package_dependencies_mrmime: string; - export const npm_package_dependencies_magic_string: string; - export const npm_config_version_commit_hooks: string; - export const npm_config_user_agent: string; - export const SHOULD_CONTINUE: string; - export const CI: string; - export const npm_package_scripts_generate_version: string; - export const npm_package_dependencies__types_cookie: string; - export const npm_config_bin_links: string; - export const XDG_SESSION_TYPE: string; - export const RUNNER_ENVIRONMENT: string; - export const GITHUB_ENV: string; - export const COPILOT_AGENT_ONLINE_EVALUATION_DISABLED: string; - export const PIPX_HOME: string; - export const npm_node_execpath: string; - export const npm_package_devDependencies_vite: string; - export const npm_package_devDependencies__sveltejs_vite_plugin_svelte: string; - export const npm_config_init_version: string; - export const JAVA_HOME_8_X64: string; - export const SHLVL: string; - export const npm_package_exports___node_types: string; - export const npm_package_files_0: string; - export const COPILOT_AGENT_RUNTIME_VERSION: string; + export const ACLOCAL_PATH: string; + export const ALLUSERSPROFILE: string; + export const ANTHROPIC_AUTH_TOKEN: string; + export const ANTHROPIC_BASE_URL: string; + export const APPDATA: string; + export const CLAUDECODE: string; + export const CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC: string; + export const CLAUDE_CODE_ENTRYPOINT: string; + export const COMMONPROGRAMFILES: string; + export const CommonProgramW6432: string; + export const COMPUTERNAME: string; + export const COMSPEC: string; + export const CONFIG_SITE: string; + export const COREPACK_ENABLE_AUTO_PIN: string; + export const DISPLAY: string; + export const DriverData: string; + export const EXEPATH: string; + export const GIT_EDITOR: string; export const HOME: string; - export const OLDPWD: string; - export const npm_package_files_1: string; - export const npm_package_repository_directory: string; - export const RUNNER_TEMP: string; - export const GITHUB_EVENT_PATH: string; - export const CAROOT: string; - export const COPILOT_AGENT_FIREWALL_RULESET_ALLOW_LIST: string; - export const npm_package_files_2: string; - export const JAVA_HOME_11_X64: string; - export const COPILOT_AGENT_MCP_SERVER_TEMP: string; - export const PIPX_BIN_DIR: string; - export const GITHUB_REPOSITORY_OWNER: string; - export const npm_package_engines_node: string; - export const npm_package_exports___vite_import: string; - export const npm_package_files_3: string; - export const npm_package_devDependencies_svelte_preprocess: string; - export const npm_config_init_license: string; - export const GRADLE_HOME: string; - export const ANDROID_NDK_LATEST_HOME: string; - export const JAVA_HOME_21_X64: string; - export const GITHUB_RETENTION_DAYS: string; - export const npm_package_files_4: string; - export const npm_config_version_tag_prefix: string; - export const GITHUB_REPOSITORY_OWNER_ID: string; - export const POWERSHELL_DISTRIBUTION_CHANNEL: string; - export const SSL_CERT_FILE: string; - export const AZURE_EXTENSION_DIR: string; - export const GITHUB_HEAD_REF: string; - export const npm_package_scripts_check: string; - export const npm_package_files_5: string; - export const npm_package_dependencies_tiny_glob: string; - export const SYSTEMD_EXEC_PID: string; - export const DBUS_SESSION_BUS_ADDRESS: string; - export const npm_package_scripts_postinstall: string; - export const npm_package_files_6: string; - export const GITHUB_GRAPHQL_URL: string; - export const GITHUB_DOWNLOADS_URL: string; - export const npm_package_devDependencies_typescript: string; - export const npm_package_devDependencies__types_connect: string; - export const npm_package_description: string; - export const JAVA_HOME_25_X64: string; - export const NVM_DIR: string; - export const npm_package_readmeFilename: string; - export const npm_package_types: string; - export const npm_package_homepage: string; - export const DOTNET_SKIP_FIRST_TIME_EXPERIENCE: string; - export const COPILOT_JOB_EVENT_TYPE: string; - export const JAVA_HOME_17_X64: string; - export const ImageVersion: string; - export const SUDO_UID: string; - export const npm_package_exports___hooks_types: string; - export const npm_package_devDependencies__playwright_test: string; - export const BLACKBIRD_MODE: string; - export const LOGNAME: string; - export const COPILOT_AGENT_PR_COMMIT_COUNT: string; - export const RUNNER_OS: string; - export const GITHUB_API_URL: string; - export const GOROOT_1_22_X64: string; - export const COPILOT_AGENT_COMMIT_LOGIN: string; - export const SWIFT_PATH: string; - export const npm_package_type: string; - export const COPILOT_USE_SESSIONS: string; - export const CHROMEWEBDRIVER: string; - export const COPILOT_AGENT_CONTENT_FILTER_MODE: string; - export const GOROOT_1_23_X64: string; - export const JOURNAL_STREAM: string; - export const GITHUB_WORKFLOW: string; - export const _: string; - export const COPILOT_AGENT_BRANCH_NAME: string; - export const MEMORY_PRESSURE_WATCH: string; - export const XDG_SESSION_CLASS: string; - export const GOROOT_1_24_X64: string; - export const npm_package_scripts_lint: string; - export const npm_config_registry: string; - export const ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: string; - export const COPILOT_AGENT_FIREWALL_ENABLE_RULESET_ALLOW_LIST: string; - export const GOROOT_1_25_X64: string; - export const GITHUB_RUN_ID: string; - export const TERM: string; - export const XDG_SESSION_ID: string; - export const GITHUB_REF_TYPE: string; - export const BOOTSTRAP_HASKELL_NONINTERACTIVE: string; - export const GITHUB_WORKFLOW_SHA: string; - export const GITHUB_BASE_REF: string; - export const ImageOS: string; - export const COPILOT_MCP_ENABLED: string; - export const npm_package_exports___import: string; - export const npm_package_devDependencies_dts_buddy: string; - export const npm_package_dependencies_kleur: string; - export const npm_package_dependencies_devalue: string; - export const npm_config_ignore_scripts: string; - export const COPILOT_AGENT_CALLBACK_URL: string; - export const GITHUB_WORKFLOW_REF: string; - export const GITHUB_ACTION_REPOSITORY: string; - export const ENABLE_RUNNER_TRACING: string; - export const npm_package_exports___package_json: string; - export const npm_package_peerDependencies_svelte: string; - export const PATH: string; - export const NODE: string; - export const COPILOT_AGENT_INJECTED_SECRET_NAMES: string; - export const ANT_HOME: string; - export const DOTNET_MULTILEVEL_LOOKUP: string; - export const RUNNER_TRACKING_ID: string; - export const INVOCATION_ID: string; - export const RUNNER_TOOL_CACHE: string; - export const GITHUB_UPLOADS_URL: string; - export const REQUESTS_CA_BUNDLE: string; - export const npm_package_repository_type: string; - export const npm_package_name: string; - export const GITHUB_ACTION: string; - export const GITHUB_RUN_NUMBER: string; - export const GITHUB_TRIGGERING_ACTOR: string; - export const COPILOT_EXPERIMENTS: string; - export const RUNNER_ARCH: string; - export const XDG_RUNTIME_DIR: string; - export const AGENT_TOOLSDIRECTORY: string; - export const npm_package_scripts_test_integration: string; - export const npm_package_exports___node_polyfills_import: string; - export const npm_package_devDependencies__types_set_cookie_parser: string; - export const SSL_CERT_DIR: string; - export const npm_package_scripts_test_unit: string; - export const npm_package_exports___vite_types: string; - export const npm_config_ignore_path: string; - export const LANG: string; - export const VCPKG_INSTALLATION_ROOT: string; - export const CONDA: string; - export const RUNNER_NAME: string; - export const XDG_CONFIG_HOME: string; - export const GITHUB_REF_NAME: string; - export const GITHUB_REPOSITORY: string; - export const npm_lifecycle_script: string; - export const npm_package_scripts_test_cross_platform_dev: string; - export const SUDO_COMMAND: string; - export const ANDROID_NDK_ROOT: string; - export const GITHUB_ACTION_REF: string; - export const DEBIAN_FRONTEND: string; - export const npm_package_scripts_test: string; - export const npm_package_dependencies_esm_env: string; - export const npm_config_version_git_message: string; - export const SHELL: string; - export const GITHUB_REPOSITORY_ID: string; - export const GITHUB_ACTIONS: string; - export const CPD_SAVE_TRAJECTORY_OUTPUT: string; - export const npm_lifecycle_event: string; - export const npm_package_repository_url: string; - export const npm_package_version: string; - export const GITHUB_REF_PROTECTED: string; - export const npm_config_argv: string; - export const npm_package_scripts_generate_types: string; - export const npm_package_scripts_check_all: string; - export const npm_package_devDependencies_svelte: string; - export const npm_package_dependencies_cookie: string; - export const GITHUB_WORKSPACE: string; - export const SUDO_USER: string; - export const ACCEPT_EULA: string; - export const DOTNET_SYSTEM_NET_DISABLEIPV6: string; - export const GITHUB_JOB: string; - export const YARN_IGNORE_PATH: string; - export const npm_package_exports___node_import: string; - export const GITHUB_SHA: string; - export const GITHUB_RUN_ATTEMPT: string; - export const COPILOT_AGENT_DEBUG: string; - export const npm_package_devDependencies__types_sade: string; - export const npm_config_version_git_tag: string; - export const npm_config_version_git_sign: string; - export const GITHUB_REF: string; - export const COPILOT_AGENT_ISSUE_NUMBER: string; - export const COPILOT_AGENT_SOURCE_ENVIRONMENT: string; - export const GITHUB_ACTOR: string; - export const FIREWALL_RULESET_CONTENT: string; - export const ANDROID_SDK_ROOT: string; - export const npm_package_license: string; - export const npm_config_strict_ssl: string; - export const npm_package_scripts_format: string; - export const GITHUB_PATH: string; + export const HOMEDRIVE: string; + export const HOMEPATH: string; + export const HOSTNAME: string; + export const INFOPATH: string; + export const INIT_CWD: string; export const JAVA_HOME: string; - export const PWD: string; - export const GITHUB_ACTOR_ID: string; - export const RUNNER_WORKSPACE: string; + export const LANG: string; + export const LOCALAPPDATA: string; + export const LOGONSERVER: string; + export const MANPATH: string; + export const MINGW_CHOST: string; + export const MINGW_PACKAGE_PREFIX: string; + export const MINGW_PREFIX: string; + export const MSYSTEM: string; + export const MSYSTEM_CARCH: string; + export const MSYSTEM_CHOST: string; + export const MSYSTEM_PREFIX: string; + export const NODE: string; + export const NoDefaultCurrentDirectoryInExePath: string; + export const npm_config_argv: string; + export const npm_config_bin_links: string; + export const npm_config_ignore_optional: string; + export const npm_config_ignore_path: string; + export const npm_config_ignore_scripts: string; + export const npm_config_init_license: string; + export const npm_config_init_version: string; + export const npm_config_registry: string; + export const npm_config_save_prefix: string; + export const npm_config_strict_ssl: string; + export const npm_config_user_agent: string; + export const npm_config_version_commit_hooks: string; + export const npm_config_version_git_message: string; + export const npm_config_version_git_sign: string; + export const npm_config_version_git_tag: string; + export const npm_config_version_tag_prefix: string; export const npm_execpath: string; + export const npm_lifecycle_event: string; + export const npm_lifecycle_script: string; + export const npm_node_execpath: string; + export const npm_package_bin_svelte_kit: string; + export const npm_package_dependencies_cookie: string; + export const npm_package_dependencies_devalue: string; + export const npm_package_dependencies_esm_env: string; + export const npm_package_dependencies_import_meta_resolve: string; + export const npm_package_dependencies_kleur: string; + export const npm_package_dependencies_magic_string: string; + export const npm_package_dependencies_mrmime: string; + export const npm_package_dependencies_sade: string; export const npm_package_dependencies_set_cookie_parser: string; - export const COPILOT_AGENT_PR_NUMBER: string; - export const HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: string; - export const GITHUB_EVENT_NAME: string; - export const HOMEBREW_NO_AUTO_UPDATE: string; - export const ANDROID_HOME: string; - export const GITHUB_SERVER_URL: string; - export const GECKOWEBDRIVER: string; - export const GHCUP_INSTALL_BASE_PREFIX: string; - export const GITHUB_OUTPUT: string; + export const npm_package_dependencies_sirv: string; + export const npm_package_dependencies_tiny_glob: string; + export const npm_package_dependencies__types_cookie: string; + export const npm_package_description: string; + export const npm_package_devDependencies_dts_buddy: string; + export const npm_package_devDependencies_rollup: string; + export const npm_package_devDependencies_svelte: string; + export const npm_package_devDependencies_svelte_preprocess: string; + export const npm_package_devDependencies_typescript: string; + export const npm_package_devDependencies_vite: string; + export const npm_package_devDependencies_vitest: string; + export const npm_package_devDependencies__playwright_test: string; + export const npm_package_devDependencies__sveltejs_vite_plugin_svelte: string; + export const npm_package_devDependencies__types_connect: string; + export const npm_package_devDependencies__types_node: string; + export const npm_package_devDependencies__types_sade: string; + export const npm_package_devDependencies__types_set_cookie_parser: string; + export const npm_package_engines_node: string; + export const npm_package_exports___hooks_import: string; + export const npm_package_exports___hooks_types: string; + export const npm_package_exports___import: string; + export const npm_package_exports___node_import: string; + export const npm_package_exports___node_polyfills_import: string; + export const npm_package_exports___node_polyfills_types: string; + export const npm_package_exports___node_types: string; + export const npm_package_exports___package_json: string; export const npm_package_exports___types: string; - export const EDGEWEBDRIVER: string; - export const COPILOT_EXPERIMENT_ASSIGNMENT_CONTEXT: string; + export const npm_package_exports___vite_import: string; + export const npm_package_exports___vite_types: string; + export const npm_package_files_0: string; + export const npm_package_files_1: string; + export const npm_package_files_2: string; + export const npm_package_files_3: string; + export const npm_package_files_4: string; + export const npm_package_files_5: string; + export const npm_package_files_6: string; + export const npm_package_homepage: string; + export const npm_package_license: string; + export const npm_package_name: string; + export const npm_package_peerDependencies_svelte: string; export const npm_package_peerDependencies_vite: string; export const npm_package_peerDependencies__sveltejs_vite_plugin_svelte: string; - export const npm_config_save_prefix: string; - export const npm_config_ignore_optional: string; - export const ANDROID_NDK: string; - export const SGX_AESM_ADDR: string; - export const CHROME_BIN: string; + export const npm_package_readmeFilename: string; + export const npm_package_repository_directory: string; + export const npm_package_repository_type: string; + export const npm_package_repository_url: string; + export const npm_package_scripts_check: string; + export const npm_package_scripts_check_all: string; + export const npm_package_scripts_format: string; + export const npm_package_scripts_generate_types: string; + export const npm_package_scripts_generate_version: string; + export const npm_package_scripts_lint: string; + export const npm_package_scripts_postinstall: string; + export const npm_package_scripts_test: string; + export const npm_package_scripts_test_cross_platform_build: string; + export const npm_package_scripts_test_cross_platform_dev: string; + export const npm_package_scripts_test_integration: string; + export const npm_package_scripts_test_unit: string; + export const npm_package_type: string; + export const npm_package_types: string; + export const npm_package_version: string; + export const NUMBER_OF_PROCESSORS: string; + export const OLDPWD: string; + export const OneDrive: string; + export const ORIGINAL_PATH: string; + export const ORIGINAL_TEMP: string; + export const ORIGINAL_TMP: string; + export const OS: string; + export const OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE: string; + export const PATH: string; + export const PATHEXT: string; + export const PKG_CONFIG_PATH: string; + export const PKG_CONFIG_SYSTEM_INCLUDE_PATH: string; + export const PKG_CONFIG_SYSTEM_LIBRARY_PATH: string; + export const PLINK_PROTOCOL: string; + export const PROCESSOR_ARCHITECTURE: string; + export const PROCESSOR_IDENTIFIER: string; + export const PROCESSOR_LEVEL: string; + export const PROCESSOR_REVISION: string; + export const ProgramData: string; + export const PROGRAMFILES: string; + export const ProgramW6432: string; + export const PROMPT: string; + export const PSModulePath: string; + export const PUBLIC: string; export const PUPPETEER_SKIP_DOWNLOAD: string; - export const SELENIUM_JAR_PATH: string; - export const MEMORY_PRESSURE_WRITE: string; - export const COPILOT_AGENT_COMMIT_EMAIL: string; - export const COPILOT_AGENT_FIREWALL_LOG_FILE: string; - export const COPILOT_FEATURE_FLAGS: string; - export const npm_package_exports___node_polyfills_types: string; - export const INIT_CWD: string; - export const COPILOT_API_URL: string; - export const ANDROID_NDK_HOME: string; - export const GITHUB_STEP_SUMMARY: string; - export const COPILOT_AGENT_BASE_COMMIT: string; - export const COPILOT_AGENT_TIMEOUT_MIN: string; - export const npm_package_exports___hooks_import: string; - export const npm_package_dependencies_import_meta_resolve: string; + export const PWD: string; + export const SHELL: string; + export const SHLVL: string; + export const SSH_ASKPASS: string; + export const SYSTEMDRIVE: string; + export const SYSTEMROOT: string; + export const TEMP: string; + export const TERM: string; + export const TMP: string; + export const TMPDIR: string; + export const USERDOMAIN: string; + export const USERDOMAIN_ROAMINGPROFILE: string; + export const USERNAME: string; + export const USERPROFILE: string; + export const VS140COMNTOOLS: string; + export const WINDIR: string; + export const WXDRIVE_START_ARGS: string; + export const YARN_IGNORE_PATH: string; + export const ZES_ENABLE_SYSMAN: string; } /** @@ -312,261 +230,179 @@ declare module '$env/static/public' { */ declare module '$env/dynamic/private' { export const env: { - SUDO_GID: string; - GITHUB_STATE: string; - COPILOT_AGENT_ACTION: string; - npm_package_scripts_test_cross_platform_build: string; - npm_package_devDependencies_rollup: string; - npm_package_devDependencies__types_node: string; - COPILOT_AGENT_START_TIME_SEC: string; - CURL_CA_BUNDLE: string; - DOTNET_NOLOGO: string; - npm_package_devDependencies_vitest: string; - MAIL: string; - NODE_EXTRA_CA_CERTS: string; - USER: string; - npm_package_bin_svelte_kit: string; - npm_package_dependencies_sirv: string; - npm_package_dependencies_sade: string; - npm_package_dependencies_mrmime: string; - npm_package_dependencies_magic_string: string; - npm_config_version_commit_hooks: string; - npm_config_user_agent: string; - SHOULD_CONTINUE: string; - CI: string; - npm_package_scripts_generate_version: string; - npm_package_dependencies__types_cookie: string; - npm_config_bin_links: string; - XDG_SESSION_TYPE: string; - RUNNER_ENVIRONMENT: string; - GITHUB_ENV: string; - COPILOT_AGENT_ONLINE_EVALUATION_DISABLED: string; - PIPX_HOME: string; - npm_node_execpath: string; - npm_package_devDependencies_vite: string; - npm_package_devDependencies__sveltejs_vite_plugin_svelte: string; - npm_config_init_version: string; - JAVA_HOME_8_X64: string; - SHLVL: string; - npm_package_exports___node_types: string; - npm_package_files_0: string; - COPILOT_AGENT_RUNTIME_VERSION: string; + ACLOCAL_PATH: string; + ALLUSERSPROFILE: string; + ANTHROPIC_AUTH_TOKEN: string; + ANTHROPIC_BASE_URL: string; + APPDATA: string; + CLAUDECODE: string; + CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC: string; + CLAUDE_CODE_ENTRYPOINT: string; + COMMONPROGRAMFILES: string; + CommonProgramW6432: string; + COMPUTERNAME: string; + COMSPEC: string; + CONFIG_SITE: string; + COREPACK_ENABLE_AUTO_PIN: string; + DISPLAY: string; + DriverData: string; + EXEPATH: string; + GIT_EDITOR: string; HOME: string; - OLDPWD: string; - npm_package_files_1: string; - npm_package_repository_directory: string; - RUNNER_TEMP: string; - GITHUB_EVENT_PATH: string; - CAROOT: string; - COPILOT_AGENT_FIREWALL_RULESET_ALLOW_LIST: string; - npm_package_files_2: string; - JAVA_HOME_11_X64: string; - COPILOT_AGENT_MCP_SERVER_TEMP: string; - PIPX_BIN_DIR: string; - GITHUB_REPOSITORY_OWNER: string; - npm_package_engines_node: string; - npm_package_exports___vite_import: string; - npm_package_files_3: string; - npm_package_devDependencies_svelte_preprocess: string; - npm_config_init_license: string; - GRADLE_HOME: string; - ANDROID_NDK_LATEST_HOME: string; - JAVA_HOME_21_X64: string; - GITHUB_RETENTION_DAYS: string; - npm_package_files_4: string; - npm_config_version_tag_prefix: string; - GITHUB_REPOSITORY_OWNER_ID: string; - POWERSHELL_DISTRIBUTION_CHANNEL: string; - SSL_CERT_FILE: string; - AZURE_EXTENSION_DIR: string; - GITHUB_HEAD_REF: string; - npm_package_scripts_check: string; - npm_package_files_5: string; - npm_package_dependencies_tiny_glob: string; - SYSTEMD_EXEC_PID: string; - DBUS_SESSION_BUS_ADDRESS: string; - npm_package_scripts_postinstall: string; - npm_package_files_6: string; - GITHUB_GRAPHQL_URL: string; - GITHUB_DOWNLOADS_URL: string; - npm_package_devDependencies_typescript: string; - npm_package_devDependencies__types_connect: string; - npm_package_description: string; - JAVA_HOME_25_X64: string; - NVM_DIR: string; - npm_package_readmeFilename: string; - npm_package_types: string; - npm_package_homepage: string; - DOTNET_SKIP_FIRST_TIME_EXPERIENCE: string; - COPILOT_JOB_EVENT_TYPE: string; - JAVA_HOME_17_X64: string; - ImageVersion: string; - SUDO_UID: string; - npm_package_exports___hooks_types: string; - npm_package_devDependencies__playwright_test: string; - BLACKBIRD_MODE: string; - LOGNAME: string; - COPILOT_AGENT_PR_COMMIT_COUNT: string; - RUNNER_OS: string; - GITHUB_API_URL: string; - GOROOT_1_22_X64: string; - COPILOT_AGENT_COMMIT_LOGIN: string; - SWIFT_PATH: string; - npm_package_type: string; - COPILOT_USE_SESSIONS: string; - CHROMEWEBDRIVER: string; - COPILOT_AGENT_CONTENT_FILTER_MODE: string; - GOROOT_1_23_X64: string; - JOURNAL_STREAM: string; - GITHUB_WORKFLOW: string; - _: string; - COPILOT_AGENT_BRANCH_NAME: string; - MEMORY_PRESSURE_WATCH: string; - XDG_SESSION_CLASS: string; - GOROOT_1_24_X64: string; - npm_package_scripts_lint: string; - npm_config_registry: string; - ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: string; - COPILOT_AGENT_FIREWALL_ENABLE_RULESET_ALLOW_LIST: string; - GOROOT_1_25_X64: string; - GITHUB_RUN_ID: string; - TERM: string; - XDG_SESSION_ID: string; - GITHUB_REF_TYPE: string; - BOOTSTRAP_HASKELL_NONINTERACTIVE: string; - GITHUB_WORKFLOW_SHA: string; - GITHUB_BASE_REF: string; - ImageOS: string; - COPILOT_MCP_ENABLED: string; - npm_package_exports___import: string; - npm_package_devDependencies_dts_buddy: string; - npm_package_dependencies_kleur: string; - npm_package_dependencies_devalue: string; - npm_config_ignore_scripts: string; - COPILOT_AGENT_CALLBACK_URL: string; - GITHUB_WORKFLOW_REF: string; - GITHUB_ACTION_REPOSITORY: string; - ENABLE_RUNNER_TRACING: string; - npm_package_exports___package_json: string; - npm_package_peerDependencies_svelte: string; - PATH: string; - NODE: string; - COPILOT_AGENT_INJECTED_SECRET_NAMES: string; - ANT_HOME: string; - DOTNET_MULTILEVEL_LOOKUP: string; - RUNNER_TRACKING_ID: string; - INVOCATION_ID: string; - RUNNER_TOOL_CACHE: string; - GITHUB_UPLOADS_URL: string; - REQUESTS_CA_BUNDLE: string; - npm_package_repository_type: string; - npm_package_name: string; - GITHUB_ACTION: string; - GITHUB_RUN_NUMBER: string; - GITHUB_TRIGGERING_ACTOR: string; - COPILOT_EXPERIMENTS: string; - RUNNER_ARCH: string; - XDG_RUNTIME_DIR: string; - AGENT_TOOLSDIRECTORY: string; - npm_package_scripts_test_integration: string; - npm_package_exports___node_polyfills_import: string; - npm_package_devDependencies__types_set_cookie_parser: string; - SSL_CERT_DIR: string; - npm_package_scripts_test_unit: string; - npm_package_exports___vite_types: string; - npm_config_ignore_path: string; - LANG: string; - VCPKG_INSTALLATION_ROOT: string; - CONDA: string; - RUNNER_NAME: string; - XDG_CONFIG_HOME: string; - GITHUB_REF_NAME: string; - GITHUB_REPOSITORY: string; - npm_lifecycle_script: string; - npm_package_scripts_test_cross_platform_dev: string; - SUDO_COMMAND: string; - ANDROID_NDK_ROOT: string; - GITHUB_ACTION_REF: string; - DEBIAN_FRONTEND: string; - npm_package_scripts_test: string; - npm_package_dependencies_esm_env: string; - npm_config_version_git_message: string; - SHELL: string; - GITHUB_REPOSITORY_ID: string; - GITHUB_ACTIONS: string; - CPD_SAVE_TRAJECTORY_OUTPUT: string; - npm_lifecycle_event: string; - npm_package_repository_url: string; - npm_package_version: string; - GITHUB_REF_PROTECTED: string; - npm_config_argv: string; - npm_package_scripts_generate_types: string; - npm_package_scripts_check_all: string; - npm_package_devDependencies_svelte: string; - npm_package_dependencies_cookie: string; - GITHUB_WORKSPACE: string; - SUDO_USER: string; - ACCEPT_EULA: string; - DOTNET_SYSTEM_NET_DISABLEIPV6: string; - GITHUB_JOB: string; - YARN_IGNORE_PATH: string; - npm_package_exports___node_import: string; - GITHUB_SHA: string; - GITHUB_RUN_ATTEMPT: string; - COPILOT_AGENT_DEBUG: string; - npm_package_devDependencies__types_sade: string; - npm_config_version_git_tag: string; - npm_config_version_git_sign: string; - GITHUB_REF: string; - COPILOT_AGENT_ISSUE_NUMBER: string; - COPILOT_AGENT_SOURCE_ENVIRONMENT: string; - GITHUB_ACTOR: string; - FIREWALL_RULESET_CONTENT: string; - ANDROID_SDK_ROOT: string; - npm_package_license: string; - npm_config_strict_ssl: string; - npm_package_scripts_format: string; - GITHUB_PATH: string; + HOMEDRIVE: string; + HOMEPATH: string; + HOSTNAME: string; + INFOPATH: string; + INIT_CWD: string; JAVA_HOME: string; - PWD: string; - GITHUB_ACTOR_ID: string; - RUNNER_WORKSPACE: string; + LANG: string; + LOCALAPPDATA: string; + LOGONSERVER: string; + MANPATH: string; + MINGW_CHOST: string; + MINGW_PACKAGE_PREFIX: string; + MINGW_PREFIX: string; + MSYSTEM: string; + MSYSTEM_CARCH: string; + MSYSTEM_CHOST: string; + MSYSTEM_PREFIX: string; + NODE: string; + NoDefaultCurrentDirectoryInExePath: string; + npm_config_argv: string; + npm_config_bin_links: string; + npm_config_ignore_optional: string; + npm_config_ignore_path: string; + npm_config_ignore_scripts: string; + npm_config_init_license: string; + npm_config_init_version: string; + npm_config_registry: string; + npm_config_save_prefix: string; + npm_config_strict_ssl: string; + npm_config_user_agent: string; + npm_config_version_commit_hooks: string; + npm_config_version_git_message: string; + npm_config_version_git_sign: string; + npm_config_version_git_tag: string; + npm_config_version_tag_prefix: string; npm_execpath: string; + npm_lifecycle_event: string; + npm_lifecycle_script: string; + npm_node_execpath: string; + npm_package_bin_svelte_kit: string; + npm_package_dependencies_cookie: string; + npm_package_dependencies_devalue: string; + npm_package_dependencies_esm_env: string; + npm_package_dependencies_import_meta_resolve: string; + npm_package_dependencies_kleur: string; + npm_package_dependencies_magic_string: string; + npm_package_dependencies_mrmime: string; + npm_package_dependencies_sade: string; npm_package_dependencies_set_cookie_parser: string; - COPILOT_AGENT_PR_NUMBER: string; - HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: string; - GITHUB_EVENT_NAME: string; - HOMEBREW_NO_AUTO_UPDATE: string; - ANDROID_HOME: string; - GITHUB_SERVER_URL: string; - GECKOWEBDRIVER: string; - GHCUP_INSTALL_BASE_PREFIX: string; - GITHUB_OUTPUT: string; + npm_package_dependencies_sirv: string; + npm_package_dependencies_tiny_glob: string; + npm_package_dependencies__types_cookie: string; + npm_package_description: string; + npm_package_devDependencies_dts_buddy: string; + npm_package_devDependencies_rollup: string; + npm_package_devDependencies_svelte: string; + npm_package_devDependencies_svelte_preprocess: string; + npm_package_devDependencies_typescript: string; + npm_package_devDependencies_vite: string; + npm_package_devDependencies_vitest: string; + npm_package_devDependencies__playwright_test: string; + npm_package_devDependencies__sveltejs_vite_plugin_svelte: string; + npm_package_devDependencies__types_connect: string; + npm_package_devDependencies__types_node: string; + npm_package_devDependencies__types_sade: string; + npm_package_devDependencies__types_set_cookie_parser: string; + npm_package_engines_node: string; + npm_package_exports___hooks_import: string; + npm_package_exports___hooks_types: string; + npm_package_exports___import: string; + npm_package_exports___node_import: string; + npm_package_exports___node_polyfills_import: string; + npm_package_exports___node_polyfills_types: string; + npm_package_exports___node_types: string; + npm_package_exports___package_json: string; npm_package_exports___types: string; - EDGEWEBDRIVER: string; - COPILOT_EXPERIMENT_ASSIGNMENT_CONTEXT: string; + npm_package_exports___vite_import: string; + npm_package_exports___vite_types: string; + npm_package_files_0: string; + npm_package_files_1: string; + npm_package_files_2: string; + npm_package_files_3: string; + npm_package_files_4: string; + npm_package_files_5: string; + npm_package_files_6: string; + npm_package_homepage: string; + npm_package_license: string; + npm_package_name: string; + npm_package_peerDependencies_svelte: string; npm_package_peerDependencies_vite: string; npm_package_peerDependencies__sveltejs_vite_plugin_svelte: string; - npm_config_save_prefix: string; - npm_config_ignore_optional: string; - ANDROID_NDK: string; - SGX_AESM_ADDR: string; - CHROME_BIN: string; + npm_package_readmeFilename: string; + npm_package_repository_directory: string; + npm_package_repository_type: string; + npm_package_repository_url: string; + npm_package_scripts_check: string; + npm_package_scripts_check_all: string; + npm_package_scripts_format: string; + npm_package_scripts_generate_types: string; + npm_package_scripts_generate_version: string; + npm_package_scripts_lint: string; + npm_package_scripts_postinstall: string; + npm_package_scripts_test: string; + npm_package_scripts_test_cross_platform_build: string; + npm_package_scripts_test_cross_platform_dev: string; + npm_package_scripts_test_integration: string; + npm_package_scripts_test_unit: string; + npm_package_type: string; + npm_package_types: string; + npm_package_version: string; + NUMBER_OF_PROCESSORS: string; + OLDPWD: string; + OneDrive: string; + ORIGINAL_PATH: string; + ORIGINAL_TEMP: string; + ORIGINAL_TMP: string; + OS: string; + OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE: string; + PATH: string; + PATHEXT: string; + PKG_CONFIG_PATH: string; + PKG_CONFIG_SYSTEM_INCLUDE_PATH: string; + PKG_CONFIG_SYSTEM_LIBRARY_PATH: string; + PLINK_PROTOCOL: string; + PROCESSOR_ARCHITECTURE: string; + PROCESSOR_IDENTIFIER: string; + PROCESSOR_LEVEL: string; + PROCESSOR_REVISION: string; + ProgramData: string; + PROGRAMFILES: string; + ProgramW6432: string; + PROMPT: string; + PSModulePath: string; + PUBLIC: string; PUPPETEER_SKIP_DOWNLOAD: string; - SELENIUM_JAR_PATH: string; - MEMORY_PRESSURE_WRITE: string; - COPILOT_AGENT_COMMIT_EMAIL: string; - COPILOT_AGENT_FIREWALL_LOG_FILE: string; - COPILOT_FEATURE_FLAGS: string; - npm_package_exports___node_polyfills_types: string; - INIT_CWD: string; - COPILOT_API_URL: string; - ANDROID_NDK_HOME: string; - GITHUB_STEP_SUMMARY: string; - COPILOT_AGENT_BASE_COMMIT: string; - COPILOT_AGENT_TIMEOUT_MIN: string; - npm_package_exports___hooks_import: string; - npm_package_dependencies_import_meta_resolve: string; + PWD: string; + SHELL: string; + SHLVL: string; + SSH_ASKPASS: string; + SYSTEMDRIVE: string; + SYSTEMROOT: string; + TEMP: string; + TERM: string; + TMP: string; + TMPDIR: string; + USERDOMAIN: string; + USERDOMAIN_ROAMINGPROFILE: string; + USERNAME: string; + USERPROFILE: string; + VS140COMNTOOLS: string; + WINDIR: string; + WXDRIVE_START_ARGS: string; + YARN_IGNORE_PATH: string; + ZES_ENABLE_SYSMAN: string; [key: `PUBLIC_${string}`]: undefined; [key: `${string}`]: string | undefined; } diff --git a/packages/rrweb-player/src/Player.svelte b/packages/rrweb-player/src/Player.svelte index 242c4f65..3b0ecc56 100644 --- a/packages/rrweb-player/src/Player.svelte +++ b/packages/rrweb-player/src/Player.svelte @@ -28,6 +28,15 @@ export let inactiveColor: NonNullable = '#D4D4D4'; let replayer: Replayer; + const pendingEventListeners: Array<{ + event: string; + handler: (detail: unknown) => unknown; + }> = []; + const controllerEvents = new Set([ + 'ui-update-current-time', + 'ui-update-progress', + 'ui-update-player-state', + ]); export const getMirror = () => replayer.getMirror(); @@ -83,14 +92,13 @@ event: string, handler: (detail: unknown) => unknown, ) => { + if (!replayer) { + pendingEventListeners.push({ event, handler }); + return; + } replayer.on(event, handler); - switch (event) { - case 'ui-update-current-time': - case 'ui-update-progress': - case 'ui-update-player-state': - controller.$on(event, ({ detail }) => handler(detail)); - default: - break; + if (controllerEvents.has(event) && controller) { + controller.$on(event, ({ detail }) => handler(detail)); } }; @@ -130,6 +138,14 @@ }; onMount(() => { + const debugTarget = window as Window & { + __rrwebPlayerDebug?: Record; + }; + debugTarget.__rrwebPlayerDebug = { + stage: 'mounted', + hasFrame: !!frame, + eventsLength: events?.length, + }; // runtime type check if (speedOption !== undefined && typeOf(speedOption) !== 'array') { throw new Error('speedOption must be array'); @@ -157,8 +173,23 @@ unpackFn: unpack, ...$$props, }); + debugTarget.__rrwebPlayerDebug = { + ...debugTarget.__rrwebPlayerDebug, + stage: 'replayer-created', + hasWrapper: !!replayer.wrapper, + hasIframe: !!replayer.iframe, + }; + + pendingEventListeners.splice(0).forEach(({ event, handler }) => { + replayer.on(event, handler); + }); replayer.on('resize', (dimension) => { + debugTarget.__rrwebPlayerDebug = { + ...debugTarget.__rrwebPlayerDebug, + stage: 'resized', + dimension, + }; updateScale( replayer.wrapper, dimension as { width: number; height: number }, diff --git a/packages/rrweb-player/vite.config.ts b/packages/rrweb-player/vite.config.ts index db4f4cf9..d477abae 100644 --- a/packages/rrweb-player/vite.config.ts +++ b/packages/rrweb-player/vite.config.ts @@ -34,6 +34,9 @@ function viteSvelteDts(): Plugin { console.log('Generating .d.ts files for Svelte components...'); const { input } = options; + if (!input) { + return; + } if (typeof input === 'string') { await generateDts(input); } else if (Array.isArray(input)) { diff --git a/packages/rrweb/scripts/stream.js b/packages/rrweb/scripts/stream.js index b4e63a7d..39f4db8a 100644 --- a/packages/rrweb/scripts/stream.js +++ b/packages/rrweb/scripts/stream.js @@ -20,9 +20,14 @@ const emitter = new EventEmitter(); async function injectRecording(frame, serverURL) { try { - await frame.addScriptTag({ url: `${serverURL}/rrweb.umd.cjs` }); await frame.addScriptTag({ - url: `${serverURL}/plugins/rrweb-plugin-canvas-webrtc-record.js`, + path: path.resolve(__dirname, '../dist/rrweb.umd.cjs'), + }); + await frame.addScriptTag({ + path: path.resolve( + __dirname, + '../../plugins/rrweb-plugin-canvas-webrtc-record/dist/rrweb-plugin-canvas-webrtc-record.umd.cjs', + ), }); await frame.evaluate(() => { const win = window; @@ -80,9 +85,14 @@ async function startReplay(page, serverURL, recordedPage) { }, id); }); - await page.addScriptTag({ url: `${serverURL}/rrweb.umd.cjs` }); await page.addScriptTag({ - url: `${serverURL}/plugins/rrweb-plugin-canvas-webrtc-replay.js`, + path: path.resolve(__dirname, '../dist/rrweb.umd.cjs'), + }); + await page.addScriptTag({ + path: path.resolve( + __dirname, + '../../plugins/rrweb-plugin-canvas-webrtc-replay/dist/rrweb-plugin-canvas-webrtc-replay.umd.cjs', + ), }); return page.evaluate(() => { @@ -130,13 +140,18 @@ void (async () => { server = await startServer(); serverURL = getServerURL(server); - const { url } = await inquirer.prompt([ - { - type: 'input', - name: 'url', - message: `Enter the url you want to record, e.g ${defaultURL}: `, - }, - ]); + const autoUrl = process.env.RRWEB_STREAM_URL; + let url = autoUrl; + if (!url) { + const answers = await inquirer.prompt([ + { + type: 'input', + name: 'url', + message: `Enter the url you want to record, e.g ${defaultURL}: `, + }, + ]); + url = answers.url; + } await record(url); @@ -163,6 +178,7 @@ void (async () => { const replayingBrowser = await puppeteer.launch({ headless: false, devtools, + executablePath: process.env.PUPPETEER_EXECUTABLE_PATH, defaultViewport: { width: 1600, height: 900, @@ -184,6 +200,7 @@ void (async () => { const recordingBrowser = await puppeteer.launch({ headless: false, devtools, + executablePath: process.env.PUPPETEER_EXECUTABLE_PATH, defaultViewport: { width: 1600, height: 900, diff --git a/packages/rrweb/scripts/utils.js b/packages/rrweb/scripts/utils.js index 70cf3583..5a725c41 100644 --- a/packages/rrweb/scripts/utils.js +++ b/packages/rrweb/scripts/utils.js @@ -37,7 +37,10 @@ export const startServer = (defaultPort = 3030) => try { const data = fs.readFileSync(pathname); const ext = path.parse(pathname).ext; - res.setHeader('Content-type', mimeType[ext] || 'text/plain'); + const contentType = /\.js$/.test(sanitizePath) + ? 'text/javascript' + : mimeType[ext] || 'text/plain'; + res.setHeader('Content-type', contentType); res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET'); res.setHeader('Access-Control-Allow-Headers', 'Content-type'); diff --git a/vite.config.default.ts b/vite.config.default.ts index fe6d6d6c..16014a97 100644 --- a/vite.config.default.ts +++ b/vite.config.default.ts @@ -3,7 +3,7 @@ import dts from 'vite-plugin-dts'; import { copyFileSync, mkdirSync, existsSync } from 'node:fs'; import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite'; import { build, Format } from 'esbuild'; -import { resolve, dirname } from 'path'; +import { resolve, dirname, relative, basename } from 'path'; import { umdWrapper } from 'esbuild-plugin-umd-wrapper'; import * as fs from 'node:fs'; import { visualizer } from 'rollup-plugin-visualizer'; @@ -51,9 +51,15 @@ function minifyAndUMDPlugin({ outDir, }); } else { - const umdDir = dirname(outputFilePath).replace('/dist', '/umd'); + const relativeOutputPath = relative(outputOptions.dir!, outputFilePath); + const umdBasePath = resolve( + dirname(outputOptions.dir!), + 'umd', + relativeOutputPath, + ); + const umdDir = dirname(umdBasePath); if (!existsSync(umdDir)) { - mkdirSync(umdDir); + mkdirSync(umdDir, { recursive: true }); } const outUmd = `${outputFilePath}.umd.cjs`; await buildFile({ @@ -66,10 +72,7 @@ function minifyAndUMDPlugin({ }); // Workaround because jsdelivr does use correct mime types for .umd.cjs // More info: https://github.com/jsdelivr/jsdelivr/issues/18584 https://github.com/rrweb-io/rrweb/pull/1704 - copyFileSync( - outUmd, - `${outputFilePath.replace('/dist/', '/umd/')}.js`, - ); + copyFileSync(outUmd, `${umdBasePath}.js`); const outUmdMin = `${outputFilePath}.umd.min.cjs`; await buildFile({ name, @@ -79,10 +82,7 @@ function minifyAndUMDPlugin({ isCss: false, outDir, }); - copyFileSync( - outUmdMin, - `${outputFilePath.replace('/dist/', '/umd/')}.min.js`, - ); + copyFileSync(outUmdMin, `${umdBasePath}.min.js`); } } } @@ -119,7 +119,7 @@ async function buildFile({ }), ], }); - const filename = output.replace(new RegExp(`^.+/(${outDir}/)`), '$1'); + const filename = relative(process.cwd(), output).split(/\\/g).join('/'); console.log(filename); console.log(`${filename}.map`); }