@creditas/new-relic-react-lib

v2.0.1

Published

3 years ago

React component for New Relic script

Downloads

0High
0Medium
0Low

`@creditas/new-relic-react-lib`

New Relic - React integration plugin

The package is based on new-relic-react package by reggi and later forked by wanderio. This variation includes a recent version of New Relic Browser plugin to inject JavaScript snippet to instrument your app's webpages. The javascript provided in this library include all Pro and SPA features of new relic's browser agent.

It also includes rollup.js to bundle source code as React component.

Getting Started

new-relic-react-lib can be installed as any other npm package:

npm install --save @creditas/new-relic-react-lib

Application Structure

.
├── src                     # Source files
│   ├── __tests__           # Test files
│   │   └── index.test.js   # Test cases for New Relic - React component
│   ├── index.js            # New Relic - React component source code
│   ├── index.d.ts          # Types for each accepted prop
├── package.json            # Package information with list of dependencies
├── LICENSE.md
└── README.md

Props

| Name | Type | Is Required | Default value | Notes | | ------------- | ------- | ----------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | accountID | String | true | - | (Recently Added) Different per environment (staging/prod). | | agentID | String | true | - | (Recently Added) Different per account and application. | | applicationID | String | true | - | - | | licenseKey | String | true | - | - | | agent | String | false | js-agent.newrelic.com/nr-spa-1210.min.js | - | | beacon | String | false | bam-cell.nr-data.net | (Recently Updated) With the new script version, the default domain value was changed from bam.nr-data.net to bam-cell.nr-data.net. | | errorBeacon | String | false | bam-cell.nr-data.net | (Recently Updated) With the new script version, the default domain value was changed from bam.nr-data.net to bam-cell.nr-data.net. | | onlyConfig | Boolean | false | false | Defines if it will return a component or only the script of New Relic. | | sa | Number | false | 1 | - | | trustKey | String | false | 735288 | (Recently Added) It does not change accross different envs/applications. |

Usage

Retrieving information

Go to one.newrelic.com > Browser > (select an app) > Settings > Application settings.
Retrieve this information from your New Relic account inside the "Agent and account" script:
- accountID: Current New Relic account ID
- agentID: Current New Relic agent ID
- licenseKey: New Relic account license key
- applicationID: Current New Relic application ID

Using the component

Import NewRelic into your component and pass the information as props.

Make sure to change the onlyConfig prop if you want to get only the script configuration, without the <script /> tag.

Example: using NewRelic component

import React from 'react'
import { NewRelic } from '@creditas/new-relic-react-lib'

const Html = () => {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <NewRelic
          applicationID="www"
          licenseKey="xxx"
          agentID="yyy"
          accountID="zzz"
        />
        <title>Web App</title>
      </head>
      <body>
        <div id="app">{children}</div>
      </body>
    </html>
  )
}

export default Html

Example: using NewRelic component inside a `<script />` tag

import React from 'react'
import { NewRelic } from '@creditas/new-relic-react-lib'

const Html = () => {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <script type="text/javascript">
          <NewRelic
            applicationID="www"
            licenseKey="xxx"
            agentID="yyy"
            accountID="zzz"
            onlyConfig
          />
        </script>
        <title>Web App</title>
      </head>
      <body>
        <div id="app">{children}</div>
      </body>
    </html>
  )
}

export default Html

Contributing

All contributions must be done through opening pull requests.

Deploy

Deploy is automaticaly made by CircleCI when you set a tag in your git project. First hand, change the version in the package.json. To ensure consistency check JFrog to see which is the latest version released, then, add a tag to git

git checkout master
git tag vX.Y.Z
git checkout vX.Y.Z
git push origin vX.Y.Z

License

MIT - http://opensource.org/licenses/mit-license.php

Based on https://github.com/wanderio/new-relic-react