Skip to content

Commit

Permalink
Merge pull request #386 from MindscapeHQ/kk/cwv/add-library
Browse files Browse the repository at this point in the history
[Core Web Vitals] Add automatic CWV tracking to the provider
  • Loading branch information
Krishna Kapadia committed Feb 9, 2021
2 parents f9ca26b + 692fbee commit ea6a649
Show file tree
Hide file tree
Showing 12 changed files with 138 additions and 15 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
* v2.22.0
- Adds the ability to track Core Web Vitals when the `trackCoreWebVitals` option is enabled.

* v2.21.1
- Fixes an issue where errors generated on Cordova iOS 6.0+ applications would not contain a stack trace due to the scheme changing from `file` and to `app`

Expand Down
8 changes: 4 additions & 4 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ module.exports = function(grunt) {
},
dist: {
files: {
'dist/raygun.js': ['tracekit/tracekit.js', 'src/raygun.tracekit.jquery.js', 'src/polyfills.js', 'src/raygun.utilities/index.js', 'src/raygun.network-tracking.js', 'src/raygun.breadcrumbs.js', 'src/raygun.js', 'src/raygun.rum/index.js', 'src/raygun.loader.js'],
'dist/raygun.vanilla.js': ['tracekit/tracekit.js', 'src/polyfills.js', 'src/raygun.utilities/index.js', 'src/raygun.network-tracking.js', 'src/raygun.breadcrumbs.js', 'src/raygun.js', 'src/raygun.rum/index.js', 'src/raygun.loader.js'],
'dist/raygun.umd.js': ['src/umd.intro.js', 'tracekit/tracekit.js', 'src/polyfills.js', 'src/raygun.tracekit.jquery.js', 'src/raygun.utilities/index.js', 'src/raygun.network-tracking.js', 'src/raygun.breadcrumbs.js', 'src/raygun.js', 'src/raygun.rum/index.js', 'src/raygun.loader.js', 'src/umd.outro.js']
'dist/raygun.js': ['tracekit/tracekit.js', 'src/raygun.tracekit.jquery.js', 'src/polyfills.js', 'src/raygun.rum/vendor/web-vitals-polyfills.vendor.js', 'src/raygun.utilities/index.js', 'src/raygun.network-tracking.js', 'src/raygun.breadcrumbs.js', 'src/raygun.rum/core-web-vitals.js', 'src/raygun.js', 'src/raygun.rum/vendor/web-vitals.vendor.js', 'src/raygun.rum/index.js', 'src/raygun.loader.js'],
'dist/raygun.vanilla.js': ['tracekit/tracekit.js', 'src/polyfills.js', 'src/raygun.rum/vendor/web-vitals-polyfills.vendor.js', 'src/raygun.utilities/index.js', 'src/raygun.network-tracking.js', 'src/raygun.breadcrumbs.js', 'src/raygun.rum/core-web-vitals.js', 'src/raygun.js', 'src/raygun.rum/vendor/web-vitals.vendor.js', 'src/raygun.rum/index.js', 'src/raygun.loader.js'],
'dist/raygun.umd.js': ['src/umd.intro.js', 'tracekit/tracekit.js', 'src/polyfills.js', 'src/raygun.rum/vendor/web-vitals-polyfills.vendor.js', 'src/raygun.tracekit.jquery.js', 'src/raygun.utilities/index.js', 'src/raygun.network-tracking.js', 'src/raygun.breadcrumbs.js', 'src/raygun.rum/core-web-vitals.js', 'src/raygun.js', 'src/raygun.rum/vendor/web-vitals.vendor.js', 'src/raygun.rum/index.js', 'src/raygun.loader.js', 'src/umd.outro.js']
}
}
},
Expand Down Expand Up @@ -63,7 +63,7 @@ module.exports = function(grunt) {
src: {
options: {
jshintrc: 'src/.jshintrc',
ignores: ['src/snippet/**/*.js', 'src/umd.*', 'src/**/*.spec.js', 'src/helpers/*']
ignores: ['src/snippet/**/*.js', 'src/umd.*', 'src/**/*.spec.js', 'src/helpers/*', 'src/raygun.rum/vendor/*.js']
},
src: ['src/**/*.js']
}
Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "raygun4js",
"version": "2.21.1",
"version": "2.22.0",
"homepage": "http://raygun.io",
"authors": [
"Mindscape <[email protected]>"
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
],
"title": "Raygun4js",
"description": "Raygun.com plugin for JavaScript",
"version": "2.21.1",
"version": "2.22.0",
"homepage": "https://github.com/MindscapeHQ/raygun4js",
"author": {
"name": "MindscapeHQ",
Expand Down
2 changes: 1 addition & 1 deletion raygun4js.nuspec
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
<metadata>
<id>raygun4js</id>
<version>2.21.1</version>
<version>2.22.0</version>
<title>Raygun4js</title>
<authors>Mindscape Limited</authors>
<owners>Mindscape Limited</owners>
Expand Down
8 changes: 5 additions & 3 deletions rum-spa-test.html
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@ <h2>das da stuff</h2>
rg4js('enableCrashReporting', true);
rg4js('enablePulse', true);
rg4js('options', {
automaticPerformanceCustomTimings: true
automaticPerformanceCustomTimings: true,
trackCoreWebVitals: true
});

rg4js('trackEvent', {
Expand All @@ -66,7 +67,6 @@ <h2>das da stuff</h2>
setTimeout(() => {
window.performance.measure('testPageNavigation', 'pageNavigation');


rg4js('trackEvent', {
type: 'pageView',
path: '/menu'
Expand Down Expand Up @@ -104,7 +104,9 @@ <h2>das da stuff</h2>
}, 250);
}, 250);
}, 250);

</script>
<div></div>
<button id="btn"></button>

</body>
</html>
9 changes: 7 additions & 2 deletions src/raygun.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@
* Licensed under the MIT license.
*/

/*globals __DEV__, raygunUtilityFactory, raygunBreadcrumbsFactory, raygunNetworkTrackingFactory */
/*globals __DEV__, raygunUtilityFactory, raygunBreadcrumbsFactory, raygunNetworkTrackingFactory, raygunCoreWebVitalFactory */

var raygunFactory = function(window, $, undefined) {
var Raygun = {};
Raygun.Utilities = raygunUtilityFactory(window, Raygun);
Raygun.NetworkTracking = raygunNetworkTrackingFactory(window, Raygun);
Raygun.Breadcrumbs = raygunBreadcrumbsFactory(window, Raygun);
Raygun.CoreWebVitals = raygunCoreWebVitalFactory(window);

// Constants
var ProviderStates = {
Expand All @@ -40,6 +41,7 @@ var raygunFactory = function(window, $, undefined) {
_disablePulse = true,
_wrapAsynchronousCallbacks = false,
_automaticPerformanceCustomTimings = false,
_trackCoreWebVitals = false,
_customData = {},
_tags = [],
_user,
Expand Down Expand Up @@ -120,6 +122,7 @@ var raygunFactory = function(window, $, undefined) {
_setCookieAsSecure = options.setCookieAsSecure || false;
_captureMissingRequests = options.captureMissingRequests || false;
_automaticPerformanceCustomTimings = options.automaticPerformanceCustomTimings || false;
_trackCoreWebVitals = options.trackCoreWebVitals || false;

if (options.apiUrl) {
_raygunApiUrl = options.apiUrl;
Expand Down Expand Up @@ -219,6 +222,7 @@ var raygunFactory = function(window, $, undefined) {
if ($document && $document.ajaxError && !_ignoreAjaxError) {
$document.ajaxError(processJQueryAjaxError);
}

return Raygun;
},

Expand Down Expand Up @@ -503,7 +507,8 @@ var raygunFactory = function(window, $, undefined) {
_beforeSendRumCallback,
_setCookieAsSecure,
_captureMissingRequests,
_automaticPerformanceCustomTimings
_automaticPerformanceCustomTimings,
_trackCoreWebVitals
);
_rum.attach();
};
Expand Down
59 changes: 59 additions & 0 deletions src/raygun.rum/core-web-vitals.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/**
* @prettier
*/

/*
* raygun4js
* https://github.com/MindscapeHQ/raygun4js
*
* Copyright (c) 2021 MindscapeHQ
* Licensed under the MIT license.
*/


function raygunCoreWebVitalFactory(window) {
var WebVitalTimingType = "w";
var queueTimings = null;

var CoreWebVitals = function(){
this.cleanWebVitalData = function (event) {
var res = event;

if(res.value && res.value.toFixed) {
res.value = res.value.toFixed(3);
}

return res;
};
};

CoreWebVitals.prototype.attach = function(queueHandler) {
queueTimings = queueHandler;

if(window.webVitals) {
window.webVitals.getLCP(this.handler);
window.webVitals.getFID(this.handler);
window.webVitals.getCLS(this.handler);
}
};

CoreWebVitals.prototype.handler = function(event) {
if(event.value && event.value.toFixed) {
event.value = event.value.toFixed(3);
}

var webVitalEvent = {
url: event.name,
timing: {
t: WebVitalTimingType,
du: event.value
}
};

queueTimings(webVitalEvent);
};

return new CoreWebVitals();
}

window.raygunCoreWebVitalFactory = raygunCoreWebVitalFactory;
36 changes: 36 additions & 0 deletions src/raygun.rum/core-web-vitals.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/*jshint esversion: 6 */

require('./core-web-vitals');

describe("core-web-vitals", () => {
let CoreWebVitals = window.raygunCoreWebVitalFactory({ webVitals: null }), queue = [];
CoreWebVitals.attach(e => queue.push(e));

beforeEach(() => {
queue = [];
});

describe("handler is called", () => {
it("creates the appropriate payload", () => {
CoreWebVitals.handler({ name: "FID", value: "1" });

expect(queue.pop()).toEqual({
url: "FID",
timing: {
t: "w",
du: "1"
}
});
});
});

describe("event reports long metric value", () => {

it('value is rounded to 3dp', () => {
CoreWebVitals.handler({ name: "FID", value: 0.14589 });

var res = queue.pop();
expect(res.timing.du).toBe('0.146');
});
});
});
16 changes: 13 additions & 3 deletions src/raygun.rum/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ var raygunRumFactory = function(window, $, Raygun) {
beforeSendCb,
setCookieAsSecure,
captureMissingRequests,
automaticPerformanceCustomTimings
automaticPerformanceCustomTimings,
trackCoreWebVitals
) {
var self = this;
var _private = {};
Expand All @@ -46,6 +47,9 @@ var raygunRumFactory = function(window, $, Raygun) {
*/
this.customTimingsEnabled = customTimingsEnabled;
this.automaticPerformanceCustomTimings = automaticPerformanceCustomTimings;

this.trackCoreWebVitals = trackCoreWebVitals;

this.beforeSend =
beforeSendCb ||
function(payload) {
Expand Down Expand Up @@ -86,7 +90,8 @@ var raygunRumFactory = function(window, $, Raygun) {
XHR: 'x',
CachedChildAsset: 'e',
ChildAsset: 'c',
CustomTiming: 't'
CustomTiming: 't',
CoreWebVital: 'w'
};

this.Utilities = {};
Expand All @@ -98,6 +103,10 @@ var raygunRumFactory = function(window, $, Raygun) {
// ================================================================================

this.attach = function() {
if(this.trackCoreWebVitals) {
Raygun.CoreWebVitals.attach(addPerformanceTimingsToQueue);
}

getSessionId(function(isNewSession) {
self.pageLoaded(isNewSession);
});
Expand Down Expand Up @@ -133,7 +142,7 @@ var raygunRumFactory = function(window, $, Raygun) {
} else if (window.attachEvent) {
document.attachEvent('onclick', clickHandler);
}

Raygun.NetworkTracking.on('request', xhrRequestHandler.bind(this));
Raygun.NetworkTracking.on('error', xhrErrorHandler.bind(this));
Raygun.NetworkTracking.on('response', xhrResponseHandler.bind(this));
Expand Down Expand Up @@ -194,6 +203,7 @@ var raygunRumFactory = function(window, $, Raygun) {
sendNewSessionStart();
};

// Legacy Custom Timings
this.sendCustomTimings = function(customTimings) {
if (
typeof customTimings === 'object' &&
Expand Down
4 changes: 4 additions & 0 deletions src/raygun.rum/vendor/web-vitals-polyfills.vendor.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions src/raygun.rum/vendor/web-vitals.vendor.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit ea6a649

Please sign in to comment.