Feat/trackjs (#11)

* wip: add base trackjs

* wip: cleanup

* doc: update integ

* doc: update integ

* chore: changeset release

.changeset/calm-cooks-refuse.md

@@ -0,0 +1,5 @@
+---
+"@bharathvaj/fullstory-trackjs": major
+---
+
+Initial Release

README.md

@@ -8,6 +8,7 @@ _Please note that these are community packages and not official one._
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
 **Table of content**
 
 - [Integrations supported](#integrations-supported)
@@ -21,6 +22,7 @@ _Please note that these are community packages and not official one._
 | --------------------------- | -------------------------------------------------------------------------- |
 | [Bugsnag](packages/bugsnag) | ![Bugsnag](https://img.shields.io/npm/v/@bharathvaj/fullstory-bugsnag.svg) |
 | [Rollbar](packages/rollbar) | ![Rollbar](https://img.shields.io/npm/v/@bharathvaj/fullstory-rollbar.svg) |
+| [TrackJS](packages/trackjs) | ![TrackJS](https://img.shields.io/npm/v/@bharathvaj/fullstory-trackjs.svg) |
 
 ## License
 

packages/trackjs/README.md

@@ -0,0 +1,100 @@
+# fullstory-trackjs
+
+The FullStory-trackjs integration seamlessly integrates the FullStorys and trackjs platforms. When you look at a browser error in trackjs, you will see a link
+to the FullStory session replay at that exact moment in time under meta data section. When you are watching a FullStory replay and your user experiences an
+error, you will see a custom error with the basic error details and link to trackjs meta data.
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+**Table of content**
+
+- [Pre-Requisites](#pre-requisites)
+- [Installation](#installation)
+- [Setup](#setup)
+ - [Code Changes](#code-changes)
+ - [Options](#options)
+- [Roadmap](#roadmap)
+ - [How it works](#how-it-works)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Pre-Requisites
+
+For the FullStory-trackjs integration to work, you must have the [FullStory browser SDK package](https://www.npmjs.com/package/@fullstory/browser) and the
+[TrackJS browser SDK package](https://www.npmjs.com/package/trackjs).
+
+## Installation
+
+To install the stable version:
+
+with npm:
+
+```
+npm install --save @bharathvaj/fullstory-trackjs
+```
+
+with yarn:
+
+```
+yarn add @bharathvaj/fullstory-trackjs
+```
+
+## Setup
+
+### Code Changes
+
+To set up the integration, both FullStory and trackjs need to be initialized. Please add the following code:
+
+```js
+import { TrackJS } from 'trackjs';
+import * as FullStory from '@fullstory/browser';
+import TrackJSFullStory from '@bharathvaj/fullstory-trackjs';
+
+FullStory.init({ orgId: '__FULLSTORY_ORG_ID__' });
+
+TrackJS.install({
+ token: '__YOUR_API_KEY__',
+});
+
+TrackJSFullStory.init(TrackJS, options);
+```
+
+Replace `__YOUR_API_KEY__` with the API found in Settings > Project Access Tokens.
+
+You also need to replace `__FULLSTORY_ORG_ID__` with the value of `_fs_org` in the FullStory recording snippet on your
+[FullStory settings page](https://help.fullstory.com/hc/en-us/articles/360020623514).
+
+### Options (Optional)
+
+You can also customize the error event name in FullStory by
+
+```js
+// ...
+TrackJSFullStory.init(TrackJS, {
+ fsEventName: 'Custom Error Name',
+});
+
+//...
+```
+
+# Caveats
+
+Please note that this integration makes use of `onError` hook provided by the TrackJS library. So using this library will override if you have configured
+`onError` while installing the TrackJS library.s
+
+# Roadmap
+
+[ ] - Support trackjs Error link in FullStory Custom Event.
+
+[ ] - Add Unit test cases
+
+## How it works
+
+In Trackjs, you should see additional tab called `FULLSTORY` for the error event which will have `urlAtTime`.
+
+![trackjs](https://i.imgur.com/m0Nu4Yg.png)
+
+In FullStory, you should see an event called `trackjs Error` on the right sidebar.
+
+![FullStory]()

packages/trackjs/package.json

@@ -0,0 +1,39 @@
+{
+ "name": "@bharathvaj/fullstory-trackjs",
+ "description": "Fullstory TrackJS Integration",
+ "version": "0.0.0",
+ "main": "dist/index",
+ "types": "dist/index.d.ts",
+ "files": [
+ "dist"
+ ],
+ "keywords": [
+ "trackjs",
+ "fullstory",
+ "integration"
+ ],
+ "scripts": {
+ "clean": "rimraf -rf ./dist",
+ "build": "yarn clean && tsc -p tsconfig.build.json",
+ "prepublishOnly": "yarn run build",
+ "test": "yarn run build"
+ },
+ "peerDependencies": {
+ "trackjs": ">=2.0.0",
+ "@fullstory/browser": ">=1.0.0"
+ },
+ "devDependencies": {
+ "trackjs": "^2.21.1",
+ "@fullstory/browser": "^1.4.9",
+ "tslib": "^2.2.0"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "author": "Bharathvaj Ganesan <[email protected]>",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/bharathvaj-ganesan/fullstory-integrations/issues"
+ },
+ "homepage": "https://github.com/bharathvaj-ganesan/fullstory-integrations#readme"
+}

packages/trackjs/src/TrackjsFullStory.ts

@@ -0,0 +1,51 @@
+import * as FullStory from '@fullstory/browser';
+import { getOriginalExceptionProperties } from './utils';
+
+/**
+ * This integration creates a link from the Trackjs Error to the FullStory replay.
+ * It also creates a link from the FullStory event to the Trackjs error.
+ */
+
+type Options = {
+ fsEventName: string;
+};
+
+class TrackJSFullStory {
+ static init(client, options?: Options) {
+
+ const fsEventName = options?.fsEventName || 'TrackJS Error';
+ const key = 'fullstoryUrl';
+ const value = FullStory.getCurrentSessionURL(true) || 'current session URL API not ready';
+
+ /**
+ * Returns Trackjs's Error event URL
+ * @returns string 
+ */
+ const getTrackjsUrl = () => `https://my.trackjs.com/metadata?key=${key}&value=${value}`;
+
+ const onError = (payload): boolean => {
+
+ payload.metadata.push({
+ key,
+ value
+ })
+
+ // FS.event is immediately ready even if FullStory isn't fully bootstrapped
+ FullStory.event(fsEventName, {
+ trackjsUrl: getTrackjsUrl(),
+ ...getOriginalExceptionProperties(event)
+ });
+ return true;
+ }
+
+ // Check if TrackJS is installed and configure
+ if (client.isInstalled()) {
+ client.configure({
+ onError
+ })
+ }
+ }
+
+}
+
+export default TrackJSFullStory;

packages/trackjs/src/index.ts

@@ -0,0 +1,3 @@
+import TrackJSFullStory from './TrackJSFullStory';
+
+export default TrackJSFullStory;

packages/trackjs/src/utils.ts

@@ -0,0 +1,22 @@
+/**
+ * Checks if the exception has message
+ * @param exception 
+ * @returns 
+ */
+const isError = (exception: string | Error): exception is Error => {
+ return (exception as Error).message !== undefined;
+};
+
+/**
+ * Get the message and name properties from the original exception
+ * @param {Object} event
+ */
+export const getOriginalExceptionProperties = (event) => {
+ if (event && event.originalError && isError(event.originalError)) {
+ const originalError = event.originalError || {};
+ const { name, message } = originalError;
+ return { name, message };
+ }
+
+ return {};
+};

packages/trackjs/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+ "extends": "../../tsconfig.build.json",
+
+ "compilerOptions": {
+ "outDir": "./dist"
+ },
+
+ "include": [
+ "src/**/*"
+ ]
+}

packages/trackjs/tsconfig.json

@@ -0,0 +1,3 @@
+{
+ "extends": "../../tsconfig.json"
+}

yarn.lock

@@ -5464,6 +5464,11 @@ tr46@^2.0.2:
  dependencies:
  punycode "^2.1.1"
 
+trackjs@^2.21.1:
+ version "3.9.0"
+ resolved "https://registry.yarnpkg.com/trackjs/-/trackjs-3.9.0.tgz#10cae3b854b146802342b79e1b4511a4d45c9c21"
+ integrity sha512-11kVTu0W4QQtRT0Y+bX+HlQkd7kdvYYc4Gtwl/kuB5GWjJfYfYHr+PvczLiSwgcg+CrlX4AU8Ig/LD6PLyXFmw==
+
 traverse-chain@~0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/traverse-chain/-/traverse-chain-0.1.0.tgz#61dbc2d53b69ff6091a12a168fd7d433107e40f1"