Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sir-dunxalot/ember-new-relic

Adds New Relic to your Ember CLI app based on the app's environment
https://github.com/sir-dunxalot/ember-new-relic

ember ember-addon new-relic

Last synced: 3 months ago
JSON representation

Adds New Relic to your Ember CLI app based on the app's environment

Awesome Lists containing this project

README

        

Ember New Relic [![Build Status](https://travis-ci.org/sir-dunxalot/ember-new-relic.svg?branch=master)](https://travis-ci.org/sir-dunxalot/ember-new-relic) [![npm](https://img.shields.io/npm/v/ember-new-relic.svg)](https://www.npmjs.com/package/ember-new-relic)
======

This Ember addon adds [New Relic Browser](http://newrelic.com/browser-monitoring) to your app. All PRs and issues are welcome.

- [Installation](#installation)
- [Usage](#usage)
- [Basic Usage](#basic-usage)
- [Configuration](#configuration)
- [SPA Monitoring](#spa-monitoring)
- [Environments](#environments)
- [Content Security Policy](#content-security-policy)
- [Development](#development)

Installation
------------------------------------------------------------------------------

```sh
ember install ember-new-relic
```

## Usage

### Basic Usage

Add your `applicationId` and `licenseKey` to `config/environment.js`:

```js
/* config/environment.js */

module.exports = function(environment) {
environment === 'development';

var ENV = {
newRelic: {
applicationId: '97bfuo3FFd3',
licenseKey: 'ef234SgE4'
}
};
}
```

### Configuration

You might also want to specify your agent, beacon, or other properties:

```js
/* config/environment.js */

module.exports = function(environment) {
environment === 'development';

var ENV = {
newRelic: {
agent: 'js-agent.newrelic.com/nr-1016.min.js',
applicationId: '97bfuo3FFd3',
beacon: 'bam.nr-data.net',
errorBeacon: 'bam.nr-data.net',
licenseKey: 'ef234SgE4',
spaMonitoring: true,
sa: 1,
}
};
}
```

Value and descriptions for all of the above can be found in your New Relic Browser's application settings.

It is likely you will only have to set `applicationId`, `licenseKey`, and `agent` to match your New Relic code snippet.

#### SPA Monitoring

New Relic released [SPA Monitoring](https://docs.newrelic.com/docs/browser/single-page-app-monitoring/get-started/welcome-single-page-app-monitoring) on July 12th 2016. By default, this addon does *not* use SPA Monitoring.

If you want to use New Relic SPA Monitoring, you must enable `spaMonitoring` in your configuration as follows:

```js
/* config/environment.js */

module.exports = function(environment) {
environment === 'development';

var ENV = {
newRelic: {
spaMonitoring: true,
}
};
}
```

This will replace the default New Relic code snippet with the New Relic SPA code snippet.

### Environments

To enable New Relic Browser in certain environments, just include `applicationId` for those environments only:

```js
/* config/environment.js */

module.exports = function(environment) {
environment === 'development';

var ENV = {
newRelic: {
licenseKey: 'ef234SgE4'
}
};

if (environment !== test) {
ENV.newRelic.applicationId = '97bfuo3FFd3';
}
}
```

You can also use different application IDs for different environments:

```js
/* config/environment.js */

module.exports = function(environment) {
environment === 'development';

var ENV = {
newRelic: {
licenseKey: 'ef234SgE4'
}
};

if (environment === 'development') {
ENV.newRelic.applicationId = '97bfuo3FFd3';
} else if (environment === 'production') {
ENV.newRelic.applicationId = 'f99FJ930sp';
}
}
```

### Manual Script Loading

By default the New Relic code snippet is imported into `vendor.js`.

If you want to manually import the snippet from an external JS file, configure `ember-cli-build.js` with `ember-new-relic` options as follows:

```js
/* ember-cli-build.js */
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
'ember-new-relic': {
importToVendor: false
}
});

return app.toTree();
};
```

Prepare your `app/index.html` with the New Relic script, placed above the `vendor.js` script as follows:

```html

```

### Change the Script Path

The New Relic code's default output path is `new-relic.js`, accessible at the root of the output folder.

If you want to change the output path, configure `ember-cli-build.js` with `ember-new-relic` options as follows:

```javascript
/* ember-cli-build.js */
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
'ember-new-relic': {
outputPath: 'assets/new-relic.js'
}
});

return app.toTree();
};
```

When used in conjunction with `importToVendor` disabled, remember to update the path in `app/index.html`.

## Content Security Policy

To avoid browser errors, add the following to your CSP:

```js
/* config/environment.js */

module.exports = function(environment) {
environment === 'development';

var ENV = {
newRelic: {
licenseKey: 'ef234SgE4',
applicationId: '97bfuo3FFd3',
},

contentSecurityPolicy: {
'connect-src': "'self' https://*.nr-data.net",
'img-src': "'self' https://*.nr-data.net",
'script-src': "'self' http://*.newrelic.com https://*.nr-data.net http://*.nr-data.net",
},
};
}
```

## Development

Run the tests using `ember test` or by navigating to the `/tests` route in the browser.

Please accompany PRs for bugs and new functionality with test coverage.