설치

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.SophonzSDK.init({
  collectorUrl: 'https://in.v0.sophonz.com',
  project: 'my-project',
  appName: 'my-web-app',
  appVersion: '1.0.0',
  appKey: 'service-key-replace-me',
  });
</script>

모든 값을 입력하면 테스트를 보낼 수 있어요. / Fill in all values to send a test.

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.SophonzSDK.init({
    collectorUrl: '{{SOPHONZ_TRACES_COLLECTOR_URL}}',
    appName: '{{NAME_OF_YOUR_WEB_SERVICE}}',
    appVersion: '{{VERSION_OF_YOUR_WEB_SERVICE}}',
    appKey: '{{KEY_OF_YOUR_WEB_SERVICE}}',
    project: '{{SERVICE_NAMESPACE}}',
    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: '{{NAME_OF_YOUR_WEB_SERVICE}}',
  appVersion: '{{VERSION_OF_YOUR_WEB_SERVICE}}',
  appKey: '{{KEY_OF_YOUR_WEB_SERVICE}}',
  project: '{{SERVICE_NAMESPACE}}',
  deploymentEnvironment: '{{DEPLOYMENT_ENVIRONMENT}}',
});

TIP — 이제 시작입니다

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