docs: jam embedded + integrations
This commit is contained in:
Nikolay Iliev
Родитель
145ad5d5f9
Коммит
d52446a0b9
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 47 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 51 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 50 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 19 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 16 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 36 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 43 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 12 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 35 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 36 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 19 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 16 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 54 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 58 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 50 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 45 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 52 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 18 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 16 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 27 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 28 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 60 KiB |
|
|
@ -14,9 +14,9 @@ To address such scenarios, Fiddler Jam logs are fully compatible with [Fiddler E
|
|||
|
||||
A log created by Fiddler Jam contains [additional information like screenshots and developer console logs]({%slug fj-capture-options%})). However, these options are not part of the HAR file specification, so when you save a log as a file or open a log in Fiddler Everywhere, these options won't be available.
|
||||
|
||||
## Opening Logs in the Portal
|
||||
## Opening Jam Logs in Fiddler Everywhere
|
||||
|
||||
Engineers can directly open any log submitted to the Fiddler Jam Portal in Fiddler Everywhere. Each captured HTTP or HTTPS session has a unique **ID** line that can be used as a reference in both the Fiddler Jam Portal and the Fiddler Everywhere desktop application.
|
||||
Engineers can directly open any log submitted to the Fiddler Jam Portal in the Fiddler Everywhere standalone application. Each captured HTTP or HTTPS session has a unique **ID** line that can be used as a reference in both the Fiddler Jam Portal and the Fiddler Everywhere desktop application.
|
||||
|
||||
1. Install Fiddler Everywhere and make it the default tool for opening HAR files.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,244 @@
|
|||
---
|
||||
title: Third-Party Integrations
|
||||
description: "Learn seamlessly integrate your Jam portal logs into third-party systems like Jira, GitHub, and Trello."
|
||||
slug: fj-integrations
|
||||
publish: false
|
||||
position: 55
|
||||
---
|
||||
|
||||
# Third-party Integrations
|
||||
|
||||
All Jam logs added to a portal workspace can be linked to third-party tracking solutions. Currently, the Jam portal supports integrations with the following services:
|
||||
|
||||
- [GitHub](https://github.com/) issues.
|
||||
|
||||
- [Jira](https://www.atlassian.com/software/jira) projects.
|
||||
|
||||
- [Trello](https://trello.com/en) boards.
|
||||
|
||||
|
||||
Note that you can link only logs that are part of portal **workspace**.
|
||||
|
||||
|
||||
## Linking a Log to GitHub Issues
|
||||
|
||||
### Link to New GitHub Issue
|
||||
|
||||
To link a Jam log to a new GitHub issue:
|
||||
|
||||
- Use the integration button from the main log menu (top-right corner) to link a log to a selected third-party tracking solution.
|
||||
|
||||
_Integration options from the main log menu_
|
||||
|
||||
|
||||
|
||||
- Select and press the **GitHub** option. You might be asked for authorization (for the initial time GitHub integrations is used).
|
||||
|
||||
- Choose **Create Issue** tab to create an entirely new GitHub issue.
|
||||
|
||||
* Select the GitHub project where the issue will reside.
|
||||
* Add a summary (corresponds to GitHub issue title)
|
||||
* Add a description (corresponds to GitHub issue comment). The description contains a quick link to the Fiddler Jam log by default.
|
||||
|
||||
_Create new GitHub issue_
|
||||
|
||||
|
||||
|
||||
- Click the **Create** button to finalize the GitHub issue creation.
|
||||
|
||||
The newly created GitHub issue is immediately accessible.
|
||||
|
||||
_example for newly created GitHub issue_
|
||||
|
||||
|
||||
|
||||
### Add to Existing GitHub Issue
|
||||
|
||||
To add a Jam log and comment to an existing GitHub issue:
|
||||
|
||||
- Use the integration button from the main log menu (top-right corner) to link a log to a selected third-party tracking solution.
|
||||
|
||||
_Integration options from the main log menu_
|
||||
|
||||
|
||||
|
||||
- Select and press the **GitHub** option. You might be asked for authorization (for the initial time GitHub integration is used)
|
||||
|
||||
- Choose **Add to Existing Issue** tab to add a comment to an already existing GitHub issue.
|
||||
|
||||
* Select the GitHub project where the issue resides.
|
||||
* Select a GitHub issue from the drop-down.
|
||||
* Add a comment (corresponds to a new GitHub issue comment). The comment contains a quick link to the Fiddler Jam log by default.
|
||||
|
||||
_Add to Existing Issue option_
|
||||
|
||||
|
||||
|
||||
- Click the **Update** button to add the new comment to the existing GitHub issue.
|
||||
|
||||
The updated GitHub issue is immediately accessible.
|
||||
|
||||
_example for updated GitHub issue_
|
||||
|
||||
|
||||
|
||||
|
||||
### Linked Log GitHub Options
|
||||
|
||||
A portal log can be linked only to a single tracking system. Once a log is linked, use the integration button from the main log menu (top-right corner) for a quick link to the GitHub issue (through the **Open in GitHub** option) or to unlink the log (through the **Unlink log from GitHub** option). Note that unlinking a log won't change the GitHub issue.
|
||||
|
||||
_Linked Log options_
|
||||
|
||||
|
||||
|
||||
|
||||
### Link to New Jira Issue
|
||||
|
||||
To link a Jam log to a new Jira issue:
|
||||
|
||||
- Use the integration button from the main log menu (top-right corner) to link a log to the selected third-party tracking solution.
|
||||
|
||||
_Integration options from the main log menu_
|
||||
|
||||
|
||||
|
||||
- Select and press the **JIRA** option. You might be asked for authorization (for the initial time when the Jira integrations is used).
|
||||
|
||||
- Choose **Create Issue** tab to create an entirely new Jira issue.
|
||||
|
||||
* Select the Jira project where the issue will reside.
|
||||
* Select the Jira issue type from the drop-down menu (select **Task**, **Bug**, **Story**, or other project issue types).
|
||||
* Add a summary (corresponds to Jira issue title)
|
||||
* Add a description (corresponds to Jira issue description). The description contains a quick link to the Fiddler Jam log by default.
|
||||
|
||||
_Create new Jira issue_
|
||||
|
||||
|
||||
|
||||
- Click the **Create** button to finalize the Jira issue creation.
|
||||
|
||||
The newly created Jira issue is immediately accessible.
|
||||
|
||||
_Excample for newly created Jira issue_
|
||||
|
||||
|
||||
|
||||
|
||||
### Add to Existing Jira Issue
|
||||
|
||||
To add a Jam log and comment to an existing Jira issue:
|
||||
|
||||
- Use the integration button from the main log menu (top-right corner) to link a log to the selected third-party tracking solution.
|
||||
|
||||
_Integration options from the main log menu_
|
||||
|
||||
|
||||
|
||||
- Select and press the **JIRA** option. You might be asked for authorization (for the initial time Jira integration is used)
|
||||
|
||||
- Choose **Add to Existing Issue** tab to add a comment to an already existing Jira issue.
|
||||
|
||||
* Select the Jira project where the issue resides.
|
||||
* Select a Jira issue from the drop-down.
|
||||
* Add a comment (corresponds to a new Jira issue comment). The comment contains a quick link to the Fiddler Jam log by default.
|
||||
|
||||
_Add to Existing Issue_
|
||||
|
||||
|
||||
|
||||
- Click the **Update** button to add the new comment to the existing Jira issue.
|
||||
|
||||
The updated Jira issue is immediately accessible.
|
||||
|
||||
_Example for updated Jira issue_
|
||||
|
||||
|
||||
|
||||
### Linked Log Jira Options
|
||||
|
||||
A portal log can be linked only to a single tracking system. Once a log is linked, use the integration button from the main log menu (top-right corner) for a quick link to the Jira issue (through the **Open in Jira** option) or to unlink the log (through the **Unlink log from Jira** option). Note that unlinking a log won't change the existing Jira issue.
|
||||
|
||||
_Linked Log options_
|
||||
|
||||
|
||||
|
||||
|
||||
## Linking a Log to Trello
|
||||
|
||||
### Link to New Trello task
|
||||
|
||||
To link a Jam log to a new Trello task:
|
||||
|
||||
- Use the integration button from the main log menu (top-right corner) to link a log to the selected third-party tracking solution.
|
||||
|
||||
_Integration options from the main log menu_
|
||||
|
||||
|
||||
|
||||
- Select and press the **Trello** option. You might be asked for authorization (for the initial time when the Trello integration is used).
|
||||
|
||||
- Choose **Create Issue** tab to create an entirely new Trello task.
|
||||
|
||||
* Select the project (corresponds to Trello board) where the task will reside.
|
||||
* Select the Trello list type from the drop-down menu (for example, **ToDo**, **Doing**, **Done**, or other board list types).
|
||||
* Add a summary (corresponds to Trello task title)
|
||||
* Add a description (corresponds to Trello task description). The description contains a quick link to the Fiddler Jam log by default.
|
||||
|
||||
_Create new Trello task_
|
||||
|
||||
|
||||
|
||||
- Click the **Create** button to finalize the Trello task creation.
|
||||
|
||||
The newly created Trello issue is immediately accessible.
|
||||
|
||||
_Example for created Trello task_
|
||||
|
||||
|
||||
|
||||
|
||||
### Add to Existing Trello Task
|
||||
|
||||
To add a Jam log and comment to an existing Trello task:
|
||||
|
||||
- Use the integration button from the main log menu (top-right corner) to link a log to the selected third-party tracking solution.
|
||||
|
||||
_Integration options from the main log menu_
|
||||
|
||||
|
||||
|
||||
- Select and press the **Trello** option. You might be asked for authorization (for the initial time Trello integration is used)
|
||||
|
||||
- Choose **Add to Existing Issue** tab to add a comment to an already existing Trello task.
|
||||
|
||||
* Select the project (corresponds to Trello board) where the task resides.
|
||||
* Select the existing Trello task from the drop-down.
|
||||
* Add a comment (corresponds to a new Trello task comment). The comment contains a quick link to the Fiddler Jam log by default.
|
||||
|
||||
_Add to Existing Issue_
|
||||
|
||||
|
||||
|
||||
- Click the **Update** button to add the new comment to the existing Trello task.
|
||||
|
||||
The updated Trello task is immediately accessible.
|
||||
|
||||
_Updated Trello task result_
|
||||
|
||||
|
||||
|
||||
### Linked Log Trello Options
|
||||
|
||||
A portal log can be linked only to a single tracking system. Once a log is linked, use the integration button from the main log menu (top-right corner) for a quick link to the Trello task (through the **Open in Trello** option) or to unlink the log (through the **Unlink log from Trello** option). Note that unlinking a log won't change the existing Trello task.
|
||||
|
||||
_Linked Log options_
|
||||
|
||||
|
||||
|
||||
## Signing Out
|
||||
|
||||
Once an integration service is authorized, Fiddler jam will keep you logged in. You can explicitly sign our from selected service through the **Integration** section in the user's settings menu (the user icon on the top-right corner of the Fiddler Jam portal).
|
||||
|
||||
_Integrations settings_
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
---
|
||||
title: Jam Embedded API
|
||||
description: "Learn how to use the Fiddler Jam API to embed the log service into your webpage."
|
||||
slug: fj-embed-api
|
||||
publish: false
|
||||
position: 56
|
||||
---
|
||||
|
||||
# Fiddler Jam Embedded
|
||||
|
||||
Fiddler Jam provides an API to integrate the capturing and sharing functionalities into your page while using your UI. The following requirements are needed to utilize the Fiddler Jam API:
|
||||
|
||||
1. Import the Fiddler Jam API script into your HTML page from the following CDN link: https://downloads.getfiddler.be/jam-embedded/fiddler-jam-embedded.js
|
||||
|
||||
2. Initialize the Fiddler Jam Embedded object with your unique API key. The Fiddler Jam Embedded object is attached to the page's [`window`](https://www.w3schools.com/jsref/obj_window.asp) object as a property called `_fiddlerJamEmbedded`.
|
||||
|
||||
```JavaScript
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
|
||||
<title>Fiddler Jam Embedded</title>
|
||||
<script src="https://downloads.getfiddler.be/jam-embedded/fiddler-jam-embedded.js"></script>
|
||||
<script>
|
||||
const jam = window._fiddlerJamEmbedded;
|
||||
jam.init({
|
||||
apiKey: '<your-unique-fiddler-jam-api-key-here>'
|
||||
});
|
||||
// .. custom implementation follows here
|
||||
</script>
|
||||
</head>
|
||||
</html>
|
||||
```
|
||||
|
||||
>tip Contact us at support@getfiddler.com for more information about obtaining a unique APi key for your organization and workspace.
|
||||
|
||||
3. Create a file called _service-worker.js_ and import the service worker script from the following CDN link: https://downloads.getfiddler.be/jam-embedded/fje-service-worker.js
|
||||
|
||||
By default, the _service-worker.js_ file is expected to be on the same level as the HTML page that contains the _fiddler-jam-embedded.js_ CDN script. You can the default path of the worker file through the `InitOptions` object and its `serviceWorkerPath` property. Below you can find an example for importing the service worker from the Fiddler CDN.
|
||||
```JavaScript
|
||||
self.importScripts(`https://downloads.getfiddler.be/jam-embedded/fje-service-worker.js`);
|
||||
```
|
||||
|
||||
## Fiddler Jam API
|
||||
|
||||
`_fiddlerJamEmbedded` - The Fiddler Jam Embedded object is attached to [the DOM `window` object](https://www.w3schools.com/jsref/obj_window.asp) (you need to import the _\_fiddler-jam-embedded.js_ from the CDN). The Fiddler Jam Embedded object has the following properties and methods.
|
||||
|
||||
### Properties
|
||||
|
||||
|
||||
| Property Name | Type | Description |
|
||||
| --------------- | ------------ | ------------ |
|
||||
| `state` | `CaptureState` | Indicates the current process state (enumaration with the following string values : "ready", "initialized", "starting", "started", "sharing", "shared") |
|
||||
| `serviceWorkerPath` | string | Indicates the path to the service-worker.js file. When omitted, the default file location is _./service-worker.js_) |
|
||||
| `options` | `StartOptions` | An object used during the Fiddler Jam Embedded startup. Indicates which capturing options should be turned on (default values: captureScreenshots = true, captureConsole = true, captureStorage = true, captureVideo = true, openNewTab = true, reloadPage = false) |
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
| Method Name | Execution Type | Accepted Arguments | Description |
|
||||
| --------------- | ---------- | ------------ | ----------- |
|
||||
| `init(options:InitOptions)`| | `InitOptions` of type { apiKey: string, serviceWorkerPath?:string; } | Initialize the Fiddler Jam Embedded process with an unique API key throught the `apiKey` argument. The `serviceWorkerPath` is not mandatory argument and if omitted will default to _./service-worker.js_ |
|
||||
| `start(options:StartOptions)` | async | `StartOptions` of type { captureVideo: boolean, captureScreenshots: boolean, captureStorage: boolean, captureConsole: boolean, reloadPage: boolean } | Asynchonious method that starts the capturing with the explicitly actived start options. |
|
||||
| `stop()` | async |n/a | Asynchonious method that stops the capturing and sets the state property to "stopped". |
|
||||
| `share( )` | async | n/a | Asynchonious method that returns a string with the generated Fiddler Jam Log share URL. The generated log is automatically added to the default organizational workspace. |
|
||||
| `reset()` | | n/a | Stops and completely resets the capturing, its state, and its properties. |
|
||||
| `addStateChangedEventListener()` | | n/a | An event listener to detect changes in the `state` property of the Fiddler Jam Embedded object. |
|
||||
|
||||
|
||||
|
||||
### Basic Example
|
||||
|
||||
The below code snippets demonstrate a basic Fiddler Jam Embedded implementation that you can run through a test localhost server.
|
||||
|
||||
If no file path is provided through the `serviceWorkerPath` argument then the _service-worker.js_ file must be on the same level as the _index.html_ file below.
|
||||
```JavaScript
|
||||
self.importScripts(`https://downloads.getfiddler.be/jam-embedded/fiddler-jam-embedded.js`);
|
||||
```
|
||||
|
||||
Sample _index.html_ page. Note that you will have to replace `<your-unique-fiddler-jam-api-key-here>` with your actual Fiddler Jam Embedded API key.
|
||||
```HTML
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
|
||||
<title>Fiddler Jam Embedded</title>
|
||||
<script src="https://downloads.getfiddler.be/jam-embedded/fiddler-jam-embedded.js"></script>
|
||||
<script>
|
||||
// the Fiddler Jam Embedded object attached to the DOM window object through _fiddlerJamEmbedded
|
||||
const jam = window._fiddlerJamEmbedded;
|
||||
|
||||
// Initialization of the Jam Embedded process.
|
||||
// Additionally the serviceWorkerPath can be passed with an alternative worker path.
|
||||
jam.init({
|
||||
apiKey: '<your-unique-fiddler-jam-api-key-here>'
|
||||
});
|
||||
let captureInfo = '';
|
||||
|
||||
// Setting default capture options
|
||||
let captureOptions = {
|
||||
captureVideo: true,
|
||||
captureScreenshots: true,
|
||||
captureStorage: true,
|
||||
captureConsole: true,
|
||||
reloadPage: true
|
||||
};
|
||||
|
||||
function getCaptureInfo(jamState) {
|
||||
switch (jamState) {
|
||||
case 'ready':
|
||||
case 'initialized':
|
||||
return 'Ready to capture..';
|
||||
case 'starting':
|
||||
return 'Starting..';
|
||||
case 'started':
|
||||
return 'Started..';
|
||||
case 'stopped':
|
||||
return 'Stopped..';
|
||||
case 'sharing':
|
||||
return 'Sharing..';
|
||||
case 'shared':
|
||||
return 'Sharing complete! Jam Session Url copied to clipboard.';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function updateCaptureInfo() {
|
||||
captureInfo = getCaptureInfo(jam.state);
|
||||
document.getElementById('capture-info').innerHTML = captureInfo;
|
||||
if (jam.options) {
|
||||
captureOptions = jam.options;
|
||||
}
|
||||
document.getElementById('captureVideo').checked = captureOptions.captureVideo;
|
||||
document.getElementById('captureScreenshots').checked = captureOptions.captureScreenshots;
|
||||
document.getElementById('captureStorage').checked = captureOptions.captureStorage;
|
||||
document.getElementById('captureLogs').checked = captureOptions.captureConsole;
|
||||
}
|
||||
|
||||
function initSettingsEvents() {
|
||||
document.getElementById('captureVideo').addEventListener('change', (e) => {
|
||||
captureOptions.captureVideo = e.target.checked;
|
||||
});
|
||||
document.getElementById('captureScreenshots').addEventListener('change', (e) => {
|
||||
captureOptions.captureScreenshots = e.target.checked;
|
||||
});
|
||||
document.getElementById('captureStorage').addEventListener('change', (e) => {
|
||||
captureOptions.captureStorage = e.target.checked;
|
||||
});
|
||||
document.getElementById('captureLogs').addEventListener('change', (e) => {
|
||||
captureOptions.captureConsole = e.target.checked;
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
updateCaptureInfo();
|
||||
jam.addStateChangedEventListener(newState => {
|
||||
updateCaptureInfo();
|
||||
});
|
||||
initSettingsEvents();
|
||||
});
|
||||
|
||||
// Start capturing (async method)
|
||||
async function start() {
|
||||
await jam.start(captureOptions);
|
||||
}
|
||||
|
||||
// Stop capturing (async method)
|
||||
async function stop() {
|
||||
await jam.stop();
|
||||
}
|
||||
|
||||
// Generaring a Fiddler Jam log share URL (async method).
|
||||
// The logs are automatically added to the default organizational workspace in the Fiddler Jam portal.
|
||||
async function share() {
|
||||
const jamShareUrl = await jam.share();
|
||||
document.getElementById('jam-share-url').innerHTML = jamShareUrl;
|
||||
await navigator.clipboard.writeText(jamShareUrl);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Fiddler Jam Embedded</h1>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<input type="checkbox" id="captureVideo" name="captureVideo" />
|
||||
<label for="captureVideo">Capture Video</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="captureScreenshots" name="captureScreenshots" />
|
||||
<label for="captureScreenshots">Capture Screenshots</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="captureStorage" name="captureStorage" />
|
||||
<label for="captureStorage">Capture Storage</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="captureLogs" name="captureLogs" />
|
||||
<label for="captureLogs">Capture Logs</label>
|
||||
</div>
|
||||
</div><br/>
|
||||
<div>
|
||||
<button onclick="start()">Start Capture</button>
|
||||
<button onclick="stop()">Stop Capture</button>
|
||||
<button onclick="share()">Share</button>
|
||||
</div>
|
||||
<div id="capture-info"></div>
|
||||
<div id="jam-share-url"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
Загрузка…
Ссылка в новой задаче