WebView 연동 및 예제

Sophonz Browser SDK를 모바일 네이티브 앱의 WebView와 연동하는 방법과 동작 확인을 위한 예제 프로그램을 설명합니다.

Sophonz Browser SDK는 모바일 네이티브 앱의 WebView와 연동하여 네이티브 파라미터를 자동으로 공유할 수 있습니다. 이를 통해 네이티브 앱과 웹 애플리케이션 간의 데이터 통합 및 일관된 계측 경험을 제공합니다.

WebView 연동

Sophonz Browser SDK는 모바일 네이티브 파라미터를 WebView와 연동하여 사용할 수 있습니다. 이를 통해 네이티브 앱과 웹 애플리케이션 간의 데이터 공유 및 통합된 사용자 경험을 제공합니다.

네이티브 앱에서 WebView를 통해 Sophonz Browser SDK를 사용할 때, 다음과 같은 파라미터를 자동으로 전달합니다.

  • __sophonz_service_name: 서비스 이름
  • __sophonz_service_version: 서비스 버전
  • __sophonz_service_key: 서비스 키
  • __sophonz_service_type: 서비스 타입 (기본값: web)
  • __sophonz_session_id: 세션 ID
  • __sophonz_collector_url: 콜렉터 URL
  • __sophonz_deactivated: Sophonz Browser SDK 비활성화 여부 (기본값: false), 비활성화인 경우 SDK는 작동하지 않습니다.
  • __sophonz_shared_session: 세션 및 서비스 파라미터 공유 여부 (기본값: true), 비활성화인 경우 init에서 설정한 값을 사용합니다.
  • __sophonz_service_namespace: 서비스 네임스페이스
  • __sophonz_deployment_environment_name: 배포 환경 이름

네이티브에서 사용하는 웹뷰는 네이티브 SDK에서 파라미터를 웹뷰에 자동으로 전달합니다. Sophonz Browser SDK는 이를 자동으로 감지하여 파라미터를 사용합니다. 이 설정은 SDK의 초기화 과정에서 자동으로 처리됩니다.

웹 브라우저 단독으로 사용할 때는 웹뷰 파라미터를 적용받지 않고 init에 설정된 값을 사용합니다.

예제 프로그램

index.html을 열고 아래 코드를 추가합니다. 만약 내부망 이슈로 인해 적절한 collector 주소가 설정되어 있지 않은 경우 오류가 발생하지만 브라우저 inspection 도구의 network 탭에서 Trace와 Log 데이터를 직접 확인해 볼 수 있습니다.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sophonz Browser SDK Test Example</title>
    <script
      src="https://cdn.sophonz.com/release/npm/@browser-sdk/latest/index.js"
      crossorigin="anonymous">
    </script>
    <script>
      SophonzSDK.init({
        collectorUrl: "https://in.v0.sophonz.com",
        appName: "your-service-name",
        appKey: "YOUR_SERVICE_KEY",
        appVersion: "1.0.0"
      });
    </script>
  </head>
  <body>
    <h1>Sophonz Browser SDK Test Example</h1>
    <button id="work-btn">Do Work</button>
    <button id="error-btn">Throw Error</button>
    <button id="fetch-btn">Fetch Data</button>
    <button id="xhr-btn">XHR</button>
    <p>Click the buttons to test Sophonz tracing and error reporting.</p>
  </body>
  <script>
    // console instrumentation
    function doWork() {
      console.log("Work is done and span is ended");
    }
    // error instrumentation
    function throwError() {
      throw new Error("Test Error");
    }
    // xhr instrumentation
    function xhrBtn() {
      console.log("xhrBtn");
      const xhr = new XMLHttpRequest();
      xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1");
      xhr.onload = function () {
        if (xhr.status === 200) {
          console.log(xhr.response);
        }
      };
      xhr.send();
    }
    // fetch instrumentation
    function fetchBtn() {
      console.log("fetchBtn");
      fetch("https://jsonplaceholder.typicode.com/todos/1")
        .then(function (response) {
          return response.json();
        })
        .then(function (json) {
          console.log(json);
        });
    }
    // Attach event handlers
    window.onload = () => {
      document.getElementById("work-btn").addEventListener("click", () => {
        doWork();
      });
      document.getElementById("error-btn").addEventListener("click", () => {
        throwError();
      });
      document.getElementById("xhr-btn").addEventListener("click", () => {
        xhrBtn();
      });
      document.getElementById("fetch-btn").addEventListener("click", () => {
        fetchBtn();
      });
    };
  </script>
</html>