Skip to content

Commit 9ede9f0

Browse files
bharathvaj-ganesanbharathvaj-ganesan
authored
Feat/trackjs (#11)
* wip: add base trackjs * wip: cleanup * doc: update integ * doc: update integ * chore: changeset release
1 parent b0a5577 commit 9ede9f0

File tree

10 files changed

+241
-0
lines changed

10 files changed

+241
-0
lines changed

Diff for: ‎.changeset/calm-cooks-refuse.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@bharathvaj/fullstory-trackjs": major
3+
---
4+
5+
Initial Release

Diff for: ‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ _Please note that these are community packages and not official one._
88

99
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
1010
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
11+
1112
**Table of content**
1213

1314
- [Integrations supported](#integrations-supported)
@@ -21,6 +22,7 @@ _Please note that these are community packages and not official one._
2122
| --------------------------- | -------------------------------------------------------------------------- |
2223
| [Bugsnag](packages/bugsnag) | ![Bugsnag](https://img.shields.io/npm/v/@bharathvaj/fullstory-bugsnag.svg) |
2324
| [Rollbar](packages/rollbar) | ![Rollbar](https://img.shields.io/npm/v/@bharathvaj/fullstory-rollbar.svg) |
25+
| [TrackJS](packages/trackjs) | ![TrackJS](https://img.shields.io/npm/v/@bharathvaj/fullstory-trackjs.svg) |
2426

2527
## License
2628

Diff for: ‎packages/trackjs/README.md

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# fullstory-trackjs
2+
3+
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
4+
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
5+
error, you will see a custom error with the basic error details and link to trackjs meta data.
6+
7+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
8+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
9+
10+
**Table of content**
11+
12+
- [Pre-Requisites](#pre-requisites)
13+
- [Installation](#installation)
14+
- [Setup](#setup)
15+
- [Code Changes](#code-changes)
16+
- [Options](#options)
17+
- [Roadmap](#roadmap)
18+
- [How it works](#how-it-works)
19+
20+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
21+
22+
## Pre-Requisites
23+
24+
For the FullStory-trackjs integration to work, you must have the [FullStory browser SDK package](https://www.npmjs.com/package/@fullstory/browser) and the
25+
[TrackJS browser SDK package](https://www.npmjs.com/package/trackjs).
26+
27+
## Installation
28+
29+
To install the stable version:
30+
31+
with npm:
32+
33+
```
34+
npm install --save @bharathvaj/fullstory-trackjs
35+
```
36+
37+
with yarn:
38+
39+
```
40+
yarn add @bharathvaj/fullstory-trackjs
41+
```
42+
43+
## Setup
44+
45+
### Code Changes
46+
47+
To set up the integration, both FullStory and trackjs need to be initialized. Please add the following code:
48+
49+
```js
50+
import { TrackJS } from 'trackjs';
51+
import * as FullStory from '@fullstory/browser';
52+
import TrackJSFullStory from '@bharathvaj/fullstory-trackjs';
53+
54+
FullStory.init({ orgId: '__FULLSTORY_ORG_ID__' });
55+
56+
TrackJS.install({
57+
token: '__YOUR_API_KEY__',
58+
});
59+
60+
TrackJSFullStory.init(TrackJS, options);
61+
```
62+
63+
Replace `__YOUR_API_KEY__` with the API found in Settings > Project Access Tokens.
64+
65+
You also need to replace `__FULLSTORY_ORG_ID__` with the value of `_fs_org` in the FullStory recording snippet on your
66+
[FullStory settings page](https://help.fullstory.com/hc/en-us/articles/360020623514).
67+
68+
### Options (Optional)
69+
70+
You can also customize the error event name in FullStory by
71+
72+
```js
73+
// ...
74+
TrackJSFullStory.init(TrackJS, {
75+
fsEventName: 'Custom Error Name',
76+
});
77+
78+
//...
79+
```
80+
81+
# Caveats
82+
83+
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
84+
`onError` while installing the TrackJS library.s
85+
86+
# Roadmap
87+
88+
[ ] - Support trackjs Error link in FullStory Custom Event.
89+
90+
[ ] - Add Unit test cases
91+
92+
## How it works
93+
94+
In Trackjs, you should see additional tab called `FULLSTORY` for the error event which will have `urlAtTime`.
95+
96+
![trackjs](https://i.imgur.com/m0Nu4Yg.png)
97+
98+
In FullStory, you should see an event called `trackjs Error` on the right sidebar.
99+
100+
![FullStory]()

Diff for: ‎packages/trackjs/package.json

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "@bharathvaj/fullstory-trackjs",
3+
"description": "Fullstory TrackJS Integration",
4+
"version": "0.0.0",
5+
"main": "dist/index",
6+
"types": "dist/index.d.ts",
7+
"files": [
8+
"dist"
9+
],
10+
"keywords": [
11+
"trackjs",
12+
"fullstory",
13+
"integration"
14+
],
15+
"scripts": {
16+
"clean": "rimraf -rf ./dist",
17+
"build": "yarn clean && tsc -p tsconfig.build.json",
18+
"prepublishOnly": "yarn run build",
19+
"test": "yarn run build"
20+
},
21+
"peerDependencies": {
22+
"trackjs": ">=2.0.0",
23+
"@fullstory/browser": ">=1.0.0"
24+
},
25+
"devDependencies": {
26+
"trackjs": "^2.21.1",
27+
"@fullstory/browser": "^1.4.9",
28+
"tslib": "^2.2.0"
29+
},
30+
"publishConfig": {
31+
"access": "public"
32+
},
33+
"author": "Bharathvaj Ganesan <[email protected]>",
34+
"license": "MIT",
35+
"bugs": {
36+
"url": "https://github.com/bharathvaj-ganesan/fullstory-integrations/issues"
37+
},
38+
"homepage": "https://github.com/bharathvaj-ganesan/fullstory-integrations#readme"
39+
}

Diff for: ‎packages/trackjs/src/TrackjsFullStory.ts

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import * as FullStory from '@fullstory/browser';
2+
import { getOriginalExceptionProperties } from './utils';
3+
4+
/**
5+
* This integration creates a link from the Trackjs Error to the FullStory replay.
6+
* It also creates a link from the FullStory event to the Trackjs error.
7+
*/
8+
9+
type Options = {
10+
fsEventName: string;
11+
};
12+
13+
class TrackJSFullStory {
14+
static init(client, options?: Options) {
15+
16+
const fsEventName = options?.fsEventName || 'TrackJS Error';
17+
const key = 'fullstoryUrl';
18+
const value = FullStory.getCurrentSessionURL(true) || 'current session URL API not ready';
19+
20+
/**
21+
* Returns Trackjs's Error event URL
22+
* @returns string
23+
*/
24+
const getTrackjsUrl = () => `https://my.trackjs.com/metadata?key=${key}&value=${value}`;
25+
26+
const onError = (payload): boolean => {
27+
28+
payload.metadata.push({
29+
key,
30+
value
31+
})
32+
33+
// FS.event is immediately ready even if FullStory isn't fully bootstrapped
34+
FullStory.event(fsEventName, {
35+
trackjsUrl: getTrackjsUrl(),
36+
...getOriginalExceptionProperties(event)
37+
});
38+
return true;
39+
}
40+
41+
// Check if TrackJS is installed and configure
42+
if (client.isInstalled()) {
43+
client.configure({
44+
onError
45+
})
46+
}
47+
}
48+
49+
}
50+
51+
export default TrackJSFullStory;

Diff for: ‎packages/trackjs/src/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import TrackJSFullStory from './TrackJSFullStory';
2+
3+
export default TrackJSFullStory;

Diff for: ‎packages/trackjs/src/utils.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Checks if the exception has message
3+
* @param exception
4+
* @returns
5+
*/
6+
const isError = (exception: string | Error): exception is Error => {
7+
return (exception as Error).message !== undefined;
8+
};
9+
10+
/**
11+
* Get the message and name properties from the original exception
12+
* @param {Object} event
13+
*/
14+
export const getOriginalExceptionProperties = (event) => {
15+
if (event && event.originalError && isError(event.originalError)) {
16+
const originalError = event.originalError || {};
17+
const { name, message } = originalError;
18+
return { name, message };
19+
}
20+
21+
return {};
22+
};

Diff for: ‎packages/trackjs/tsconfig.build.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "../../tsconfig.build.json",
3+
4+
"compilerOptions": {
5+
"outDir": "./dist"
6+
},
7+
8+
"include": [
9+
"src/**/*"
10+
]
11+
}

Diff for: ‎packages/trackjs/tsconfig.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "../../tsconfig.json"
3+
}

Diff for: ‎yarn.lock

+5
Original file line numberDiff line numberDiff line change
@@ -5464,6 +5464,11 @@ tr46@^2.0.2:
54645464
dependencies:
54655465
punycode "^2.1.1"
54665466

5467+
trackjs@^2.21.1:
5468+
version "3.9.0"
5469+
resolved "https://registry.yarnpkg.com/trackjs/-/trackjs-3.9.0.tgz#10cae3b854b146802342b79e1b4511a4d45c9c21"
5470+
integrity sha512-11kVTu0W4QQtRT0Y+bX+HlQkd7kdvYYc4Gtwl/kuB5GWjJfYfYHr+PvczLiSwgcg+CrlX4AU8Ig/LD6PLyXFmw==
5471+
54675472
traverse-chain@~0.1.0:
54685473
version "0.1.0"
54695474
resolved "https://registry.yarnpkg.com/traverse-chain/-/traverse-chain-0.1.0.tgz#61dbc2d53b69ff6091a12a168fd7d433107e40f1"

0 commit comments

Comments
 (0)