Browser SDK 설치 가이드

<script src="https://cdn.sophonz.com/release/npm/@browser-sdk/latest/index.js">
</script>
<script>
  window.Sophonz.init({
    collectorUrl: '{{SOPHONZ_COLLECTOR_URL}}',
    serviceName: '{{NAME_OF_YOUR_WEB_SERVICE}}',
    serviceVersion: '{{VERSION_OF_YOUR_WEB_SERVICE}}',
    serviceKey: '{{KEY_OF_YOUR_WEB_SERVICE}}'
  });
</script>

<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_COLLECTOR_URL}}',
      serviceName: '{{NAME_OF_YOUR_WEB_SERVICE}}',
      serviceVersion: '{{VERSION_OF_YOUR_WEB_SERVICE}}',
      serviceKey: '{{KEY_OF_YOUR_WEB_SERVICE}}'
    });
</script>

import Sophonz from '@sophonz/browser-sdk';

Sophonz.init({
  collectorUrl: '{{SOPHONZ_COLLECTOR_URL}}',
  serviceName: '{{NAME_OF_YOUR_WEB_SERVICE}}',
  serviceVersion: '{{VERSION_OF_YOUR_WEB_SERVICE}}',
  serviceKey: '{{KEY_OF_YOUR_WEB_SERVICE}}'
});

<script src="./public/sophonz-sdk.js">
</script>
<script>
  window.Sophonz.init({
    collectorUrl: '{{SOPHONZ_COLLECTOR_URL}}',
    serviceName: '{{NAME_OF_YOUR_SERVICE}}',
    serviceVersion: '{{VERSION_OF_YOUR_SERVICE}}',
    serviceKey: '{{KEY_OF_YOUR_SERVICE}}'
  });
</script>

npm install @sophonz/browser-sdk

yarn add @sophonz/browser-sdk

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./my-app";
import Sophonz from "@sophonz/browser-sdk";

Sophonz.init({
  collectorUrl: '{{SOPHONZ_COLLECTOR_URL}}',
  serviceName: '{{NAME_OF_YOUR_SERVICE}}',
  serviceVersion: '{{VERSION_OF_YOUR_SERVICE}}',
  serviceKey: '{{KEY_OF_YOUR_SERVICE}}'
});

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

import Vue from "vue";
import App from "./app.vue"; // get root module
import router from "./router";
import store from "./store"; // get vuex -> store
import Sophonz from "@sophonz/browser-sdk"; // Sophonz agent

Sophonz.init({
  collectorUrl: '{{SOPHONZ_COLLECTOR_URL}}',
  serviceName: '{{NAME_OF_YOUR_SERVICE}}',
  serviceVersion: '{{VERSION_OF_YOUR_SERVICE}}',
  serviceKey: '{{KEY_OF_YOUR_SERVICE}}'
});

const app = new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

npm install /path/to/Sophonz-browser-sdk-latest.tgz

.
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── third-pary-packages
│   └── Sophonz
│       └── Sophonz-browser-sdk-latest.tgz
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

npm install ./third-pary-packages/Sophonz/Sophonz-browser-sdk-latest.tgz

node_modules/@sophonz/browser-sdk
├── CHANGELOG.md
├── README.md
├── build
│   ├── index.d.ts
│   ├── index.js
│   └── sri-hash.txt
└── package.json

npm install @sophonz/browser-sdk

import Sophonz from "@sophonz/browser-sdk/legacy";

Sophonz.init({
  collectorUrl: '{{SOPHONZ_COLLECTOR_URL}}',
  serviceName: '{{NAME_OF_YOUR_WEB_SERVICE}}',
  serviceVersion: '{{VERSION_OF_YOUR_WEB_SERVICE}}',
  serviceKey: '{{KEY_OF_YOUR_WEB_SERVICE}}'
  // 기타 설정...
});

<script
  src="https://cdn.sophonz.com/release/npm/@browser-sdk/latest/index-legacy.js"
  type="text/javascript"></script>
<script>
window.Sophonz.init({
  collectorUrl: '{{SOPHONZ_COLLECTOR_URL}}',
  serviceName: '{{NAME_OF_YOUR_WEB_SERVICE}}',
  serviceVersion: '{{VERSION_OF_YOUR_WEB_SERVICE}}',
  serviceKey: '{{KEY_OF_YOUR_WEB_SERVICE}}'
  // 기타 설정...
});
</script>

npm install @sophonz/vite-sourcemap --save-dev

// vite.config.ts
import { defineConfig } from 'vite'
import sourcemapUpload from '@sophonz/vite-sourcemap'

export default defineConfig({
  build: {
    sourcemap: true, // 중요: 소스맵 생성을 활성화해야 합니다
  },
  plugins: [
    sourcemapUpload({
      endpoint: 'https://api.sophonz.com/api/sourcemaps',
      apiKey: process.env.SOURCEMAP_API_KEY,
      release: process.env.GIT_SHA,
      appVersion: process.env.npm_package_version,
    }),
  ],
})

// vite.config.ts
import sourcemapUpload from '@sophonz/vite-sourcemap'

export default defineConfig({
  build: {
    sourcemap: true,
  },
  plugins: [
    sourcemapUpload({
      // 필수: 업로드 엔드포인트
      endpoint: 'https://api.sophonz.com/api/sourcemaps',

      // 인증
      apiKey: process.env.Sophonz_AUTH_TOKEN,

      // 릴리즈 정보
      release: process.env.Sophonz_SERVICE_NAME,
      appVersion: process.env.npm_package_version,

      // CDN 경로 설정
      urlPrefix: '~/dist/',

      // 파일 필터링: assets 폴더의 JS 소스맵만
      include: [/assets\/.+\.js\.map$/],
      exclude: [/node_modules/],

      // CI에서만 실행
      ciOnly: true,

      // 업로드 후 로컬 파일 삭제
      deleteAfterUpload: true,
    }),
  ],
})

# .github/workflows/deploy.yml
- name: Build and upload sourcemaps
  env:
    SOURCEMAP_API_KEY: ${{ secrets.SOURCEMAP_API_KEY }}
    GIT_SHA: ${{ github.sha }}
  run: npm run build