NerdGraph 튜토리얼: npm과 NerdGraph를 사용하여 여러 앱을 통계화하다

NerdGraph API를 사용하여 새 브라우저 응용 프로그램을 만들고 구성 값을 검색할 수 있습니다. 이를 브라우저 에이전트 npm 패키지와 결합하여 애플리케이션 빌드 프로세스의 일부로 브라우저 에이전트의 구성을 통합하거나 애플리케이션 내의 에이전트 구현에서 에이전트 구성을 분리할 수 있습니다.

NerdGraph를 사용하여 브라우저 응용 프로그램을 만들거나 구성한 적이 없다면 먼저 이 NerdGraph 자습서를읽으십시오.

에이전트 설정

프로젝트의 루트 또는 프런트엔드 종속성이 관리되는 위치에서 IDE 및 터미널을 엽니다. 이것은 npm 패키지를 설치하기 위해 npm install --save @newrelic/browser-agent 실행할 위치입니다. 설치가 완료되면 웹 사이트의 기본 진입점 파일을 찾습니다. 이것은 <project_root>/src/index.js 또는 <project_root>/src/index.ts 일 수 있지만 애플리케이션에서는 다를 수 있습니다. 진입점이 여러 개인 경우 브라우저에서 가장 빨리 로드되는 항목을 선택하고 async 또는 defer 스크립트 요소 속성을 사용하지 않는 것이 좋습니다.

브라우저 에이전트를 추가할 위치를 찾았으면 해당 파일에 이 코드 조각을 추가합니다.

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
// Remaining import statements

// Populate using values from NerdGraph
const options = {
  init: { ... },
  info: { ... },
  loader_config: { ...}
}

// The agent loader code executes immediately on instantiation.
new BrowserAgent(options)

// Remaining code

브라우저 에이전트에 대한 import 문은 소스 파일의 첫 번째 항목이어야 합니다. 나머지 import 문 다음에 브라우저 에이전트를 즉시 인스턴스화하고 구성합니다. 브라우저 에이전트가 가능한 빨리 데이터를 로드하고 캡처할 수 있도록 다른 코드보다 먼저 이 작업을 수행해야 합니다.

구성 검색

이전 스니펫의 options 객체는 New Relic의 브라우저 애플리케이션에 대한 구성 정보로 채워야 합니다. 이 자습서의 목적을 위해 기존 브라우저 응용 프로그램 및 NerdGraph 탐색기와 함께 New Relic UI를 사용하여 API 호출을 완료합니다.

브라우저 애플리케이션 엔터티 GUID 가져오기

NerdGraph API를 사용하려면 계측 중인 브라우저 애플리케이션에 대한 엔터티 GUID를 가져와야 합니다.

브라우저 애플리케이션 구성 검색

api.newrelic.com/graphiql 에서 NerdGraph 탐색기를 엽니다. 아래 쿼리를 사용하여 브라우저 애플리케이션의 구성 값을 검색합니다. New Relic 계정이 EU 데이터 센터를사용하는 경우 api.eu.newrelic.com/graphiql로 이동하십시오.

query {
  actor {
    entity(guid: '<guid>') {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsConfig
        }
      }
    }
  }
}

쿼리의 <guid> 부분을 이전에 검색한 엔터티 GUID로 바꿉니다. 쿼리를 실행하면 다음과 같은 출력이 표시됩니다.

{
  "data": {
    "actor": {
      "entity": {
        "browserProperties": {
          "jsConfig": {
            "info": {
              "applicationID": 1234567,
              "beacon": "bam.nr-data.net",
              "errorBeacon": "bam.nr-data.net",
              "licenseKey": 123456789,
              "sa": 1
            },
            "init": {
              "ajax": {
                "deny_list": [
                  "bam-cell.nr-data.net"
                ]
              },
              "distributed_tracing": {
                "allowed_origins": [],
                "cors_enabled": false,
                "cors_use_newrelic_header": false,
                "cors_use_tracecontext_headers": false,
                "enabled": true,
                "exclude_newrelic_header": false
              },
              "privacy": {
                "cookies_enabled": true
              }
            },
            "loader_config": {
              "accountID": <redacted>,
              "agentID": <redacted>,
              "applicationID": <redacted>,
              "licenseKey": "<redacted>",
              "trustKey": 1672072
            }
          }
        }
      }
    }
  }
}

팁

NerdGraph 사용에 대한 자세한 정보가 필요하십니까? NerdGraph 소개 를참조하십시오.

구성 설치

jsConfig 속성의 내용을 복사하고 options 개체의 내용을 소스 파일로 바꿉니다.

npm 패키지를 사용하여 배포

npm 패키지가 설치되고 적절하게 구성되면 이제 브라우저 애플리케이션을 빌드하고 배포할 수 있습니다. 브라우저에서 웹사이트를 로드하고 구성에서 beacon URI에 대한 네트워크 호출이 있는지 확인합니다.

브라우저 애플리케이션 구성을 HTML에 삽입

소스 코드에 브라우저 애플리케이션 구성을 배치하는 대신 웹 사이트의 HTML에 구성을 삽입할 수 있습니다. 이는 소스 코드가 여러 웹사이트에서 재사용될 때 특히 유용합니다.

소스 코드 스니펫 수정

소스 코드의 첫 번째 스니펫을 import 로 수정하고 매개변수 없이 BrowserAgent 클래스를 인스턴스화합니다.

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
// Remaining import statements

// The agent loader code executes immediately on instantiation.
new BrowserAgent()

// Remaining code

NerdGraph 쿼리 수정

NerdGraph 쿼리를 수정하여 브라우저 애플리케이션 구성을 JSON 인코딩 스크립트 문자열로 검색합니다. <guid> 이전에 검색한 브라우저 애플리케이션 엔터티 GUID로 바꾸는 것을 기억하면서 새 쿼리를 실행합니다.

query {
  actor {
    entity(guid: '<guid>') {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsConfigScript
        }
      }
    }
  }
}

그러면 다음과 같은 결과가 반환됩니다.

{
  "data": {
    "actor": {
      "entity": {
        "browserProperties": {
          "jsConfigScript": "<script type=\"text/javascript\">\n;window.NREUM||(NREUM={});NREUM.init={distributed_tracing:{enabled:true},privacy:{cookies_enabled:true},ajax:{deny_list:[\"bam-cell.nr-data.net\"]}};\n\n;NREUM.loader_config={accountID:\"<redacted>\",trustKey:\"<redacted>\",agentID:\"<redacted>\",licenseKey:\"<redacted>\",applicationID:\"<redacted>\"};\n;NREUM.info={beacon:\"bam.nr-data.net\",errorBeacon:\"bam.nr-data.net\",licenseKey:\"<redacted>\",applicationID:\"<redacted>\",sa:1};\n</script>\n"
        }
      }
    }
  }
}

구성 설치

jsConfigScript 속성의 내용을 복사합니다. JSON 파서를 통해 결과를 실행하거나 \" 값을 "로 바꿔야 합니다. 결과는 모든 브라우저 애플리케이션 구성 정보와 함께 <script> 요소를 포함하는 문자열입니다. <script> 요소를 <head> 요소의 상단에 배치하지만 웹사이트 HTML의 <meta> 요소 아래에 배치합니다.

다음 단계

이 튜토리얼은 NerdGraph API와 브라우저 에이전트 npm 패키지를 사용하는 방법에 대한 표면적인 정보만 제공합니다. 다음 단계에 대한 몇 가지 아이디어:

브라우저 에이전트를 웹 사이트 빌더 애플리케이션에 통합하고 NerdGraph를 사용하여 관리 대시보드 내에서 New Relic 모니터링을 활성화할 때 각 고객에 대한 브라우저 애플리케이션 구성을 검색합니다.
조직의 구성 요소 라이브러리에 공유 브라우저 에이전트 구성 요소를 생성하고 NerdGraph를 호출하는 CDN 에지 기능을 사용하여 구성을 HTML에 자동으로 삽입합니다.
배포되는 환경에 따라 NerdGraph의 다양한 브라우저 애플리케이션 구성으로 소스 코드를 채우도록 CI/CD 파이프라인을 수정합니다.

사용자의 편의를 위해 제공되는 기계 번역입니다.

NerdGraph 튜토리얼: npm과 NerdGraph를 사용하여 여러 앱을 통계화하다

에이전트 설정 .css-21sua1{background:none;border:none;width:0;padding:0;}

구성 검색

브라우저 애플리케이션 엔터티 GUID 가져오기

브라우저 애플리케이션 구성 검색

팁

구성 설치

npm 패키지를 사용하여 배포

브라우저 애플리케이션 구성을 HTML에 삽입

소스 코드 스니펫 수정

NerdGraph 쿼리 수정

구성 설치

다음 단계

에이전트 설정