damjack/elm-newrelic-nreum

Opinionated library to use NewRelic NREUM with ELM


License
BSD-3-Clause
Install
elm-package install damjack/elm-newrelic-nreum 1.0.0

Documentation

NewRelic Browser Utility for NREUM

Utilities to automate RUM data to NewRelic

This component is useful to create a list of Cmd msg to interact with Browser agent or SPA API

Getting started

Installation

Install the package in the normal way:

elm install damjack/elm-newrelic-nreum

Connect your JS to Elm

You need to initialise the NewRelic NREUM windows object and expose correct ports.

import * as  newrelicElm from 'elm-newrelic-nreum';

const elmApp = Elm.Main.init({
  node: document.getElementById('root'),
  flags: {},
});

newrelicElm.cspEvent();
newrelicElm.elmPortsToJS(elmApp);

After this you can create a specific ports (one for every single tracking event) and helper to covert all Return msg to Cmd msg.

port module NewrelicPorts exposing
    ( routeNamePort_
    , interactionPort_
    , noticeErrorPort_
    , addPageActionPort_
    , addReleasePort_
    )

import Json.Encode as JE


port routeNamePort_ : JE.Value -> Cmd msg


port interactionPort_ : JE.Value -> Cmd msg


port noticeErrorPort_ : JE.Value -> Cmd msg


port addPageActionPort_ : JE.Value -> Cmd msg


port addReleasePort_ : JE.Value -> Cmd msg

And finally use that port to emitt Cmd msg:

Instead of use multiple separate ports, you can pass always to one:

import * as  newrelicElm from 'elm-newrelic-nreum';

const elmApp = Elm.Main.init({
  node: document.getElementById('root'),
  flags: {},
});

newrelicElm.cspEvent();
newrelicElm.elmUniquePortToJS(elmApp);

And create the unique port:

port module NewrelicPort exposing
  ( nreumPort_
  )

import Json.Encode as JE


port nreumPort_ : JE.Value -> Cmd msg

Usage into ELM

AddRelease

import NewRelic.NREUM.AddRelease as NRAddRelease
import NewRelic.Nreum as NRNreum
import NewrelicPort


NRAddRelease.init "App Name" "V-0.0.1"
    |> NRNreum.release
    |> NRNreum.publish NewrelicPort.nreumPort_

RouteName

import NewRelic.NREUM.RouteName as NRRouteName
import NewRelic.Nreum as NRNreum
import NewrelicPort


NRRouteName.init "/page-path/:object-id/something"
    |> NRNreum.routeName
    |> NRNreum.publish NewrelicPort.nreumPort_

Interaction

import NewRelic.NREUM.Interaction as NRInteraction
import NewRelic.AdditionalData as NRAdditionalData
import NewRelic.Nreum as NRNreum
import NewrelicPort

let
    aditionalDataString: NRAdditionalData.AdditionalData
    aditionalDataString = NRAdditionalData.setString "keyString" "value"

    aditionalDataInt: NRAdditionalData.AdditionalData
    aditionalDataInt = NRAdditionalData.setInt "keyInt" 123
in
NRInteraction.init "interaction @smoething"
    |> NRInteraction.addMessage "click purchease"
    |> NRInteraction.addAdditionalData aditionalDataString
    |> NRInteraction.addAdditionalData aditionalDataInt
    |> NRNreum.interaction
    |> NRNreum.publish NewrelicPort.nreumPort_

NoticeError

import NewRelic.NREUM.NoticeError as NRNoticeError
import NewRelic.AdditionalData as NRAdditionalData
import NewRelic.Nreum as NRNreum
import NewrelicPort


let
    requestResult: Graphql.Http.Error QueryOrMutationResult
    requestResult = ...

    aditionalDataString: NRAdditionalData.AdditionalData
    aditionalDataString = NRAdditionalData.setString "keyString" "value"

    aditionalDataInt: NRAdditionalData.AdditionalData
    aditionalDataInt = NRAdditionalData.setInt "keyInt" 123
in
requestResult
    |> NRNoticeError.toGraphQLResultError
    |> NRNoticeError.init "error @requestResult"
    |> NRNoticeError.addAdditionalData aditionalDataString
    |> NRNoticeError.addAdditionalData aditionalDataInt
    |> NRNreum.noticeError
    |> NRNreum.publish NewrelicPort.nreumPort_