Noibu Implementing Noibu for Your Mobile App

https://help.noibu.com/hc/en-us/articles/
Admin
This guide details the steps for implementing Noibu's mobile monitoring capabilities for React...
Tokens:110,621
Snippets:980
Trust Score:8.8
Update:8 months ago
Show doc for...
Tokens:
Raw
### Noibu Vue SDK Installation

Source: https://help.noibu.com/hc/en-us/articles/9565275187341

Instructions for installing the Noibu Vue SDK using NPM or Yarn.

```APIDOC
## Installation

### NPM
```
npm install noibu-vue
```

### Yarn
```
yarn install noibu-vue
```
```

--------------------------------

### Install Noibu React SDK using NPM

Source: https://help.noibu.com/hc/en-us/articles/9562254753677-Noibu-React-SDK

This command installs the Noibu React SDK using the Node Package Manager (NPM). Ensure you have Node.js and NPM installed on your system.

```bash
npm install noibu-react
```

--------------------------------

### Install Noibu React SDK using Yarn

Source: https://help.noibu.com/hc/en-us/articles/9562254753677-Noibu-React-SDK

This command installs the Noibu React SDK using the Yarn package manager. Yarn is an alternative to NPM for managing JavaScript dependencies.

```bash
yarn install noibu-react
```

--------------------------------

### Noibu Vue SDK Usage

Source: https://help.noibu.com/hc/en-us/articles/9565275187341

Guides on importing and initializing the Noibu Vue SDK, including basic usage and error handler integration.

```APIDOC
## Usage

### Import
```javascript
import * as Noibu from 'noibu-vue';
```

### Basic Usage
This example demonstrates how to import the Noibu Vue SDK and set up the error listener.

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import * as Noibu from 'noibu-vue';
import './assets/main.css';

const app = createApp(App);
app.use(router);
app.mount('#app');

// existing handler
app.config.errorHandler = (_err) => {
  console.log('existing error handler');
};

// The Noibu handler gets initialized and will
// call the original handler as well.
Noibu.initNoibuSDK({ apps: [app] });
```

### Notes
*   The Noibu SDK throws an error when trying to initialize the SDK without either the `vue` param or the `apps` param.
*   If you have already created an `errorhandler` in your Vue application, make sure to initialize the Noibu SDK after the declaration of the `errorHandler` function.
```

--------------------------------

### Install Noibu Vue SDK using NPM

Source: https://help.noibu.com/hc/en-us/articles/9565275187341-Noibu-Vue-SDK

Installs the Noibu Vue SDK package using the Node Package Manager (NPM). This is the first step to integrating the SDK into your Vue.js application.

```bash
npm install noibu-vue
```

--------------------------------

### Generate Help Code on Button Click (HTML & JavaScript)

Source: https://help.noibu.com/hc/en-us/articles/25222130557709-Programmatic-Methods-for-Generating-Help-Codes

This example shows how to generate a Help Code when a user clicks a button. It requires a button element and a div to display the result. The `requestHelpCode` function is called within the button's click event listener, and the `alertUser` parameter is set to false.

```html
<html>
    <head>
        <script src="index.js" defer></script>
    </head>
    <body>
        <button id="request-help-code">Get a help code</button>
        <div id="help-code-result"></div>
    </body>
</html>
```

```javascript
window.addEventListener("noibuSDKReady", () => {
    let button = document.getElementById("request-help-code");
    let label = document.getElementById("help-code-result");
    button.addEventListener("click", async () => {
        let helpCode = await window.NOIBUJS.requestHelpCode(false); // do not present an alert with a help code
        label.innerText = helpCode;
    });
});
```

--------------------------------

### Debugging Jira Integration - Get Projects API Call

Source: https://help.noibu.com/hc/en-us/articles/360059765671

Steps to debug Jira integration issues, specifically by verifying credentials using a cURL request to the Jira API to get projects.

```APIDOC
## Debugging Jira Integration

If your credentials are not working in Noibu, verify them manually using the following steps:

1.  **Generate Basic Auth Header:**
    Encode your Jira email and API token in Base64 format.
    ```bash
    echo -n "(user email):(api token)" | base64
    ```

2.  **Attempt to Get Projects:**
    Use cURL to make a GET request to the Jira API for projects, including the generated Basic Auth header.
    ```bash
    curl -X GET "https://(jira domain)/rest/api/3/project" -H "Authorization: Basic (base64 encoded value from step 1)"
    ```

    **Example (Linux/macOS):**
    ```bash
    echo -n "jira@noibu.com:EcWu2xxxxxxxx" | base64
    # Output: amlyYUBub2lidS5jb206RWNXdTJ4eHh4eHh4eA==

    curl -X GET "https://noibu.atlassian.net/rest/api/3/project" -H "Authorization: Basic amlyYUBub2lidS5jb206RWNXdTJ4eHh4eHh4eA=="
    ```

    **Example (Windows PowerShell):**
    ```powershell
    # >>> REPLACE THESE <<< 
    $email = "you@example.com"
    $apiToken = "YOUR_API_TOKEN_HERE"

    # Build basic auth header: base64("email:apitoken")
    $pair = "$email`:$apiToken"
    $bytes = [Text.Encoding]::UTF8.GetBytes($pair)
    $auth  = [Convert]::ToBase64String($bytes)

    $headers = @{
        Authorization = "Basic $auth"
        Accept        = "application/json"
    }

    Invoke-RestMethod -Uri "https://(jira domain)/rest/api/3/project" -Method Get -Headers $headers
    ```

If this request is successful, it returns a list of projects, confirming your credentials and API access are valid.
```

--------------------------------

### Install Noibu Vue SDK using Yarn

Source: https://help.noibu.com/hc/en-us/articles/9565275187341-Noibu-Vue-SDK

Installs the Noibu Vue SDK package using the Yarn package manager. This is an alternative to NPM for integrating the SDK into your Vue.js application.

```bash
yarn install noibu-vue
```

--------------------------------

### Basic Usage of Noibu Vue SDK

Source: https://help.noibu.com/hc/en-us/articles/9565275187341-Noibu-Vue-SDK

Demonstrates the basic integration of the Noibu Vue SDK into a Vue 3 application. It initializes the SDK after setting up the Vue app and its error handler, ensuring that errors are captured by Noibu.

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import * as Noibu from 'noibu-vue';
import './assets/main.css';

const app = createApp(App);
app.use(router);
app.mount('#app');

// existing handler
app.config.errorHandler = (_err) => {
console.log('existing error handler');
};

// The Noibu handler gets initialized and will
// call the original handler as well.
Noibu.initNoibuSDK({ apps: [app] });
```

--------------------------------

### GET /rest/api/3/project/search

Source: https://help.noibu.com/hc/en-us/articles/360059765671

This endpoint allows you to search for Jira projects. It returns a list of projects visible to the authenticated user.

```APIDOC
## GET /rest/api/3/project/search

### Description
Searches for Jira projects accessible by the current user. The response includes project details such as ID, key, and name.

### Method
GET

### Endpoint
https://your-jira-domain.atlassian.net/rest/api/3/project/search

### Parameters
#### Query Parameters
- **startAt** (integer) - Optional - The index of the first project to return in the response.
- **maxResults** (integer) - Optional - The maximum number of projects to return per page.
- **query** (string) - Optional - A free-text search query for the project name or key.
- **typeKey** (string) - Optional - Filters projects by project type.
- **level** (string) - Optional - Filters projects by project category.

### Request Example
```powershell
$uri = "https://your-jira-domain.atlassian.net/rest/api/3/project/search"
$headers = @{
    "Authorization" = "Basic YOUR_BASE64_ENCODED_CREDENTIALS"
}

$response = Invoke-RestMethod -Uri $uri -Headers $headers -Method Get

$response.values | Select-Object id, key, name | Format-Table
```

### Response
#### Success Response (200)
- **isLast** (boolean) - Indicates if this is the last page of results.
- **maxResults** (integer) - The maximum number of results to return.
- **startAt** (integer) - The starting index of the current page.
- **total** (integer) - The total number of projects matching the search criteria.
- **values** (array) - An array of project objects, each containing:
    - **id** (string) - The unique identifier for the project.
    - **key** (string) - The project key.
    - **name** (string) - The name of the project.

#### Response Example
```json
{
  "isLast": false,
  "maxResults": 50,
  "startAt": 0,
  "total": 100,
  "values": [
    {
      "id": "10001",
      "key": "PROJ",
      "name": "Example Project"
    }
  ]
}
```

#### Error Response (401)
- **errorMessages** (array) - A list of error messages.
- **errors** (object) - A map of field errors.

#### Error Response Example (401)
```json
{
  "errorMessages": [
    "Authentication failed."
  ],
  "errors": {}
}
```
```

--------------------------------

### initNoibuSDK Function

Source: https://help.noibu.com/hc/en-us/articles/9565275187341

Documentation for the `initNoibuSDK` function, which initializes the Noibu Vue SDK with specified options.

```APIDOC
## Exported Functions

### initNoibuSDK

```typescript
/** Option passed when initializing the vue sdk * */
export interface SDKOptions {
  /** Vue constructor to be used inside the integration
   * (as imported by `import Vue from 'vue'` in Vue2)
   */
  Vue?: Vue;
  /** Vue app instances to be used inside the integration
   * (as generated by `createApp` in Vue3 )
   */
  apps?: Vue[];
}
/**
* Inits the Noibu Vue SDK
* @param {SDKOptions} sdkOptions
* @returns void
*/
function initNoibuSDK(sdkOptions: SDKOptions): void {
  //...
}
```

**Parameters:**
*   **sdkOptions** (SDKOptions) - Required - Options for initializing the SDK, including `Vue` or `apps`.
```

--------------------------------

### GET /rest/api/3/project/search

Source: https://help.noibu.com/hc/en-us/articles/360059765671-Jira-Integration-for-Noibu

Retrieves a list of projects visible to the authenticated user. The response includes project details such as ID, key, and name.

```APIDOC
## GET /rest/api/3/project/search

### Description
Retrieves a list of projects visible to the authenticated user. The response includes project details such as ID, key, and name.

### Method
GET

### Endpoint
https://your-jira-domain.atlassian.net/rest/api/3/project/search

### Parameters
#### Query Parameters
- **startAt** (integer) - Optional - The index of the first project to return in the response.
- **maxResults** (integer) - Optional - The maximum number of projects to return per page.
- **query** (string) - Optional - A string to search projects by name or key.
- **includeUnavailable** (boolean) - Optional - Whether to include unavailable projects.

### Request Example
```powershell
$uri = "https://your-jira-domain.atlassian.net/rest/api/3/project/search"
$headers = @{
    "Authorization" = "Basic YOUR_BASE64_ENCODED_CREDENTIALS"
}

$response = Invoke-RestMethod -Uri $uri -Headers $headers -Method Get

$response.values | Select-Object id, key, name | Format-Table
```

### Response
#### Success Response (200)
- **isLast** (boolean) - Indicates if this is the last page of results.
- **maxResults** (integer) - The maximum number of results to return.
- **startAt** (integer) - The starting index of the results.
- **total** (integer) - The total number of projects available.
- **values** (array) - An array of project objects.
  - **id** (string) - The unique identifier of the project.
  - **key** (string) - The project key.
  - **name** (string) - The name of the project.

#### Response Example
```json
{
  "isLast": false,
  "maxResults": 10,
  "startAt": 0,
  "total": 50,
  "values": [
    {
      "id": "10001",
      "key": "PROJ",
      "name": "Sample Project"
    }
  ]
}
```

#### Error Response (401)
- **errorMessages** (array) - A list of error messages.
- **errors** (object) - An object containing specific error details.

#### Error Response Example
```json
{
  "errorMessages": [],
  "errors": {
    "project": "Project is required"
  }
}
```
```
Tokens:
Raw