설치

Sophonz Browser SDK를 CDN 또는 NPM으로 웹 프론트엔드 프로젝트에 설치하는 방법을 안내합니다.

Sophonz Browser SDK는 OpenTelemetry Native 기반으로 동작합니다. VanillaJS, React, Vue, Next.js 등 웹 프론트엔드 프레임워크에서 웹 성능 지표를 수집하기 위한 설치 및 설정 방법을 설명합니다.

빠른 시작

아래에서 값을 입력하고 프레임워크 탭(CDN · VanillaJS · React · Vue · Next.js)을 선택하면 초기화 코드가 생성됩니다. 복사 버튼으로 코드를 바로 복사하세요. SDK는 다른 기능보다 우선적으로 초기화되어야 관련 정보를 모두 수집할 수 있습니다.

TIP — 패키지 이름과 앱 키 발급

Sophonz 콘솔에 로그인해 프로젝트에서 앱 추가로 앱을 등록하고, 앱 관리에서 발급된 앱 키를 확인해 설치하세요.

<!-- index.html <head> -->
<script src="https://cdn.sophonz.com/release/npm/@browser-sdk/latest/index.js"></script>
<script>
  window.Sophonz.init({
  collectorUrl: 'https://in.sophonz.ai',
  project: 'sophonz',
  appName: 'next-sample',
  appVersion: '1.0.0',
  appKey: 'sk_tYtJUa4WweXXedj6lxjSqoPW5O0DnbXz',
  });
</script>

실제 브라우저 SDK를 불러와 같은 오리진으로 요청을 보냅니다. 백엔드를 아직 계측하지 않았을 때 얻게 되는 모습입니다.

CAUTION — 패키지 이름 설정

appName은 앱 등록 시 입력한 패키지명과 동일해야 하며 패키지 이름에는 a-z, A-Z, 0-9, -, _, .만 입력할 수 있습니다.

특정 버전 고정 (CDN)

CDN으로 특정 버전을 고정하려면 아래 코드를 <head></head> 태그 내부에 추가하세요. {{VERSION}} 부분을 사용하려는 버전으로 대체하고, integrity 값으로 무결성을 검증합니다.

<script
  src="https://cdn.sophonz.com/release/npm/@browser-sdk/{{VERSION}}/index.js"
  integrity="{{VERSION_SRI_HASH_INTEGRITY}}"
  crossorigin="anonymous">
</script>
<script>
  window.Sophonz.init({
    collectorUrl: '{{SOPHONZ_TRACES_COLLECTOR_URL}}',
    appName: '{{YOUR_APP_NAME}}',
    appVersion: '{{YOUR_APP_VERSION}}',
    appKey: '{{YOUR_APP_KEY}}',
    project: '{{YOUR_PROJECT}}',
    deploymentEnvironment: '{{DEPLOYMENT_ENVIRONMENT}}',
  });
</script>

NPM

https://www.npmjs.com/package/@sophonz/browser-sdk

NPM Version NPM Last Update NPM Unpacked Size npm bundle size NPM Downloads NPM Type Definitions

프로젝트에서 직접 번들로 묶어 사용하려면 프로젝트 디렉토리에서 npm install @sophonz/browser-sdk를 실행하세요.

import SophonzSDK from '@sophonz/browser-sdk';
 
SophonzSDK.init({
  collectorUrl: '{{SOPHONZ_TRACES_COLLECTOR_URL}}',
  appName: '{{YOUR_APP_NAME}}',
  appVersion: '{{YOUR_APP_VERSION}}',
  appKey: '{{YOUR_APP_KEY}}',
  project: '{{YOUR_PROJECT}}',
  deploymentEnvironment: '{{DEPLOYMENT_ENVIRONMENT}}',
});

TIP — 이제 시작입니다

이제 앱을 배포하세요. Sophonz가 실사용자가 겪는 문제를 포착하고, 당신의 앱은 스스로 진화합니다.