NerdGraph 자습서: 브라우저 에이전트 모니터링 예제

다음은 GraphQL로 만들 수 있는 다양한 브라우저 구성의 몇 가지 예입니다.

새 브라우저 애플리케이션 만들기

UI를 사용하는 대신 NerdGraph API를 사용하여 브라우저 애플리케이션을 만들 수 있습니다. 이것의 장점은 New Relic으로 브라우저 애플리케이션을 계측할 때 프로그래밍 방식으로 JavaScript 스니펫을 생성하고 검색하여 브라우저 앱에 복사하여 붙여넣을 수 있다는 것입니다.

npm을 사용하여 설정하는 방법 여러 애플리케이션의 경우 npm을 사용하여 여러 앱 계측을 참조하세요.

다음은 기본 설정으로 새 브라우저 애플리케이션을 만드는 변형의 예입니다.

돌연변이:

mutation CreateExampleBrowserApplication(
  $accountId: Int!
  $name: String!
  $settings: AgentApplicationBrowserSettingsInput
) {
  agentApplicationCreateBrowser(
    accountId: $accountId
    name: $name
    settings: $settings
  ) {
    guid
    name
    settings {
      cookiesEnabled
      distributedTracingEnabled
      loaderScript
      loaderType
    }
  }
}

변수:

{
  "accountId": Int!,
  "name": String!,
  "settings": {
    "cookiesEnabled": Boolean,
    "distributedTracingEnabled": Boolean,
    "loaderType": AgentApplicationBrowserLoader
  }
}

JavaScript 스니펫 검색

JavaScript 스니펫을 검색하여 애플리케이션에 복사/붙여넣을 수 있습니다. 반환된 코드 조각은 복사/붙여넣기 전에 구문 분석해야 하는 JSON 인코딩 문자열입니다.

질문:

query FetchBrowserJavaScriptSnippet($guid: EntityGuid!) {
  actor {
    entity(guid: $guid) {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsLoaderScript
        }
      }
    }
  }
}

변수:

{
  "guid": EntityGuid!
}

브라우저 모니터링 구성의 예

브라우저 설정은 NerdGraph를 통해 구성할 수 있습니다. 다음은 애플리케이션의 apdex를 변경하는 돌연변이의 예입니다.

돌연변이:

mutation UpdateBrowserApdexTarget(
  $guid: EntityGuid!
  $settings: AgentApplicationSettingsUpdateInput!
) {
  agentApplicationSettingsUpdate(guid: $guid, settings: $settings) {
    browserSettings {
      browserConfig {
        apdexTarget
      }
    }
    errors {
      description
      errorClass
      field
    }
  }
}

변수:

{
  "guid": EntityGuid!,
  "settings": {
    "browserConfig": {
      "apdexTarget": Float
    }
  }
}

NerdGraph를 통해 업데이트할 수 있는 브라우저 설정에 대한 자세한 내용은 다음 변형을 참조하세요. 각 필드에 대한 문서는 NerdGraph 탐색기 에서 찾을 수 있습니다.

돌연변이:

mutation UpdateBrowserSettingsExample($guid: EntityGuid!, settings: AgentApplicationSettingsUpdateInput!) {
  agentApplicationSettingsUpdate(guid: $guid, settings: $settings) {
    browserSettings {
      browserConfig {
        apdexTarget
      }
      browserMonitoring {
        ajax {
          denyList
        }
        distributedTracing {
          allowedOrigins
          corsEnabled
          corsUseNewrelicHeader
          corsUseTracecontextHeaders
          enabled
          excludeNewrelicHeader
        }
        loader
        privacy {
          cookiesEnabled
        }
      }
      dataManagement {
        sendTransactionEventsToInternalStream
      }
    }
    errors {
      description
      errorClass
      field
    }
  }
}

변수:

{
  "guid": EntityGuid!,
  "settings": {
    "browserConfig": {
      "apdexTarget": Float
    },
    "browserMonitoring": {
      "ajax": {
        "denyList": [String!]
      },
      "distributedTracing": {
        "allowedOrigins": [String!],
        "corsEnabled": Boolean,
        "corsUseNewrelicHeader": Boolean,
        "corsUseTracecontextHeaders": Boolean,
        "enabled": Boolean,
        "excludeNewrelicHeader": Boolean
      }
      "loader": AgentApplicationSettingsBrowserLoaderInput,
      "privacy": {
        "cookiesEnabled": Boolean
      }
    }
    "dataManagement": {
      "sendTransactionEventsToInternalStream": Boolean
    }
  }
}

애플리케이션 구성 검색

npm 패키지 설치 방법 과 함께 사용할 브라우저 애플리케이션 구성을 검색할 수 있습니다. 필요에 따라 구성은 두 가지 형식으로 반환될 수 있습니다.

웹페이지의 head 요소에 삽입할 JSON 인코딩 문자열입니다.
애플리케이션 소스 코드에 있는 그대로 사용할 수 있는 개체입니다.

질문:

query FetchBrowserConfiguration($guid: EntityGuid!) {
  actor {
    entity(guid: $guid) {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsConfig
          jsConfigScript
        }
      }
    }
  }
}

변수:

{
  "guid": EntityGuid!
}

브라우저 세그먼트로 데이터를 그룹화하세요.

브라우저 모니터링 결과를 브라우저 세그먼트별로 그룹화하여 보다 의미 있는 데이터를 얻을 수 있습니다. UI 에서 이 작업을 수행하는 대신 GraphQL을 사용하여 수행할 수 있습니다.

세그먼트 나열

기존 세그먼트를 나열하여 시작하세요.

{
  actor {
    entity(guid: "YOUR_GUID") {
      ... on BrowserApplicationEntity {
        segmentAllowListAggregate {
          segments
        }
      }
    }
  }
}

응답은 다음과 같습니다.

"data": {
    "actor": {
      "entity": {
        "segmentAllowListAggregate": {
          "segments": [
            "urlsegment1",
            "urlsegment2"
          ]
        }
      }
    }
  }
 "data": {
    "actor": {
      "entity": {
        "segmentAllowListAggregate": {
          "segments": [
            "urlsegment1",
            "urlsegment2"
          ]
        }
      }
    }
  }

세그먼트 만들기

agentApplicationSegmentsReplaceAllBrowserSegmentAllowList 변형을 사용하여 브라우저 세그먼트를 만듭니다.

mutation {
  agentApplicationSegmentsReplaceAllBrowserSegmentAllowList(
    entityGuid: "YOUR_GUID"
    allowList: { segments: ["urlsegment1", "urlsegment2", "urlsegment3"] }
  ) {
    segments
  }
}

응답은 다음과 같습니다.

"data": {
    "agentApplicationSegmentsReplaceAllBrowserSegmentAllowList": {
      "segments": [
        "urlsegment3",
        "urlsegment2",
        "urlsegment1"
      ]
    }
  }

브라우저 에이전트 버전 고정

New Relic의 GraphQL API는 New Relic 브라우저 에이전트의 특정 버전을 "고정"하여 플랫폼 내에서 일관성을 유지하는 방법을 제공합니다. 버전을 고정하면 예기치 않은 변경 사항이나 동작이 발생할 수 있는 자동 업데이트를 방지할 수 있습니다. 이 기능의 주요 이점은 다음과 같습니다.

제어: 업데이트 적용 시기와 방법에 대한 자율성을 유지합니다.
신뢰성: 테스트를 거쳐 승인된 버전의 에이전트가 항상 실행되고 있는지 확인하세요.
테스트 가능성: 업데이트를 결정하기 전에 격리된 환경에서 새 버전을 쉽게 테스트할 수 있습니다.
안정성: 예상치 못한 중단을 최소화하고 일관된 애플리케이션 동작을 유지합니다.
효율성: 배포 시간을 줄이고 배포 어려움을 완화합니다.

다음은 브라우저 에이전트 버전 고정 API를 사용하는 방법에 대한 개요입니다.

이 NerdGraph 쿼리를 사용하여 브라우저 애플리케이션이 사용하는 에이전트 유형과 특정 버전이 이미 고정되어 있는지 확인하세요.

query FetchBrowserMonitoringAgentSettings {
  actor {
    entity(guid: "YOUR_BROWSER_APP_GUID") {
      ... on BrowserApplicationEntity {
        guid
        name
        browserSettings {
          browserMonitoring {
            loader
            pinnedVersion
          }
        }
      }
    }
  }
}

위 쿼리에 대한 응답 예시:

{
  "data": {
    "actor": {
      "entity": {
        "browserSettings": {
          "browserMonitoring": {
            "loader": "SPA",
            "pinnedVersion": null
          }
        },
        "guid": "YOUR_BROWSER_APP_GUID",
        "name": "Example Single Page App"
      }
    }
  }
}

이 예에서 loader 는 SPA 유형이고 pinnedVersion 는 null 입니다. 이는 고정된 버전이 없음을 나타냅니다.

언제든지 이 쿼리를 실행하여 로더와 고정 버전의 조합을 확인할 수 있습니다.

고정하려는 버전을 식별한 후 다음 GraphQL 변형을 사용하여 설정하세요.

팁

앱에서 사용하려는 브라우저 에이전트의 의미 체계 버전을 사용해야 합니다. 최신 버전을 사용하려면 공백으로 남겨두세요. 버전 범위 내의 최신 릴리스를 나타내려면 숫자 대신 'x' 사용합니다(예: '1.x.x').

mutation {
  agentApplicationSettingsUpdate(
    guid: "YOUR_BROWSER_APP_GUID"
    settings: { browserMonitoring: { pinnedVersion: "1.229.0" } }
  ) {
    browserProperties {
      jsLoaderScript
    }
    browserSettings {
      browserMonitoring {
        loader
        pinnedVersion
      }
    }
  }
}

이 변형의 반환 필드에는 업데이트된 pinnedVersion 값과 업데이트된 jsLoaderScript 값이 포함됩니다.

loader 값을 NONE 로 변경하면 고정된 의미 버전이 제거됩니다.

복사/붙여넣기 방법을 사용하는 애플리케이션의 경우 기존 JavaScript 스니펫을 새로 디코딩된 <script> 으로 바꿉니다. 그런 다음 애플리케이션을 다시 배포하세요.

백엔드에 설치된 에이전트(예: Ruby, Python 등)를 통해 브라우저를 모니터링하는 애플리케이션의 경우 새 값을 가져오려면 에이전트를 다시 시작해야 합니다.

어느 경우든 다음에 애플리케이션이 브라우저 페이지를 제공할 때 고정된 에이전트 버전을 사용하여 New Relic 계정에 데이터를 보고해야 합니다.

첫 번째 단계에서 쿼리를 사용하면 고정된 버전과 로더 유형을 확인할 수 있다는 점을 기억하세요.

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

NerdGraph 자습서: 브라우저 에이전트 모니터링 예제

새 브라우저 애플리케이션 만들기

JavaScript 스니펫 검색

브라우저 모니터링 구성의 예

애플리케이션 구성 검색

브라우저 세그먼트로 데이터를 그룹화하세요.

세그먼트 나열

세그먼트 만들기

브라우저 에이전트 버전 고정

1단계. 현재 고정된 버전 검색

2단계. 사용 가능한 버전 검토

3단계. 원하는 버전 고정

팁

4단계. 애플리케이션 재배포 또는 에이전트 다시 시작

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

NerdGraph 자습서: 브라우저 에이전트 모니터링 예제

새 브라우저 애플리케이션 만들기 .css-21sua1{background:none;border:none;width:0;padding:0;}

JavaScript 스니펫 검색

브라우저 모니터링 구성의 예

애플리케이션 구성 검색

브라우저 세그먼트로 데이터를 그룹화하세요.

세그먼트 나열

세그먼트 만들기

브라우저 에이전트 버전 고정

2단계. 사용 가능한 버전 검토

3단계. 원하는 버전 고정

4단계. 애플리케이션 재배포 또는 에이전트 다시 시작

새 브라우저 애플리케이션 만들기