ν΅μ¬λ‘
newrelic.interaction().createTracer(string $name[, function $callback])
λκΈ° μκ° λ° JS μ€ν μκ°μ ν¬ν¨νμ¬ SPA μνΈ μμ©μ νμ κ΅¬μ± μμλ₯Ό λ³λλ‘ κ³μ°ν©λλ€.
μꡬ μ¬ν
Browser Pro λλ Pro+SPA μμ΄μ νΈ(v963 μ΄μ)
npmμ μ¬μ©νμ¬ λΈλΌμ°μ μμ΄μ νΈλ₯Ό μ€μΉνλ κ²½μ°
BrowserAgent
ν΄λμ€λ₯Ό μΈμ€ν΄μ€νν λspa
κΈ°λ₯μ νμ±νν΄μΌ ν©λλ€.features
λ°°μ΄μ λ€μμ μΆκ°ν©λλ€.import { Spa } from '@newrelic/browser-agent/features/spa';const options = {info: { ... },loader_config: { ... },init: { ... },features: [Spa]}μμΈν λ΄μ©μ npm λΈλΌμ°μ μ€μΉ μ€λͺ μλ₯Ό μ°Έμ‘°νμΈμ.
μ€λͺ
μ΄ λ°©λ²μ λΈλΌμ°μ μμ κ°λ³μ μΌλ‘ SPA μνΈ μμ©μ νμ κ΅¬μ± μμ μκ°μ μΈ‘μ νλ λ°©λ²μ μ 곡ν©λλ€. κ° νμ κ΅¬μ± μμλ λ€μμ μΈ‘μ ν©λλ€.
- μ½λ°±μ΄ μ€νλ λκΉμ§ λκΈ° μκ°
- νΈμΆλ μ½λ°±μ JS μ€ν μκ°
μ΄ λ©μλλ κ³μΈ‘λμ§ μμ λΉλκΈ° λ©μλμ μν΄ μμ±λ λΉλκΈ° κ°μ μ°κ²°νλ λ°μλ μ¬μ©ν μ μμ΅λλ€.
νμ¬ μνΈμμ©μ΄ μ μ₯λλ©΄ New Relicμ΄ BrowserTiming
μ΄λ²€νΈ λ₯Ό μμ±ν©λλ€.
createTracer()
λ©μλλ μ½λμμ νΈμΆν΄μΌ νλ λνλ μ½λ°± λ©μλλ₯Ό λ°νν©λλ€. λ°νλ λνλ μ½λ°±μ νΈμΆλ λ μΈ κ°μ§ μμ
μ μνν©λλ€.
- μ¬μ©μ μ§μ μΆμ νλ‘κ·Έλ¨μ λΉλκΈ° λΆλΆμ λμ κΈ°λ‘ν©λλ€.
- λμΌν μΈμ λ° μ»¨ν
μ€νΈλ₯Ό μ¬μ©νμ¬
createTracer()
μ μ λ¬λ μλ μ½λ°±μ μ€νν©λλ€. - μλ μ½λ°±μ μ€ν νμμ λλ€.
createTracer()
}μ μ€ννλ BrowserInteraction
μ BrowserTiming
μ΄λ²€νΈ λ₯Ό μμ±ν©λλ€. μ½λ°± μ€μ μμ±λ λͺ¨λ μλ‘μ΄ XHR λλ μ¬μ©μ μ§μ μΆμ μ μνΈ μμ©μ μΌλΆλ‘ ν¬ν¨λ©λλ€.
λͺ¨λ μΆμ νλ‘κ·Έλ¨μ΄ μλ£λ λκΉμ§ μνΈ μμ©μ΄ μλ£λ κ²μΌλ‘ κ°μ£Όλμ§ μμ΅λλ€. μ΄κ²μ΄ μΆμ μκ° λΈλΌμ°μ μμ΄μ νΈκ° κΈ°λ³Έμ μΌλ‘ μ²λ¦¬νμ§ μλ λΉλκΈ° κΈ°λ₯μ λνν μ μκ² ν΄μ£Όλ κ²μ λλ€.
맀κ°λ³μ
맀κ°λ³μ | μ€λͺ |
---|---|
λ | νμμ. μ΄κ²μ μΆμ μμ μ΄λ¦μΌλ‘ μ¬μ©λ©λλ€. μ΄λ¦μ ν¬ν¨νμ§ μμΌλ©΄ λΈλΌμ°μ λ μνΈ μμ© νΈλ¦¬μ λ Έλλ₯Ό μΆκ°νμ§ μμ΅λλ€. μ½λ°± μκ°μ μμ λ Έλμ κΈ°μΈν©λλ€. |
κΈ°λ₯ | μ ν κ³Όλͺ©. λΉλκΈ° μμ
μ΄ λλ λ μ€νν λκΈ° μμ
μ΄ ν¬ν¨λ μ½λ°±μ
λλ€. μ΄ μ½λ°±μ μ€ννλ €λ©΄ |
λ°ν κ°
μλ μ½λ°±μ λννλ λ©μλλ₯Ό λ°νν©λλ€. μ΄ λ©μλκ° νΈμΆλλ©΄ μλ μ½λ°±μ νΈμΆνκ³ λΉλκΈ° νμ΄λ°μ μ’ λ£ν©λλ€.
μ
μΆμ μ μμ±
λ¨μν νΉμ μλ°μ€ν¬λ¦½νΈ ν¨μ νΈμΆμ 걸리λ μκ°μ μΈ‘μ νλ €λ κ²½μ° ν¨μλ₯Ό μ½λ°±μΌλ‘ createTracer()
μ μ λ¬ν μ μμ΅λλ€. μ΄λ κ² νλ©΄ λ°νλ λνΌ μ½λ°±μ΄ μ¦μ νΈμΆλ©λλ€.
newrelic .interaction() .createTracer('customSegment', function myCallback () { // ... do your work ... })();
μ΄ μλ리μ€μμ κ²°κ³Ό μ¬μ©μ μ§μ μΆμ κΈ°λ 무μν μ μλ λΉλκΈ° λκΈ° μ§μ μκ°κ³Ό myCallback()
μ μ€ν μκ°κ³Ό λμΌν λκΈ° μ§μ μκ°μ κ°μ΅λλ€.
κ³μΈ‘λμ§ μμ λΉλκΈ° API μΆμ
κΈ°λ³Έμ μΌλ‘ λΈλΌμ°μ μμ΄μ νΈλ κ°μ₯ μΌλ°μ μΈ λΉλκΈ° ν¨μ(μ: setTimeout()
)λ₯Ό λνν©λλ€. κ·Έλ¬λ μλμΌλ‘ μ²λ¦¬λμ§ μλ μΌλΆ κΈ°λ₯μ΄ μμ΅λλ€(μ: requestAnimationFrame()
). λν μΈκ³Ό κ΄κ³λ₯Ό μ½κ² κ²°μ ν μ μλ κ²½μ°κ° μμ΅λλ€(μ: μΉ μμΌμ ν΅ν μ¬μ©μ μ§μ RPC ꡬν). μ΄λ¬ν κ²½μ° createTracer()
λ₯Ό μ¬μ©νμ¬ μ΄λ¬ν κ³μΈ‘λμ§ μμ ν¨μμ λν μ½λ°±μ΄ μνΈμμ©μ μΌλΆλ‘ κ°μ£Όλλλ‘ ν μ μμ΅λλ€.
setTimeout()
, setImmediate()
, Promise()
, fetch()
λ° XMLHttpRequest()
μ κ°μ΄ λΈλΌμ°μ μμ΄μ νΈμ μν΄ κΈ°λ³Έμ μΌλ‘ λνλ λΉλκΈ° APIλ₯Ό κΈ°λ°μΌλ‘ νλ λΉλκΈ° μμ½ μμ€ν
μλ createTracer()
μ μ¬μ©ν νμκ° μμ΅λλ€. μ΄λ¬ν APIμ μν΄ μμ±λ λΉλκΈ° κ²½κ³λ λΈλΌμ°μ μμ΄μ νΈμ μν΄ μλμΌλ‘ μ°κ²°λ©λλ€.
μλ μμ μ½λμλ μ½λ°±μ μλ½νκ³ λ―Έλμ νΉμ μμ μμ λΉλκΈ°μ μΌλ‘ μ€ννλ doAsyncWork()
ν¨μκ° μμ΅λλ€. doAsyncWork()
μ νΈμΆν μμ κ³Ό μ½λ°±μ΄ μ€νλκΈ° μμνλ μμ μ¬μ΄μ μκ°(λΉλκΈ° λκΈ° μκ°)κ³Ό μ½λ°±μ μ€ννλ λ° κ±Έλ¦° μκ°(λκΈ° μ½λ°± μκ°)μ λͺ¨λ μΈ‘μ νλ €κ³ ν©λλ€.
var wrappedCallback = newrelic .interaction() .createTracer('customSegment', doTheWork);
doAsyncWork(wrappedCallback);
function doTheWork() { // ... do your work ...}
λ€μμ μΆμ κΈ° νμ΄λ°μ λν μ΄λ²€νΈ νμλΌμΈμ λλ€.