generated from NiGhTTraX/ts-monorepo
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add airbrake support * fix: clean up names * doc: update readme * chore version * chore: add changset Co-authored-by: Bharathvaj Ganesan <[email protected]>
- Loading branch information
1 parent
8840634
commit 471ac0b
Showing
11 changed files
with
466 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@bharathvaj/fullstory-airbrake": major | ||
--- | ||
|
||
Initial Release |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,3 +3,4 @@ dist | |
results | ||
.nyc_output | ||
*.tsbuildinfo | ||
temp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import AirbrakeFullStory from './AirbrakeFullStory'; | ||
|
||
export default AirbrakeFullStory; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 {}; | ||
}; |
Oops, something went wrong.