Feat/raygun (#15)

* wip: raygun setup

* fix: trackjs bug

* fix: raygun custom key

* chore: add release changeset

* chore: change ci/cd option

.changeset/grumpy-actors-provide.md

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

.changeset/simple-grumpy-file.md

@@ -0,0 +1,5 @@
+---
+"@bharathvaj/fullstory-trackjs": minor
+---
+
+Fixes - Current FS url at run time

.github/workflows/publish.yml

@@ -16,6 +16,26 @@ jobs:
  - run: yarn
  - run: yarn build
 
+ release:
+ name: Release
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout Repo
+ uses: actions/checkout@v1
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v1
+ with:
+ node-version: 12
+
+ - name: Install Dependencies
+ run: yarn
+
+ - name: Create Release Pull Request
+ uses: changesets/action@master
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
  publish:
  needs: build
  runs-on: ubuntu-latest
@@ -28,4 +48,4 @@ jobs:
  - run: yarn
  - run: yarn publish-ci
  env:
- NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+ NODE_AUTH_TOKEN: ${{secrets.npm_token}}

README.md

@@ -23,6 +23,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) |
+| [Raygun](packages/raygun) | ![Raygun](https://img.shields.io/npm/v/@bharathvaj/fullstory-raygun.svg) |
 
 ## License
 

packages/raygun/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](https://i.imgur.com/a26RBtf.png)

packages/raygun/package.json

@@ -0,0 +1,39 @@
+{
+ "name": "@bharathvaj/fullstory-raygun",
+ "description": "Fullstory Raygun Integration",
+ "version": "0.0.0",
+ "main": "dist/index",
+ "types": "dist/index.d.ts",
+ "files": [
+ "dist"
+ ],
+ "keywords": [
+ "raygun",
+ "fullstory",
+ "integration"
+ ],
+ "scripts": {
+ "clean": "rimraf -rf ./dist",
+ "build": "yarn clean && tsc -p tsconfig.build.json",
+ "prepublishOnly": "yarn run build",
+ "test": "yarn run build"
+ },
+ "peerDependencies": {
+ "raygun4js": ">=2.0.0",
+ "@fullstory/browser": ">=1.0.0"
+ },
+ "devDependencies": {
+ "raygun4js": "2.22.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/raygun/src/RaygunFullStory.ts

@@ -0,0 +1,38 @@
+import * as FullStory from '@fullstory/browser';
+import { getOriginalExceptionProperties } from './utils';
+
+/**
+ * This integration creates a link from the Raygun Error to the FullStory replay.
+ * It also creates a link from the FullStory event to the Raygun error.
+ */
+
+type Options = {
+ fsEventName: string;
+};
+
+class RaygunFullStory {
+ static init(client, options?: Options) {
+
+ const fsEventName = options?.fsEventName || 'Raygun Error';
+
+ /**
+ * Returns Raygun's Error event URL
+ * @returns string 
+ */
+ const getRaygunUrl = () => `Could not retrieve url`;
+
+ client('withCustomData', () => {
+ // FS.event is immediately ready even if FullStory isn't fully bootstrapped
+ FullStory.event(fsEventName, {
+ raygunUrl: getRaygunUrl(),
+ ...getOriginalExceptionProperties(event)
+ });
+ return {
+ fullstoryUrl: FullStory.getCurrentSessionURL(true) || 'current session URL API not ready'
+ }
+ });
+ }
+
+}
+
+export default RaygunFullStory;

packages/raygun/src/index.ts

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

packages/raygun/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/raygun/tsconfig.build.json

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

packages/raygun/tsconfig.json

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

packages/trackjs/src/TrackJSFullStory.ts

@@ -15,15 +15,16 @@ class TrackJSFullStory {
 
  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 getTrackjsUrl = (value) => `https://my.trackjs.com/metadata?key=${key}&value=${value}`;
 
  const onError = (payload): boolean => {
+ const value = FullStory.getCurrentSessionURL(true) || 'current session URL API not ready';
+ const trackjsUrl = getTrackjsUrl(value);
 
  payload.metadata.push({
  key,
@@ -32,7 +33,7 @@ class TrackJSFullStory {
 
  // FS.event is immediately ready even if FullStory isn't fully bootstrapped
  FullStory.event(fsEventName, {
- trackjsUrl: getTrackjsUrl(),
+ trackjsUrl,
  ...getOriginalExceptionProperties(event)
  });
  return true;

yarn.lock

@@ -4554,6 +4554,11 @@ quick-lru@^4.0.1:
  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+[email protected]:
+ version "2.22.1"
+ resolved "https://registry.yarnpkg.com/raygun4js/-/raygun4js-2.22.1.tgz#a6920309e5730c9a906795e561ea98f5d0b1a0c1"
+ integrity sha512-n9pJdC2llFqof28CEQ7JEy1LvzycQq1SvyK59+M1Merzrl/+iW/1uKvQVMfrpv73OEr19deQM7TB3Ue+m7yIFg==
+
 read-cmd-shim@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz#4a50a71d6f0965364938e9038476f7eede3928d9"