브라우저 모니터링 및 Node.js 에이전트

Node.js 에이전트를 사용하면 웹 페이지에 브라우저 계측을 추가할 수 있습니다. 사용 Node.js 에이전트를 사용하려면 Node.js 에이전트의 최신 릴리스가 있는지 확인하세요.

사용자 인터페이스에서 브라우저 모니터링을 활성화하려면 절차에 따라 브라우저 에이전트를 설치하십시오 . 그런 다음 이 섹션의 절차에 따라 Node.js 에이전트를 설정합니다.

자바스크립트 헤더 삽입

Node.js 에이전트에 대한 계측은 애플리케이션을 넘어 최종 사용자의 브라우저까지 계속될 수 있습니다. newrelic 모듈은 HTML 템플릿에 삽입될 때 최종 사용자의 페이지 로드 시간을 캡처하는 script 헤더를 생성할 수 있습니다. 헤더는 수동으로 삽입해야 하지만 추가 구성은 필요하지 않습니다.

html 페이지의 head 태그 시작 부분에서 CHARSET 메타 태그 뒤에 newrelic.getBrowserTimingHeader() 결과를 삽입합니다.
예외: 최대 Internet Explorer 호환성을 위해 X-UA-COMPATIBLE HTTP-EQUIV 메타 태그 뒤에 newrelic.getBrowserTimingHeader() 결과를 삽입하십시오.
모든 요청에 대해 헤더를 한 번 호출합니다. 헤더를 캐시하지 마십시오.

헤더 생성은 빠르며 애플리케이션이 New Relic에 추가 요청을 할 필요가 없습니다.

프레임워크 예제

다음은 다양한 프레임워크 및 템플릿으로 브라우저 모니터링을 설정하는 방법에 대한 몇 가지 예입니다.

이 예제에서는 웹 애플리케이션 프레임워크인 Express 와 템플릿 모듈인 jade 를 사용합니다. 세부 사항은 다른 프레임워크와 다르지만 대부분의 경우 이 일반적인 접근 방식이 작동합니다.

브라우저 타이밍 제목을 삽입하는 가장 간단한 방법은 newrelic 모듈을 템플릿에 전달한 다음 템플릿 내에서 newrelic.getBrowserTimingHeader() 을 호출하는 것입니다.

app.js :

const newrelic = require('newrelic');
const app = require('express')();
// in express, this lets you call newrelic from within a template
app.locals.newrelic = newrelic;

app.get('/user/:id', function (req, res) {
  res.render('user');
});
app.listen(process.env.PORT);

layout.jade :

doctype html
html
head
  != newrelic.getBrowserTimingHeader()
  title= title
  link(rel='stylesheet', href='stylesheets/style.css')
body
  block content

이 예제에서는 Swig 와 함께 Express를 사용합니다.

app.js :

const newrelic = require('newrelic');

const http = require('http')
const path = require('path')
const swig = require('swig')

const app = require('express')();

app.locals.newrelic = newrelic;

//taken from http://paularmstrong.github.io/swig/docs/#express
app.engine('html', swig.renderFile);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');

app.get('/user/:id', function (req, res) {
  res.render('user');
});

app.listen(process.env.PORT);

views/user.html :

<!DOCTYPE html>
<html>
  <head>
    {{ newrelic.getBrowserTimingHeader() }}
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

이 예에서는 hapi.js 및 핸들바를 사용합니다. 다른 유사한 템플릿 언어에는 일반적으로 삼중 괄호가 필요합니다. 예를 들어 hogan-express 와 함께 콧수염 을 사용합니다. 이것은 스크립트 내용의 이스케이프를 방지하는 데 도움이 됩니다.

app.js 에서 hapi 사용:

const newrelic = require('newrelic');
const Hapi = require('hapi');
const server = new Hapi.Server(parseInt(PORT), '0.0.0.0', {
  views: {
    engines : {html: 'handlebars' },
    path : __dirname + '/templates'
  }
});

function homepage(request, reply) {
  const context = {
    // pass in the header each request
    nreum : newrelic.getBrowserTimingHeader(),
    content : ...
  };

  reply.view('homepage', context);
};

server.route({
  method : 'GET',
  path : '/',
  handler : homepage
});

server.start();

templates/homepage.html :

<!DOCTYPE html>
<html>
  <head>
    {{{ nreum }}}
    <title>Hello</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

헤더 생성 비활성화

기본적으로 newrelic.getBrowserTimingHeader() 에 대한 호출은 유효한 헤더를 반환해야 합니다. 템플릿 코드를 제거하지 않고 헤더 생성을 비활성화하려면: newrelic.js 파일에 다음을 추가합니다.

browser_monitoring : {
    enable : false
}

환경 변수 NEW_RELIC_BROWSER_MONITOR_ENABLE=false 를 설정할 수도 있습니다.

주의

브라우저 모니터링을 사용할 때는 항상 에이전트와 New Relic 수집기 사이에 ssl 을 남겨둡니다.

브라우저 모니터링 또는 newrelic 모듈을 사용하지 않는 경우에도 API 호출을 제자리에 안전하게 둘 수 있습니다.

브라우저 모니터링이 비활성화되어 있거나 작업 헤더를 생성할 수 없는 오류가 있는 경우 newrelic 모듈은 무해한 HTML 주석을 생성합니다.
newrelic 모듈을 완전히 비활성화하면 콘텐츠가 생성되지 않습니다.

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

브라우저 모니터링 및 Node.js 에이전트

자바스크립트 헤더 삽입

프레임워크 예제

표현과 옥

익스프레스와 스위그

Hapi.js 및 핸들바

헤더 생성 비활성화

주의

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

브라우저 모니터링 및 Node.js 에이전트

자바스크립트 헤더 삽입 .css-21sua1{background:none;border:none;width:0;padding:0;}

프레임워크 예제

익스프레스와 스위그

Hapi.js 및 핸들바

헤더 생성 비활성화

주의

자바스크립트 헤더 삽입