브라우저 예외 계측

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

// 현재 활성 컨텍스트를 가져와서 span 생성 시 부모 관계 유지
const activeContext = context.active();
const span = this.tracer.startSpan(source, { startTime: now }, activeContext);

// span context를 명시적으로 설정
const spanContext = trace.setSpanContext(activeContext, span.spanContext());

// context를 명시적으로 설정하여 recordException 실행
context.with(spanContext, () => {
  recordException(err, {
    tracer: this.tracer,
    span,
  });
});

// Log 레코드에 span과 trace 정보 포함
this.logger.emit({
  timestamp: now,
  severityText: 'error',
  severityNumber: 17,
  body: stringifyValue(err),
  attributes: {
    'span.id': span.spanContext().spanId,
    'trace.id': span.spanContext().traceId,
    // ... 기타 속성
  },
  context: spanContext,
});

interface InstrumentationConfig {
  enabled?: boolean;
}

// 1. console.error 호출
console.error('API request failed', error);
// → 자동으로 추적되며 스택 트레이스 포함

// 2. 처리되지 않은 Promise rejection
async function fetchData() {
  throw new Error('Network error');
}
fetchData(); // rejection이 처리되지 않음
// → 자동으로 추적되며 컨텍스트 보존

// 3. 런타임 오류
function buggyFunction() {
  const x = undefined;
  x.toString(); // TypeError 발생
}
// → 자동으로 추적

// 4. 리소스 로딩 오류
<img src="invalid-url.jpg" />
// → 자동으로 추적되며 요소 정보 포함

try {
  performRiskyOperation();
} catch (error) {
  // 오류를 수동으로 기록
  IMQA.recordException(error, {
    'operation.name': 'risky-operation',
    'user.action': 'button-click',
    'severity': 'high'
  });
  
  // 오류를 다시 던지거나 처리
  handleError(error);
}

// 사용자 이벤트 시작
const eventId = IMQA.userEvent.start('checkout-process');

try {
  // 이 블록 내에서 발생하는 모든 오류는 자동으로 eventId와 연결됩니다
  await validatePayment();
  await processOrder();
  await sendConfirmation();
  
  IMQA.userEvent.end(eventId, { result: 'success' });
} catch (error) {
  // 오류가 자동으로 checkout-process 컨텍스트와 연결됨
  console.error('Checkout failed:', error);
  IMQA.userEvent.end(eventId, { result: 'error' });
}

async function loadUserData(userId) {
  const eventId = IMQA.userEvent.start('load-user-data', {
    'user.id': userId
  });

  try {
    const user = await fetchUser(userId);
    const profile = await fetchProfile(userId);
    const preferences = await fetchPreferences(userId);
    
    IMQA.userEvent.end(eventId, { 
      result: 'success',
      'data.loaded': true 
    });
    
    return { user, profile, preferences };
  } catch (error) {
    // 비동기 오류도 올바른 컨텍스트와 함께 추적됨
    IMQA.recordException(error, {
      'user.id': userId,
      'operation': 'load-user-data'
    });
    
    IMQA.userEvent.end(eventId, { 
      result: 'error',
      'error.type': error.name 
    });
    
    throw error;
  }
}

// console.error를 사용한 스택 트레이스 캡처
function debugFunction() {
  // Error 객체를 전달하면 스택 트레이스가 자동으로 캡처됨
  console.error(new Error('Debug point reached'));
}

// 또는 여러 인자와 함께
console.error('Operation failed:', error, 'Additional context:', data);
// → 모든 인자가 결합되어 하나의 메시지로 기록됨

const STACK_LIMIT = 4096;
const MESSAGE_LIMIT = 1024;

// 긴 스택 트레이스나 메시지는 자동으로 잘립니다
span.setAttribute('exception.message', limitLen(msg, MESSAGE_LIMIT));
span.setAttribute('exception.stacktrace', limitLen(err.stack, STACK_LIMIT));

// Error 객체
console.error(new TypeError('Invalid type'));
// → exception.type: "TypeError"

// 문자열
console.error('Something went wrong');
// → exception.type: "error", error.object: "String"

// 여러 인자
console.error('Error:', error, 'Context:', data);
// → 모든 인자가 결합됨

// Error 객체 배열
console.error([error1, error2]);
// → 첫 번째 Error 객체의 스택 트레이스 사용

// 이미지 로딩 실패 시 캡처되는 정보:
{
  "exception.type": "error",
  "exception.message": "event error",
  "target_element": "IMG",
  "target_xpath": "/html/body/div[1]/img[2]",
  "target_src": "https://example.com/invalid-image.jpg"
}

// 스크립트 로딩 실패 시도 유사한 정보 캡처

// 메인 워크플로우 시작
const mainEventId = IMQA.userEvent.start('data-processing');

try {
  // 서브 태스크 1
  const subTask1Id = IMQA.userEvent.start('validation');
  await validateData(); // 여기서 오류 발생 시 validation 컨텍스트로 기록
  IMQA.userEvent.end(subTask1Id);
  
  // 서브 태스크 2
  const subTask2Id = IMQA.userEvent.start('transformation');
  await transformData(); // 여기서 오류 발생 시 transformation 컨텍스트로 기록
  IMQA.userEvent.end(subTask2Id);
  
  IMQA.userEvent.end(mainEventId);
} catch (error) {
  // 모든 오류는 적절한 컨텍스트와 함께 추적됨
  IMQA.userEvent.end(mainEventId, { result: 'error' });
}