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"]
        }
      }
    }
  }
}

세그먼트 만들기

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

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

응답은 다음과 같습니다.

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

난독화 룰 생성

뉴렐릭 플랫폼 또는 NerdGraph에서 직접 수집 난독화 룰을 생성하여 민감한 데이터가 수집되기 전에 마스크할 수 있습니다. 이 룰은 모든 브라우저 이벤트에 적용됩니다. 플랫폼 또는 NerdGraph를 통해 설정된 룰은 APM이 주입된 애플리케이션, 복사/붙여넣기 설치 및 NPM 설치에 적용됩니다. 플랫폼 또는 JavaScript를 통해 룰을 생성하려면 브라우저 에이전트에서 민감한 데이터 난독화를 참조하세요.

NerdGraph를 통해 난독화 룰을 생성하려면:

다음 쿼리를 사용하여 브라우저 애플리케이션의 현재 난독화 룰을 검색합니다:

actor {
      entities(guids: "YOUR_BROWSER_APP_GUID") {
        ... on BrowserApplicationEntity {
          browserSettings {
            browserObfuscation {
              rules {
                regex
                replacement
                eventFilter
              }
            }
          }
        }
      }
    }

중요

agentApplicationSettingsUpdate 뮤테이션은 기존 룰을 제공하는 새로운 룰 세트로 덮어쓰므로, 업데이트하기 전에 현재 룰을 검색해야 합니다. 기존 룰을 유지하려면 뮤테이션에서 보내는 새로운 룰 세트에 해당 룰을 포함해야 합니다.

agentApplicationSettingsUpdate 뮤테이션을 사용하여 난독화 룰을 업데이트합니다. 다음 속성을 정의하여 새 룰을 추가하거나 기존 룰을 수정할 수 있습니다:

regex: 난독화하려는 데이터와 일치하는 정규식 패턴입니다. 예를 들어, \b\d{3}-?\d{2}-?\d{4}\b 을(를) 사용하여 사회 보장 번호와 일치시킬 수 있습니다.
replacement: 일치하는 데이터를 대체할 문자열입니다. 예를 들어 XXX-XX-XXXX 을(를) 사용하여 주민등록번호를 마스크할 수 있습니다.

eventFilter: 룰을 적용해야 하는 브라우저 이벤트 유형의 어레이입니다. 예를 들어, ["AjaxRequest"] 을(를) 지정하여 AJAX 요청 이벤트에만 룰을 적용할 수 있습니다.

mutation {
  agentApplicationSettingsUpdate(
    guid: "YOUR_BROWSER_APP_GUID"
    settings: {
      browserObfuscation: {
        rules: [
          {
            regex: "YOUR_REGEX_HERE"
            replacement: "XXX-XX-XXXX"
            eventFilter: ["AjaxRequest"]
          }
        ]
      }
    }
  ) {
    browserSettings {
      browserObfuscation {
        rules {
          regex
          replacement
          eventFilter
        }
      }
    }
  }
}

AJAX 페이로드 캡처 구성

NerdGraph를 사용하여 브라우저 애플리케이션에 대한 AJAX 페이로드 캡처 설정을 검색하고 업데이트할 수 있습니다. 이 설정은 AJAX 호출에 대한 요청 및 응답 페이로드 캡처 여부를 제어하며 애플리케이션 설정의 페이로드 캡처 옵션에 해당합니다.

두 단계로 페이로드 캡처 설정을 활성화할 수 있습니다:

현재 페이로드 캡처 설정을 검색합니다.
capturePayloads 모드 를 다음 값 중 하나로 설정합니다:
- none: 페이로드 데이터가 캡처되지 않습니다.
- failures: 상태 코드가 0이거나 400 이상인 requests 또는 response body에 GraphQL 오류 서명이 있는 requests에 대해서만 페이로드를 캡처합니다.
- all: 모든 requests에 대한 페이로드를 캡처합니다.

다음 쿼리를 사용하여 브라우저 애플리케이션에 대한 현재 페이로드 캡처 설정을 검색합니다:

query FetchBrowserAjaxPayloadCapture {
  actor {
    user {
      name
    }
    entity(guid: "YOUR_ENTITY_GUID") {
      ... on BrowserApplicationEntity {
        guid
        name
        browserSettings {
          browserMonitoring {
            ajax {
              capturePayloads
            }
          }
        }
      }
    }
  }
}

agentApplicationSettingsUpdate 뮤테이션을 사용하여 페이로드 캡처 설정을 업데이트합니다:

mutation UpdateBrowserAjaxPayloadCapture(
  $guid: EntityGuid!
  $settings: AgentApplicationSettingsUpdateInput!
) {
  agentApplicationSettingsUpdate(guid: $guid, settings: $settings) {
    browserSettings {
      browserMonitoring {
        ajax {
          capturePayloads
        }
      }
    }
    errors {
      description
      errorClass
      field
    }
  }
}

변수에서 guid 및 capturePayloads 옵션을 설정합니다.

{
  "guid": "YOUR_BROWSER_APP_GUID",
  "settings": {
    "browserMonitoring": {
      "ajax": {
        "capturePayloads": "failures"
      }
    }
  }
}

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

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

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

다음은 브라우저 에이전트 버전 고정 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단계: 난독화 룰 업데이트

AJAX 페이로드 캡처 구성

페이로드 캡처 설정 쿼리

페이로드 캡처 설정 업데이트

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

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

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

3단계. 원하는 버전 고정

팁

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

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

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

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

JavaScript 스니펫 검색

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

애플리케이션 구성 검색

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

세그먼트 나열

세그먼트 만들기

난독화 룰 생성

2단계: 난독화 룰 업데이트

AJAX 페이로드 캡처 구성

페이로드 캡처 설정 쿼리

페이로드 캡처 설정 업데이트

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

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

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

3단계. 원하는 버전 고정

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

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