rusty-replay 0.0.4

package/packages/eslint-config/base.js

@@ -0,0 +1,32 @@
+import js from "@eslint/js"
+import eslintConfigPrettier from "eslint-config-prettier"
+import onlyWarn from "eslint-plugin-only-warn"
+import turboPlugin from "eslint-plugin-turbo"
+import tseslint from "typescript-eslint"
+
+/**
+ * A shared ESLint configuration for the repository.
+ *
+ * @type {import("eslint").Linter.Config}
+ * */
+export const config = [
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      turbo: turboPlugin,
+    },
+    rules: {
+      "turbo/no-undeclared-env-vars": "warn",
+    },
+  },
+  {
+    plugins: {
+      onlyWarn,
+    },
+  },
+  {
+    ignores: ["dist/**"],
+  },
+]

package/packages/eslint-config/next.js

@@ -0,0 +1,51 @@
+import js from "@eslint/js"
+import pluginNext from "@next/eslint-plugin-next"
+import eslintConfigPrettier from "eslint-config-prettier"
+import pluginReact from "eslint-plugin-react"
+import pluginReactHooks from "eslint-plugin-react-hooks"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+
+import { config as baseConfig } from "./base.js"
+
+/**
+ * A custom ESLint configuration for libraries that use Next.js.
+ *
+ * @type {import("eslint").Linter.Config}
+ * */
+export const nextJsConfig = [
+  ...baseConfig,
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    ...pluginReact.configs.flat.recommended,
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.serviceworker,
+      },
+    },
+  },
+  {
+    plugins: {
+      "@next/next": pluginNext,
+    },
+    rules: {
+      ...pluginNext.configs.recommended.rules,
+      ...pluginNext.configs["core-web-vitals"].rules,
+    },
+  },
+  {
+    plugins: {
+      "react-hooks": pluginReactHooks,
+    },
+    settings: { react: { version: "detect" } },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      // React scope no longer necessary with new JSX transform.
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+    },
+  },
+]

package/packages/eslint-config/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@workspace/eslint-config",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "exports": {
+    "./base": "./base.js",
+    "./next-js": "./next.js",
+    "./react-internal": "./react-internal.js"
+  },
+  "devDependencies": {
+    "@next/eslint-plugin-next": "^15.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.24.1",
+    "@typescript-eslint/parser": "^8.24.1",
+    "eslint": "^9.20.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-turbo": "^2.4.2",
+    "globals": "^15.15.0",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.24.1"
+  }
+}

package/packages/eslint-config/react-internal.js

@@ -0,0 +1,41 @@
+import js from "@eslint/js"
+import eslintConfigPrettier from "eslint-config-prettier"
+import pluginReact from "eslint-plugin-react"
+import pluginReactHooks from "eslint-plugin-react-hooks"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+
+import { config as baseConfig } from "./base.js"
+
+/**
+ * A custom ESLint configuration for libraries that use React.
+ *
+ * @type {import("eslint").Linter.Config} */
+export const config = [
+  ...baseConfig,
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.serviceworker,
+        ...globals.browser,
+      },
+    },
+  },
+  {
+    plugins: {
+      "react-hooks": pluginReactHooks,
+    },
+    settings: { react: { version: "detect" } },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      // React scope no longer necessary with new JSX transform.
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+    },
+  },
+]

package/packages/rusty-replay/README.md

@@ -0,0 +1,165 @@
+# 🦀 rusty-replay
+
+웹 클라이언트에서 발생한 오류를 수집하고, 직전 사용자 활동을 리플레이 형태로 함께 전송하는 경량 오류 추적 도구입니다.
+
+`rrweb` 기반의 사용자 행동 리플레이 기능과 `axios` 에러 자동 전송까지 지원합니다.
+
+## 📦 설치
+
+```bash
+npm install rusty-replay
+```
+
+---
+
+## ⚙️ 초기화
+
+Next.js에서 `rusty-replay`는 일반적으로 `app/providers.tsx` 또는 `layout.tsx`에서 초기화합니다.
+
+```ts
+import { init } from 'rusty-replay';
+
+init({
+  endpoint: 'https://your-api.com/batch-events',
+  apiKey: 'YOUR_PUBLIC_API_KEY',
+  flushIntervalMs: 10000, // 버퍼가 찰 때까지 최대 대기 시간 (ms)
+  maxBufferSize: 2000000, // 전송 전 최대 버퍼 사이즈 (bytes)
+  beforeErrorSec: 10, // 에러 발생 전 몇 초간의 이벤트를 리플레이로 남길지
+});
+```
+
+---
+
+## 🧠 글로벌 에러 자동 캡처
+
+```ts
+import { setupGlobalErrorHandler } from 'rusty-replay';
+
+setupGlobalErrorHandler();
+```
+
+- `window.onerror`
+- `window.onunhandledrejection`
+  을 자동 감지하여 오류를 서버로 전송합니다.
+
+---
+
+## 🔧 Axios 에러 자동 전송
+
+```ts
+import axios from 'axios';
+import { captureException, AdditionalInfo } from 'rusty-replay';
+
+axios.interceptors.response.use(
+  (res) => res,
+  (error) => {
+    if (axios.isAxiosError(error)) {
+      const additionalInfo: Partial<AdditionalInfo> = {
+        pageUrl: window.location.href,
+        request: {
+          url: error.config?.url ?? '',
+          method: error.config?.method ?? '',
+          headers: error.config?.headers ?? {},
+        },
+        response: {
+          status: error.response?.status ?? 0,
+          statusText: error.response?.statusText ?? '',
+          data: {
+            message: error.response?.data?.message ?? '',
+            errorCode: error.response?.data?.errorCode ?? '',
+          },
+        },
+      };
+
+      captureException(
+        error instanceof Error ? error : new Error('API 요청 실패'),
+        additionalInfo
+      );
+    }
+
+    return Promise.reject(error);
+  }
+);
+```
+
+---
+
+## 🖥️ React Error Boundary 통합
+
+```tsx
+import { ErrorBoundary } from 'react-error-boundary';
+import { captureException } from 'rusty-replay';
+
+<ErrorBoundaryFallbackComponent={() => <div>오류가 발생했습니다.</div>}
+  onError={(error, info) => {
+    captureException(error);
+  }}
+>
+  <App />
+</ErrorBoundary>
+
+```
+
+---
+
+## 🔁 리플레이 재생 (rrweb-player)
+
+```tsx
+import { decompressFromBase64 } from 'rusty-replay';
+import 'rrweb-player/dist/style.css';
+
+const events = decompressFromBase64(error.replay);
+
+new Player({
+  target: document.getElementById('player')!,
+  props: {
+    events,
+    width: 1000,
+    height: 600,
+    autoPlay: false,
+    showController: true,
+    skipInactive: true,
+  },
+});
+```
+
+---
+
+## 📋 서버로 전송되는 데이터 Payload
+
+```ts
+{
+  message: 'Uncaught TypeError: ...',
+  stacktrace: 'TypeError: ...',
+  replay: 'compressedBase64Data',
+  environment: 'production',
+  browser: 'Chrome 123.0',
+  os: 'macOS 14',
+  userAgent: '...',
+  appVersion: '1.0.0',
+  apiKey: 'YOUR_API_KEY',
+  additionalInfo: {
+    request: {...},
+    response: {...},
+    pageUrl: 'https://your.site/path'
+  },
+  userId: 123
+}
+
+```
+
+---
+
+## 📎 API 참고
+
+### `init(options: InitOptions)`
+
+옵션 설명:
+
+| 옵션              | 타입   | 설명                                   |
+| ----------------- | ------ | -------------------------------------- |
+| `endpoint`        | string | 에러 수집 서버의 엔드포인트            |
+| `apiKey`          | string | 프로젝트 식별용 API Key                |
+| `flushIntervalMs` | number | 에러 전송 간격 (기본: 10초)            |
+| `maxBufferSize`   | number | 최대 전송 버퍼 크기                    |
+| `beforeErrorSec`  | number | 리플레이 수집 구간 (기본: 10초 전까지) |

package/packages/rusty-replay/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "rusty-replay",
+  "version": "1.0.13",
+  "description": "Lightweight error tracking and replay system for React apps using rrweb and Rust-powered backend integration.",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "rrweb",
+    "replay",
+    "error-tracking",
+    "frontend",
+    "typescript",
+    "react",
+    "cli",
+    "monitoring"
+  ],
+  "browser": {
+    "require-in-the-middle": false,
+    "import-in-the-middle": false,
+    "@opentelemetry/instrumentation": false
+  },
+  "author": "Jaeha Lee <wogkdkrm112@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rusty-replay/replay"
+  },
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@rrweb/types": "^2.0.0-alpha.4",
+    "react": "^16.8 || ^17 || ^18 || ^19",
+    "rrweb": "^2.0.0-alpha.4",
+    "rrweb-player": "^1.0.0-alpha.4",
+    "import-in-the-middle": "^1.13.1",
+    "require-in-the-middle": "^7.5.2"
+  },
+  "dependencies": {
+    "@opentelemetry/context-zone": "^2.0.0",
+    "@opentelemetry/core": "^2.0.0",
+    "@opentelemetry/exporter-trace-otlp-proto": "^0.200.0",
+    "@opentelemetry/instrumentation": "^0.200.0",
+    "@opentelemetry/instrumentation-fetch": "^0.200.0",
+    "@opentelemetry/instrumentation-xml-http-request": "^0.200.0",
+    "@opentelemetry/resources": "^2.0.0",
+    "@opentelemetry/sdk-trace-base": "^2.0.0",
+    "@opentelemetry/sdk-trace-web": "^2.0.0",
+    "@opentelemetry/semantic-conventions": "^1.32.0",
+    "@rrweb/packer": "2.0.0-alpha.18",
+    "axios": "^1.8.4",
+    "fflate": "^0.8.2",
+    "rrweb-snapshot": "2.0.0-alpha.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3"
+  }
+}

package/packages/rusty-replay/src/environment.ts

@@ -0,0 +1,27 @@
+export function getBrowserInfo() {
+  const ua = navigator.userAgent;
+  let browser = 'unknown',
+    os = 'unknown';
+
+  if (ua.includes('Firefox')) browser = 'Firefox';
+  else if (ua.includes('SamsungBrowser')) browser = 'Samsung Browser';
+  else if (ua.includes('Opera') || ua.includes('OPR')) browser = 'Opera';
+  else if (ua.includes('Trident')) browser = 'IE';
+  else if (ua.includes('Edge')) browser = 'Edge (Legacy)';
+  else if (ua.includes('Edg')) browser = 'Edge';
+  else if (ua.includes('Chrome')) browser = 'Chrome';
+  else if (ua.includes('Safari')) browser = 'Safari';
+
+  if (ua.includes('Windows')) os = 'Windows';
+  else if (ua.includes('Mac')) os = 'macOS';
+  else if (ua.includes('Linux')) os = 'Linux';
+  else if (ua.includes('Android')) os = 'Android';
+  else if (ua.includes('like Mac')) os = 'iOS';
+
+  return { browser, os, userAgent: ua };
+}
+
+export function getEnvironment(): 'development' | 'staging' | 'production' {
+  if (process.env.NODE_ENV === 'development') return 'development';
+  return 'production';
+}

package/packages/rusty-replay/src/error-batcher.ts

@@ -0,0 +1,75 @@
+import axios from 'axios';
+import type { BatcherOptions, BatchedEvent } from './reporter';
+
+export class ErrorBatcher {
+  private queue: BatchedEvent[] = [];
+  private isFlushing = false;
+  private flushTimer: number;
+  private readonly apiKey: string;
+
+  constructor(private opts: BatcherOptions) {
+    this.apiKey = opts.apiKey;
+    const interval = opts.flushIntervalMs ?? 30000;
+    this.flushTimer = window.setInterval(() => this.flush(), interval);
+    window.addEventListener('beforeunload', () => this.flushOnUnload());
+  }
+
+  public getApiKey(): string {
+    return this.apiKey;
+  }
+
+  public capture(evt: Omit<BatchedEvent, 'id' | 'timestamp'>): string {
+    const id = this.makeId();
+    const timestamp = new Date().toISOString();
+    const record: BatchedEvent = { id, timestamp, ...evt };
+
+    if (this.queue.length >= (this.opts.maxBufferSize ?? 64)) {
+      this.queue.shift();
+    }
+    this.queue.push(record);
+    return id;
+  }
+
+  private async flush() {
+    if (this.isFlushing || this.queue.length === 0) return;
+    this.isFlushing = true;
+
+    const batch = this.queue.splice(0, this.queue.length);
+    try {
+      await axios.post(
+        this.opts.endpoint,
+        { events: batch },
+        {
+          maxBodyLength: 1000 * 1024 * 1024, // 10MB
+          maxContentLength: 1000 * 1024 * 1024, // 10MB
+          timeout: 30000,
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        }
+      );
+    } catch {
+      this.queue.unshift(...batch);
+    } finally {
+      this.isFlushing = false;
+    }
+  }
+
+  private flushOnUnload() {
+    if (!navigator.sendBeacon || this.queue.length === 0) return;
+    const payload = JSON.stringify({ events: this.queue });
+    navigator.sendBeacon(this.opts.endpoint, payload);
+  }
+
+  private makeId() {
+    return 'xxxx-xxxx-4xxx-yxxx'.replace(/[xy]/g, (c) => {
+      const r = (Math.random() * 16) | 0;
+      const v = c === 'x' ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  }
+
+  public destroy() {
+    clearInterval(this.flushTimer);
+  }
+}

package/packages/rusty-replay/src/front-end-tracer.ts

@@ -0,0 +1,86 @@
+import { W3CTraceContextPropagator } from '@opentelemetry/core';
+import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
+import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
+import {
+  resourceFromAttributes,
+  osDetector,
+  detectResources,
+} from '@opentelemetry/resources';
+import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
+
+export interface OtelConfig {
+  serviceName?: string;
+  endpoint?: string;
+  isSyntheticRequest?: boolean;
+  scheduledDelayMillis?: number;
+  customHeaders?: Record<string, string>;
+}
+
+export const initOtel = async (config: OtelConfig = {}) => {
+  const finalConfig = {
+    serviceName: config.serviceName ?? 'replay',
+    endpoint: config.endpoint ?? 'http://localhost:8081/traces',
+    isSyntheticRequest: config.isSyntheticRequest ?? false,
+    scheduledDelayMillis: config.scheduledDelayMillis ?? 500,
+    customHeaders: {
+      'Content-Type': 'application/x-protobuf',
+      ...config.customHeaders,
+    },
+  };
+
+  const { ZoneContextManager } = await import('@opentelemetry/context-zone');
+
+  let resource = resourceFromAttributes({
+    [ATTR_SERVICE_NAME]: finalConfig.serviceName,
+  });
+  if (finalConfig.isSyntheticRequest) {
+    resource = resource.merge(
+      resourceFromAttributes({ 'app.synthetic_request': 'true' })
+    );
+  }
+  resource = resource.merge(detectResources({ detectors: [osDetector] }));
+
+  const spanProcessor = new BatchSpanProcessor(
+    new OTLPTraceExporter({
+      url: finalConfig.endpoint,
+      headers: finalConfig.customHeaders,
+    }),
+    { scheduledDelayMillis: finalConfig.scheduledDelayMillis }
+  );
+  const provider = new WebTracerProvider({
+    resource,
+    spanProcessors: [spanProcessor],
+  });
+  provider.register({
+    contextManager: new ZoneContextManager(),
+    propagator: new W3CTraceContextPropagator(),
+  });
+
+  if (typeof window !== 'undefined') {
+    const backendOrigin = new URL(finalConfig.endpoint).origin;
+
+    const [{ FetchInstrumentation }, { XMLHttpRequestInstrumentation }] =
+      await Promise.all([
+        import('@opentelemetry/instrumentation-fetch'),
+        import('@opentelemetry/instrumentation-xml-http-request'),
+      ]);
+
+    const fetchInst = new FetchInstrumentation({
+      propagateTraceHeaderCorsUrls: [backendOrigin],
+      clearTimingResources: true,
+    });
+    const xhrInst = new XMLHttpRequestInstrumentation({
+      propagateTraceHeaderCorsUrls: [backendOrigin],
+      clearTimingResources: true,
+    });
+
+    fetchInst.setTracerProvider(provider);
+    xhrInst.setTracerProvider(provider);
+    fetchInst.enable();
+    xhrInst.enable();
+  }
+
+  console.log('OpenTelemetry initialized successfully');
+  return provider;
+};

package/packages/rusty-replay/src/handler.ts

@@ -0,0 +1,37 @@
+import { captureException } from './reporter';
+
+export function setupGlobalErrorHandler() {
+  if ((window as any).__errorHandlerSetup) return;
+
+  const origOnError = window.onerror;
+  window.onerror = function thisWindowOnError(
+    this: Window & WindowEventHandlers,
+    message: string | Event,
+    source?: string,
+    lineno?: number,
+    colno?: number,
+    error?: Error
+  ): boolean {
+    origOnError?.call(this, message, source, lineno, colno, error);
+    captureException(
+      error ??
+        new Error(typeof message === 'string' ? message : 'Unknown error')
+    );
+    return false;
+  };
+
+  const origOnUnhandledRejection = window.onunhandledrejection;
+  window.onunhandledrejection = function thisWindowOnRejection(
+    this: Window & WindowEventHandlers,
+    event: PromiseRejectionEvent
+  ): any {
+    origOnUnhandledRejection?.call(this, event);
+    const err =
+      event.reason instanceof Error
+        ? event.reason
+        : new Error(JSON.stringify(event.reason));
+    captureException(err);
+  } as typeof window.onunhandledrejection;
+
+  (window as any).__errorHandlerSetup = true;
+}

package/packages/rusty-replay/src/index.ts

@@ -0,0 +1,8 @@
+export * from './reporter';
+export { setupGlobalErrorHandler } from './handler';
+export { startRecording, getRecordedEvents } from './recorder';
+export { getBrowserInfo, getEnvironment } from './environment';
+export { ErrorBatcher } from './error-batcher';
+export type { BatchedEvent, InitOptions, AdditionalInfo } from './reporter';
+export { decompressFromBase64 } from './utils';
+export { initOtel } from './front-end-tracer';

package/packages/rusty-replay/src/recorder.ts

@@ -0,0 +1,71 @@
+import type { eventWithTime, listenerHandler } from '@rrweb/types';
+import { record } from 'rrweb';
+
+let events: eventWithTime[] = [];
+const MAX_EVENTS = 1000;
+let stopFn: listenerHandler | undefined = undefined;
+
+export function startRecording() {
+  events = [];
+  stopFn?.();
+  stopFn = record({
+    emit(event) {
+      if (event.type === 2) console.log('[rrweb] FullSnapshot 기록됨:', event);
+
+      events.push(event);
+      if (events.length > MAX_EVENTS) {
+        events = events.slice(-MAX_EVENTS);
+      }
+    },
+    // checkoutEveryNms: 1000, // 1초마다 체크아웃
+    checkoutEveryNms: 15000, // 15초마다 한 번
+    checkoutEveryNth: 100, // 100개 이벤트마다 한 번
+    maskAllInputs: true,
+    sampling: {
+      mouseInteraction: {
+        MouseUp: false,
+        MouseDown: false,
+        Click: false,
+        ContextMenu: false,
+        DblClick: false,
+        Focus: false,
+        Blur: false,
+        TouchStart: false,
+        TouchEnd: false,
+      },
+    },
+  });
+}
+
+export function getRecordedEvents(
+  beforeErrorSec = 10,
+  errorTime = Date.now(),
+  source = events
+): eventWithTime[] {
+  const sliced = source.filter(
+    (e) => errorTime - e.timestamp < beforeErrorSec * 1000
+  );
+
+  const snapshotCandidates = source.filter((e) => e.type === 2);
+  const lastSnapshot = [...snapshotCandidates]
+    .reverse()
+    .find((e) => e.timestamp <= errorTime);
+
+  if (lastSnapshot && !sliced.includes(lastSnapshot)) {
+    return [lastSnapshot, ...sliced];
+  }
+
+  if (!sliced.some((e) => e.type === 2)) {
+    console.warn('⚠️ Snapshot 없이 잘린 replay입니다. 복원 불가능할 수 있음.');
+  }
+
+  return sliced;
+}
+
+export function clearEvents() {
+  events = [];
+}
+
+export function getCurrentEvents(): eventWithTime[] {
+  return events.slice();
+}