라우트 변경 계측

"scope": {
  "name": "@imqa/instrumentation-route",
  "version": "1"
}

interface IMQARouteInstrumentationConfig extends InstrumentationConfig {
  enabled?: boolean;
  screenNameOption?: ScreenNameOption;
}

{
  enabled: true,
  screenNameOption: {
    screenNameType: 'routeOnly',
    urlWithSearchParams: false
  }
}

IMQA.init({
  collectorUrl: 'https://collector.example.com',
  serviceName: 'my-spa-app',
  serviceKey: 'your-service-key',
  // 라우트 계측은 기본적으로 활성화됨
});

IMQA.init({
  collectorUrl: 'https://collector.example.com',
  serviceName: 'my-spa-app',
  serviceKey: 'your-service-key',
  instrumentations: {
    route: {
      enabled: true,
      screenNameOption: {
        screenNameType: 'routeOnly', // 경로만 사용
        urlWithSearchParams: false   // 쿼리 파라미터 제외
      }
    }
  }
});

// React Router v6
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/products/:id" element={<Product />} />
      </Routes>
    </BrowserRouter>
  );
}

// 모든 라우트 변경이 자동으로 추적됨

// Vue Router v4
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/products/:id', component: Product }
  ]
});

// 모든 라우트 변경이 자동으로 추적됨

// 내부적으로 다음 메서드들이 패치됨
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;

history.pushState = function(...args) {
  // 라우트 변경 스팬 생성
  const result = originalPushState.apply(this, args);
  // 이벤트 발생
  return result;
};

// popstate 이벤트 (뒤로/앞으로 가기)
window.addEventListener('popstate', (event) => {
  // 라우트 변경 스팬 생성
});

// hashchange 이벤트 (해시 라우팅)
window.addEventListener('hashchange', (event) => {
  // 라우트 변경 스팬 생성
});

// 링크 클릭 -> 라우트 변경
<a href="/products">제품 보기</a>
// 클릭 이벤트가 먼저 기록되고, 라우트 변경이 그 자식으로 기록됨

// 스팬 계층 구조:
// userInteraction: click
// └── routeChange: /products

// 사용자 이벤트 컨텍스트에서 라우트 변경
const eventId = IMQA.userEvent.start('navigation-flow');
// navigate()가 호출되면 자동으로 userEvent 컨텍스트와 연결됨
navigate('/products');
IMQA.userEvent.end(eventId);

// 스팬 계층 구조:
// userEvent: navigation-flow
// └── routeChange: /products
//     └── (라우트 변경 후 로드되는 리소스들)

// 라우트 변경
history.pushState(null, '', '/products');

// 이후 로드되는 리소스들
// - 이미지
// - 스크립트
// - 스타일시트
// 모두 routeChange 스팬의 컨텍스트에서 추적됨

// 스팬 계층 구조:
// routeChange: /products
// ├── resourceFetch: product-image.jpg
// ├── resourceFetch: analytics.js
// └── resourceFetch: style.css

// /home -> /products 이동
{
  name: "routeChange",
  attributes: {
    "location.href": "https://example.com/products",
    "prev.href": "https://example.com/home",
    "screen.name": "/products"
  }
}

// React 예시
function ProductList() {
  const navigate = useNavigate();
  
  const handleProductClick = (productId) => {
    // 이 네비게이션이 자동으로 추적됨
    navigate(`/products/${productId}`);
  };
  
  return (
    <div>
      {products.map(product => (
        <button onClick={() => handleProductClick(product.id)}>
          {product.name}
        </button>
      ))}
    </div>
  );
}

{
  name: "routeChange",
  attributes: {
    "imqa.span.type": "route",
    "location.href": "https://example.com/products/123",
    "prev.href": "https://example.com/products",
    "navigation.type": "pushState",
    "screen.name": "/products/123"
  }
}

// 브라우저 버튼 또는 프로그래매틱 네비게이션
history.back();
history.forward();

// popstate 이벤트로 자동 추적

{
  name: "routeChange",
  attributes: {
    "imqa.span.type": "route",
    "navigation.type": "popstate",
    "navigation.trigger": "browser",
    "location.href": "https://example.com/previous-page",
    "prev.href": "https://example.com/current-page"
  }
}

// 사용자 이벤트 내에서 라우트 변경
const eventId = IMQA.userEvent.start('checkout-process', {
  'user.id': currentUser.id,
  'cart.items': cartItems.length
});

try {
  // 사용자 정보 입력
  await collectUserInfo();
  
  // 결제 페이지로 이동 (자동으로 eventId와 연결됨)
  navigate('/checkout/payment');
  
  // 결제 처리
  await processPayment();
  
  // 완료 페이지로 이동 (자동으로 eventId와 연결됨)
  navigate('/checkout/complete');
  
  IMQA.userEvent.end(eventId, { 
    result: 'success',
    'order.id': orderId,
    'order.amount': totalAmount
  });
} catch (error) {
  IMQA.userEvent.end(eventId, { 
    result: 'error',
    'error.message': error.message 
  });
}

// 레거시 해시 라우터
window.location.hash = '#/products';

// hashchange 이벤트로 자동 추적

{
  name: "routeChange",
  attributes: {
    "imqa.span.type": "route",
    "navigation.type": "hashchange",
    "location.href": "https://example.com/#/products",
    "prev.href": "https://example.com/#/home"
  }
}

// 인증 체크 후 리다이렉션
function checkAuth() {
  if (!isAuthenticated()) {
    // 로그인 페이지로 리다이렉션
    history.replaceState(null, '', '/login');
    // replaceState로 추적됨
  }
}

// 각 라우트의 로딩 시간 비교
{
  "/home": { avgDuration: 500, count: 100 },
  "/products": { avgDuration: 1200, count: 80 },
  "/checkout": { avgDuration: 2000, count: 50 }
}

// 가장 많이 사용되는 네비게이션 경로
[
  "/home → /products → /products/:id → /cart",
  "/home → /about → /contact",
  "/products → /products/:id → /cart → /checkout"
]

// 특정 라우트에서 많은 리소스 로딩
routeChange: /products
├── resourceFetch: products.json (500ms)
├── resourceFetch: product-1.jpg (300ms)
├── resourceFetch: product-2.jpg (300ms)
├── ... (20개의 이미지)
└── total: 3500ms