Merge pull request #22 from bharathvaj-ganesan/develop

Feat/airbrake (#21)

.changeset/brown-llamas-rhyme.md

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

.gitignore

@@ -3,3 +3,4 @@ dist
 results
 .nyc_output
 *.tsbuildinfo
+temp

packages/airbrake/README.md

@@ -0,0 +1,96 @@
+# fullstory-airbrake
+
+The FullStory-Airbrake integration seamlessly integrates the FullStorys and Airbrake platforms. When you look at a browser error in Airbrake, you will see a
+link to the FullStory session replay at that exact moment in time. When you are watching a FullStory replay and your user experiences an error, you will see a
+custom error with the basic error details.
+
+<!-- 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-Airbrake integration to work, you must have the [FullStory browser SDK package](https://www.npmjs.com/package/@fullstory/browser) and the
+[Airbrake browser SDK package](https://github.com/airbrake/airbrake-js/tree/master/packages/browser).
+
+## Installation
+
+To install the stable version:
+
+with npm:
+
+```
+npm install --save @bharathvaj/fullstory-airbrake
+```
+
+with yarn:
+
+```
+yarn add @bharathvaj/fullstory-airbrake
+```
+
+## Setup
+
+### Code Changes
+
+To set up the integration, both FullStory and Airbrake need to be initialized. Please add the following code:
+
+```js
+import { Notifier } from '@airbrake/browser';
+import * as FullStory from '@fullstory/browser';
+import AirbrakeFullStory from '@bharathvaj/fullstory-airbrake';
+
+FullStory.init({ orgId: '__FULLSTORY_ORG_ID__' });
+
+const airbrakeNotifier = new Notifier({
+ projectId: __YOUR_PROJECT_ID__,
+ projectKey: __YOUR_API_KEY__,
+ environment: 'production',
+});
+
+AirbrakeFullStory.init(airbrakeNotifier, options);
+```
+
+Replace `__YOUR_API_KEY__` and `__YOUR_PROJECT_ID__` with your site credentials.
+
+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
+
+You can also customize the error event name in FullStory by
+
+```js
+// ...
+// ...
+AirbrakeFullStory.init(airbrakeNotifier, {
+ fsEventName: 'Custom Error Name',
+});
+
+//...
+```
+
+# Roadmap
+
+[ ] - Add Unit test cases
+
+## How it works
+
+In Airbrake, you should see the `fullstoryUrl` in the context tab under occurences of an Error.
+
+![Airbrake](https://i.imgur.com/bwMMLFA.png)
+
+In FullStory, you should see an event called `Airbrake Error` on the right sidebar along with the Airbrake'e error URL.
+
+![FullStory](https://i.imgur.com/emqBOm3.png)

packages/airbrake/package.json

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

@@ -0,0 +1,43 @@
+import * as FullStory from '@fullstory/browser';
+import { getOriginalExceptionProperties } from './utils';
+
+/**
+ * This integration creates a link from the Airbrake Error to the FullStory replay.
+ * It also creates a link from the FullStory event to the Airbrake error.
+ */
+
+type Options = {
+ fsEventName: string;
+};
+
+class AirbrakeFullStory {
+ static init(client, options?: Options) {
+ let fsEventName = options?.fsEventName || 'Airbrake Error';
+
+ const originalNotify = client.notify;
+
+ client.notify = (...args) => {
+
+ // Add fullstory link to Airbrake
+ client.addFilter((notice) => {
+ notice.context.fullstoryUrl = FullStory.getCurrentSessionURL(true) || 'current session URL API not ready';
+ return notice;
+ });
+
+ return originalNotify.call(client, ...args).then(result => {
+ if (result) {
+ // Sending to FullStory
+ FullStory.event(fsEventName, {
+ airbrakeUrl: result.url || 'Could not retrieve url',
+ ...getOriginalExceptionProperties(result.errors[0])
+ });
+ }
+
+ return result;
+ })
+ }
+ }
+
+}
+
+export default AirbrakeFullStory;

packages/airbrake/src/index.ts

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

packages/airbrake/src/utils.ts

@@ -0,0 +1,21 @@
+/**
+ * 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} error
+ */
+export const getOriginalExceptionProperties = (error: any) => {
+ if (error && error.message && isError(error)) {
+ const { name, message } = error;
+ return { name, message };
+ }
+
+ return {};
+};