rusty-replay 0.0.4

package/.eslintrc.js

@@ -0,0 +1,10 @@
+// This configuration only applies to the package manager root.
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  ignorePatterns: ["apps/**", "packages/**"],
+  extends: ["@workspace/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+}

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package/README.md

@@ -0,0 +1,92 @@
+# rusty replay
+
+**rusty replay**는 Sentry와 같은 제한된 세션 리플레이를 해결하기 위해 개발된 오류 추적 및 세션 리플레이 솔루션입니다. 무제한 세션 캡처와 데이터 소유권을 가진 채 비용을 크게 절감할 수 있습니다.
+
+## 주요 기능
+
+### 오류 추적
+
+- 자동 전역 오류 처리 (`window.onerror`, `unhandledrejection`)
+- 스택 트레이스 캡처 및 소스 매핑
+- 브라우저 및 환경 정보 수집
+
+### 세션 리플레이
+
+- 오류 발생 전 최대 10초 동안의 사용자 활동 기록
+- DOM 스냅샷 및 상호작용 캡처
+- 시간별 이벤트 추적
+
+### 대시보드
+
+- 다중 프로젝트 관리
+- 이슈 및 이벤트 목록
+- 인터랙티브 세션 리플레이 뷰어
+- 스택 트레이스 분석
+
+## 대시보드 화면
+
+### 프로젝트 상세보기
+
+<img width="500" alt="r-1" src="https://github.com/user-attachments/assets/459f4fd2-d074-4fd1-9a09-fe52ca05813f" />
+
+- 프로젝트의 모든 오류 이벤트를 종합적으로 볼 수 있는 대시보드
+
+### 프로젝트 이벤트 타임라인
+
+<img width="500" alt="r-2" src="https://github.com/user-attachments/assets/98437a01-ebe0-4235-bae3-e9a8b67373d1" />
+
+- 프로젝트에서 캡처된 모든 이벤트를 시간순으로 확인
+
+### 이벤트 목록
+
+<img width="500" alt="r-3" src="https://github.com/user-attachments/assets/cc86a2ff-73b2-4a80-841c-d1b7952a35bf" />
+
+- 모든 이벤트를 한눈에 확인
+
+### 이벤트 상세보기
+
+<img width="500" alt="r-4" src="https://github.com/user-attachments/assets/6cd280f1-f62e-4c4a-9eaa-36d63d805e68" />
+
+- 이벤트 발생 시간, API 정보, 스택 트레이스 등 자세한 정보를 확인
+
+### 스택 트레이스 분석
+
+<img width="500" alt="r-5" src="https://github.com/user-attachments/assets/63252d6f-a0fb-499b-9513-c614f58792d8" />
+
+- 오류가 발생한 정확한 위치와 원인을 파악
+
+### 세션 리플레이
+
+<img width="500" alt="r-7" src="https://github.com/user-attachments/assets/7fb90cae-1b12-48a9-88e4-7e45cb707091" />
+
+- 오류 발생 전 사용자 활동을 재생하여 문제 상황 파악
+
+## 기술 스택
+
+- **프론트엔드 SDK**: TypeScript, rrweb
+- **프론트엔드 대시보드**: Next.js v15
+- **백엔드**: Rust, Actix-Web
+- **데이터베이스**: MySQL, SeaORM
+
+### 🔄 flow chart
+
+<img width="500" alt="r-4" src="https://github.com/user-attachments/assets/652bebb0-2a5f-48c7-b9d5-bfe0221c7acc" />
+
+```
+rusty-replay/
+├── apps
+│   └── web          # Dashboard (Next.js + rrweb)
+├── packages
+│   ├── rusty-replay # SDK (TypeScript + rrweb)
+│   └── ui           # Shared UI components
+```
+
+## 🦀 Backend Repository
+
+🔗 **GitHub 저장소**: [rusty-replay/replay-be](https://github.com/rusty-replay/replay-be)
+
+## 🕹️ SDK Repository
+
+📦 NPM 패키지: [`npm i rusty-replay`](https://www.npmjs.com/package/rusty-replay)
+
+📖 [SDK 사용법 바로가기](https://github.com/rusty-replay/replay/tree/main/packages/rusty-replay#readme)

package/apps/web/README.md

@@ -0,0 +1,11 @@
+### 🔧 Environment Variables
+
+`.env` 파일을 프로젝트 루트에 생성하고 아래 내용을 추가해주세요:
+
+```
+# Back-end end point 연결
+NEXT_PUBLIC_API_URL=http://localhost:8081
+
+# 프로젝트 apiKey
+NEXT_PUBLIC_RUSTY_REPLAY_API_KEY=proj_xxx
+```

package/apps/web/api/auth/keys.ts

@@ -0,0 +1,3 @@
+export const authKeys = {
+  profile: () => `/api/auth/me`,
+};

package/apps/web/api/auth/types.ts

@@ -0,0 +1,25 @@
+export interface SignInRequest {
+  email: string;
+  password: string;
+}
+
+export interface SignInResponse {
+  token: string;
+  refreshToken: string;
+  userId: number;
+  username: string;
+  email: string;
+  role: 'user' | 'admin';
+}
+
+export interface RefreshTokenResponse {
+  accessToken: string;
+  refreshToken: string;
+}
+
+export interface UserResponse {
+  id: number;
+  username: string;
+  email: string;
+  role: string; // TODO
+}

package/apps/web/api/auth/use-query-profile.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { authKeys } from './keys';
+import axiosInstance from '../axios';
+import { UseQueryCustomOptions } from '../types';
+import { UserResponse } from './types';
+
+export function useQueryProfile(
+  options?: UseQueryCustomOptions<void, UserResponse>
+) {
+  const queryKey = authKeys.profile();
+  const queryFn = async () =>
+    await axiosInstance.get(queryKey).then((res) => res.data);
+
+  return useQuery({
+    queryKey: [queryKey],
+    queryFn,
+    ...options,
+  });
+}

package/apps/web/api/auth/use-sign-in.ts

@@ -0,0 +1,24 @@
+import { useMutation } from '@tanstack/react-query';
+import { UseMutationCustomOptions } from '../types';
+import { SignInRequest, SignInResponse } from './types';
+import axiosInstance from '../axios';
+import { toast } from '@workspace/ui/components/sonner';
+
+export function useSignIn(
+  options?: UseMutationCustomOptions<SignInResponse, SignInRequest>
+) {
+  const mutationKey = '/auth/login';
+  const mutationFn = async (data: SignInRequest) =>
+    await axiosInstance.post(mutationKey, data).then((res) => res.data);
+
+  return useMutation({
+    mutationKey: [mutationKey],
+    mutationFn,
+    onSuccess: (data) => {
+      toast.success('로그인 성공', {
+        description: `${data.username}님 환영합니다!`,
+      });
+    },
+    ...options,
+  });
+}

package/apps/web/api/axios.ts

@@ -0,0 +1,122 @@
+import axios, { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
+import { RefreshTokenResponse } from './auth/types';
+import { ResponseError } from './types';
+import { toast } from '@workspace/ui/components/sonner';
+import { captureException } from 'rusty-replay';
+
+interface CustomInternalAxiosRequestConfig extends InternalAxiosRequestConfig {
+  _retry?: boolean;
+}
+
+const axiosInstance: AxiosInstance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
+  withCredentials: true,
+});
+
+let isRefreshing = false;
+let refreshSubscribers: ((token: string) => void)[] = [];
+
+const subscribeTokenRefresh = (cb: (token: string) => void) => {
+  refreshSubscribers.push(cb);
+};
+
+const onRefreshed = (token: string) => {
+  refreshSubscribers.map((cb) => cb(token));
+  refreshSubscribers = [];
+};
+
+// 현재 경로가 인증 페이지인지 확인하는 함수
+const isAuthPage = () => {
+  if (typeof window === 'undefined') return false;
+
+  const path = window.location.pathname;
+  return path === '/login' || path === '/signup' || path === '/find-password';
+};
+
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  async (error: ResponseError) => {
+    const originalRequest = error.config as CustomInternalAxiosRequestConfig;
+    console.log('error>>>>>>>>>>>', error);
+
+    if (!originalRequest) {
+      return Promise.reject(error);
+    }
+
+    const errorCode = error.response?.data?.errorCode;
+    console.log('errorCode>>>', errorCode);
+
+    // 인증 관련 에러 처리
+    if (
+      [
+        'InvalidAuthToken',
+        'InvalidRefreshToken',
+        'ExpiredRefreshToken',
+        'ExpiredAuthToken',
+        'NeedAuthToken',
+      ].includes(errorCode!)
+    ) {
+      // 인증 페이지(로그인, 회원가입 등)에서는 리다이렉션 및 토큰 갱신 시도를 하지 않음
+      if (isAuthPage()) {
+        return Promise.reject(error);
+      }
+
+      // Refresh 토큰 만료/없음 처리
+      if (
+        errorCode === 'ExpiredRefreshToken' ||
+        errorCode === 'InvalidRefreshToken'
+      ) {
+        toast.error('세션이 만료되었습니다. 다시 로그인해 주세요.');
+
+        if (!window.location.pathname.includes('/sign-in')) {
+          window.location.href = '/sign-in';
+        }
+
+        return new Promise(() => {});
+      }
+
+      // Access 토큰 만료 처리
+      if (
+        (errorCode === 'InvalidAuthToken' ||
+          errorCode === 'ExpiredAuthToken') &&
+        //errorCode === 'NeedAuthToken'
+        !originalRequest._retry
+      ) {
+        if (isRefreshing) {
+          return new Promise((resolve) => {
+            subscribeTokenRefresh(() => {
+              resolve(axiosInstance(originalRequest));
+            });
+          });
+        }
+
+        originalRequest._retry = true;
+        isRefreshing = true;
+
+        try {
+          await axiosInstance.post(
+            '/auth/refresh',
+            {},
+            { withCredentials: true }
+          );
+
+          isRefreshing = false;
+          onRefreshed('');
+          return axiosInstance(originalRequest);
+        } catch (refreshError) {
+          isRefreshing = false;
+
+          if (!isAuthPage()) {
+            window.location.href = '/login';
+          }
+
+          return new Promise(() => {});
+        }
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default axiosInstance;

package/apps/web/api/error-code.ts

@@ -0,0 +1,36 @@
+export const ERROR_CODE = {
+  ValidationError: '요청값 유효성 검사에 실패했습니다',
+  DuplicateAccountEmail: '이미 등록된 이메일입니다. 로그인해주세요',
+  InvalidPassword: '비밀번호는 최소 8자 이상이어야 합니다',
+  InvalidEmailPwd: '잘못된 자격 증명입니다',
+  NotRefreshToken: '잘못된 리프레시 토큰입니다',
+  InvalidRefreshToken: '리프레시 토큰이 유효하지 않습니다',
+  InvalidApiKey: '유효하지 않은 API 키입니다',
+  AuthenticationFailed: '인증에 실패했습니다',
+  ExpiredAuthToken: '로그인 토큰이 만료되었습니다',
+  InvalidAuthToken: '유효하지 않은 로그인 토큰입니다',
+  NotEnoughPermission: '권한이 부족합니다',
+  MemberNotFound: '사용자를 찾을 수 없습니다',
+  GroupNotFound: '유효하지 않은 그룹 ID입니다',
+  ProjectNotFound: '유효하지 않은 프로젝트 ID입니다',
+  ErrorLogNotFound: '유효하지 않은 에러 로그 ID입니다',
+  DatabaseError: '데이터베이스 오류가 발생했습니다',
+  InternalError: '내부 서버 오류가 발생했습니다',
+  TokenGenerationFailed: '토큰 생성에 실패했습니다',
+  JwtInvalidToken: 'JWT 토큰이 유효하지 않습니다',
+  JwtExpiredToken: 'JWT 토큰이 만료되었습니다',
+  ExpiredRefreshToken: 'refreshToken이 만료되었습니다',
+  Default: '알 수 없는 오류가 발생했습니다',
+} as const;
+
+// 사용 예시:
+export const getErrorMessage = (errorCode: keyof typeof ERROR_CODE) => {
+  return ERROR_CODE[errorCode] || ERROR_CODE.Default;
+};
+
+export const getError = (errorCode: keyof typeof ERROR_CODE) => {
+  return {
+    errorCode,
+    errorMessage: getErrorMessage(errorCode),
+  };
+};

package/apps/web/api/event/keys.ts

@@ -0,0 +1,14 @@
+export const eventKeys = {
+  list: (projectId: number, queryParams?: URLSearchParams) => {
+    const baseUrl = `/api/projects/${projectId}/events`;
+    if (queryParams && queryParams.toString()) {
+      return `${baseUrl}?${queryParams.toString()}`;
+    }
+    return baseUrl;
+  },
+  detail: (projectId: number, eventId: number) =>
+    `/api/projects/${projectId}/events/${eventId}`,
+  priority: (projectId: number) => `/api/projects/${projectId}/events/priority`,
+  assignee: (projectId: number) => `/api/projects/${projectId}/events/assignee`,
+  status: (projectId: number) => `/api/projects/${projectId}/events/status`,
+};

package/apps/web/api/event/types.ts

@@ -0,0 +1,91 @@
+import { AdditionalInfo } from '@workspace/rusty-replay/index';
+import { BaseTimeEntity, PaginatedResponse } from '../types';
+import { QueryKey } from '@tanstack/react-query';
+
+export interface EventReportResponse extends BaseTimeEntity {
+  id: number;
+  message: string;
+  stacktrace: string;
+  appVersion: string;
+  timestamp: string;
+  groupHash: string;
+  replay: string;
+  environment: string;
+  browser: string | null;
+  os: string | null;
+  ipAddress: string | null;
+  userAgent: string | null;
+  projectId: number;
+  issueId: number | null;
+  additionalInfo: AdditionalInfo | null;
+  priority: EventPriorityType | null;
+  assignedTo: number | null;
+  status: EventStatusType;
+}
+
+export interface EventReportListResponse {
+  id: number;
+  message: string;
+  stacktrace: string;
+  appVersion: string;
+  timestamp: string;
+  groupHash: string;
+  issueId: number | null;
+  browser: string | null;
+  os: string | null;
+  hasReplay: boolean;
+  priority: EventPriorityType | null;
+  assignedTo: number | null;
+  status: EventStatusType;
+}
+
+export interface EventQuery {
+  search: string | null;
+  page: number;
+  pageSize: number;
+  startDate: string | null;
+  endDate: string | null;
+}
+
+interface EventIds {
+  eventIds: number[];
+}
+
+export interface EventPriority extends EventIds {
+  priority: EventPriorityType;
+}
+
+export type EventPriorityType = 'HIGH' | 'MED' | 'LOW';
+export type EventStatusType = 'RESOLVED' | 'UNRESOLVED';
+
+export interface EventAssignee extends EventIds {
+  assignedTo: number | null;
+}
+
+export interface EventStatus extends EventIds {
+  status: EventStatusType;
+}
+
+export interface EventAssigneeContext {
+  previousQueries: [
+    QueryKey,
+    PaginatedResponse<EventReportListResponse> | undefined,
+  ][];
+  previousDetailQuery: EventReportResponse | undefined;
+}
+
+export interface EventStatusContext {
+  previousQueries: [
+    QueryKey,
+    PaginatedResponse<EventReportListResponse> | undefined,
+  ][];
+  previousDetailQuery: EventReportResponse | undefined;
+}
+
+export interface EventReportListContext {
+  previousQueries: [
+    QueryKey,
+    PaginatedResponse<EventReportListResponse> | undefined,
+  ][];
+  previousDetailQueries: Record<number, EventReportResponse | undefined>;
+}

package/apps/web/api/event/use-mutation-event-assignee.ts

@@ -0,0 +1,103 @@
+import {
+  useMutation,
+  UseMutationOptions,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { eventKeys } from './keys';
+import { PaginatedResponse, ResponseError } from '../types';
+import {
+  EventAssignee,
+  EventAssigneeContext,
+  EventReportListResponse,
+  EventReportResponse,
+} from './types';
+import axiosInstance from '../axios';
+import { toast } from '@workspace/ui/components/sonner';
+
+export function useMutationEventAssignee({
+  projectId,
+  eventId,
+  options,
+}: {
+  projectId: number;
+  eventId: number;
+  options?: UseMutationOptions<
+    EventReportListResponse[],
+    ResponseError,
+    EventAssignee,
+    EventAssigneeContext
+  >;
+}) {
+  const queryClient = useQueryClient();
+  const queryKey = eventKeys.list(projectId);
+  const detailQueryKey = `/api/projects/${projectId}/events/${eventId}`;
+  const mutationKey = eventKeys.assignee(projectId);
+  const mutationFn = async (data: EventAssignee) =>
+    await axiosInstance.put(mutationKey, data).then((res) => res.data);
+
+  return useMutation({
+    mutationKey: [mutationKey],
+    mutationFn,
+    onMutate: async (newAssignee) => {
+      await queryClient.cancelQueries({
+        queryKey: [queryKey],
+      });
+      await queryClient.cancelQueries({
+        queryKey: [detailQueryKey],
+      });
+
+      const previousQueries = queryClient.getQueriesData<
+        PaginatedResponse<EventReportListResponse>
+      >({
+        queryKey: [queryKey],
+      });
+
+      const previousDetailQuery = queryClient.getQueryData<EventReportResponse>(
+        [detailQueryKey]
+      );
+
+      queryClient.setQueriesData<PaginatedResponse<EventReportListResponse>>(
+        {
+          queryKey: [queryKey],
+        },
+        (old) => {
+          if (!old) return old;
+
+          return {
+            ...old,
+            content: old.content.map((event) =>
+              event.id === eventId
+                ? { ...event, assignedTo: newAssignee.assignedTo }
+                : event
+            ),
+          };
+        }
+      );
+
+      queryClient.setQueryData<EventReportResponse>([detailQueryKey], (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          assignedTo: newAssignee.assignedTo,
+        };
+      });
+
+      return { previousQueries, previousDetailQuery };
+    },
+    onError: (err, newAssignee, context) => {
+      if (context?.previousQueries) {
+        context.previousQueries.forEach(([queryKey, data]) => {
+          queryClient.setQueryData(queryKey, data);
+        });
+      }
+
+      if (context?.previousDetailQuery) {
+        queryClient.setQueryData([detailQueryKey], context.previousDetailQuery);
+      }
+
+      console.error(err);
+      toast.error('Failed to update assignee');
+    },
+    ...options,
+  });
+}

package/apps/web/api/event/use-mutation-event-priority.ts

@@ -0,0 +1,97 @@
+import {
+  useMutation,
+  UseMutationOptions,
+  useQueryClient,
+  QueryKey,
+} from '@tanstack/react-query';
+import { ResponseError } from '../types';
+import {
+  EventPriority,
+  EventReportListContext,
+  EventReportListResponse,
+  EventReportResponse,
+} from './types';
+import axiosInstance from '../axios';
+import { eventKeys } from './keys';
+import { PaginatedResponse } from '../types';
+
+export function useMutationEventPriority({
+  projectId,
+  options,
+}: {
+  projectId: number;
+  options?: UseMutationOptions<
+    EventReportListResponse[],
+    ResponseError,
+    EventPriority,
+    EventReportListContext
+  >;
+}) {
+  const queryClient = useQueryClient();
+  const listQueryKey = eventKeys.list(projectId);
+  const mutationFn = (data: EventPriority) =>
+    axiosInstance
+      .put(eventKeys.priority(projectId), data)
+      .then((res) => res.data);
+
+  return useMutation({
+    mutationKey: [eventKeys.priority(projectId)],
+    mutationFn,
+    onMutate: async (newData) => {
+      const { eventIds, priority } = newData;
+
+      await queryClient.cancelQueries({ queryKey: [listQueryKey] });
+
+      const previousQueries = queryClient.getQueriesData<
+        PaginatedResponse<EventReportListResponse>
+      >({
+        queryKey: [listQueryKey],
+      });
+
+      const previousDetailQueries: Record<
+        number,
+        EventReportResponse | undefined
+      > = {};
+      eventIds.forEach((id) => {
+        const key = [`/api/projects/${projectId}/events/${id}`];
+        previousDetailQueries[id] =
+          queryClient.getQueryData<EventReportResponse>(key);
+      });
+
+      queryClient.setQueriesData<PaginatedResponse<EventReportListResponse>>(
+        { queryKey: [listQueryKey] },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            content: old.content.map((evt) =>
+              eventIds.includes(evt.id) ? { ...evt, priority } : evt
+            ),
+          };
+        }
+      );
+
+      eventIds.forEach((id) => {
+        const detailKey = [eventKeys.detail(projectId, id)];
+        queryClient.setQueryData<EventReportResponse>(detailKey, (old) => {
+          if (!old) return old;
+          return { ...old, priority };
+        });
+      });
+
+      return { previousQueries, previousDetailQueries };
+    },
+    onError: (err, newData, context) => {
+      context?.previousQueries.forEach(([key, data]) => {
+        queryClient.setQueryData(key, data);
+      });
+      if (context?.previousDetailQueries) {
+        Object.entries(context.previousDetailQueries).forEach(([id, data]) => {
+          const detailKey = [`/api/projects/${projectId}/events/${id}`];
+          queryClient.setQueryData(detailKey, data);
+        });
+      }
+    },
+    ...options,
+  });
+}