> For the complete documentation index, see [llms.txt](https://cereal-killer.gitbook.io/errorlogger/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cereal-killer.gitbook.io/errorlogger/integrations-1/frontend.md).

# Frontend

## Installation

{% hint style="info" %}
You don't need to install **`@types/errorlogger-sdk.`**Types are shipping with SDK.
{% endhint %}

{% hint style="info" %}
You will get autocomplete / intellisense in JS files.
{% endhint %}

{% tabs %}
{% tab title="NPM" %}

```javascript
npm i errorlogger-sdk --save
```

{% endtab %}

{% tab title="Yarn" %}

```
yarn add errorlogger-sdk
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
DSN's can be generated at <https://error-logger.netlify.app/>
{% endhint %}

#### - ErrorLoggerClientOptions

* Short summary of ErrorLoggerClientOptions:

| Property    | Type   | Description                                                                                       |
| ----------- | ------ | ------------------------------------------------------------------------------------------------- |
| dsn         | string | Represents an api key which authorizes you with API                                               |
| environment | string | Represents in which environment you want to log errors. Valid options (development \| production) |
| data        | object | Additional data you want to log. EX. Network connection                                           |

### VueJS

{% hint style="info" %}
Creat&#x65;**`.env`** file and add your DSN (Data Source Name).
{% endhint %}

{% code title=".env" %}

```bash
VUE_APP_ERRORLOGGER_DSN=<DSN-HERE>
```

{% endcode %}

{% hint style="info" %}
Go to **`main.js`** and add following lines.
{% endhint %}

{% code title="main.js" %}

```javascript
import { ErrorLoggerClient } from 'errorlogger-sdk/build/client/ErrorLoggerClient'

new ErrorLoggerClient({
  dsn: process.env.VUE_APP_ERRORLOGGER_DSN,
  environment: 'production'
});
```

{% endcode %}

{% hint style="success" %}
**`You are good to go. Happy coding :)!`**&#x20;
{% endhint %}

### React

{% hint style="info" %}
Creat&#x65;**`.env`** file and add your DSN (Data Source Name).
{% endhint %}

{% code title=".env" %}

```javascript
REACT_APP_ERRORLOGGER_DSN=<DSN-HERE>
```

{% endcode %}

{% hint style="info" %}
Go to **`index.js`** and add following lines.
{% endhint %}

{% code title="index.js" %}

```javascript
import { ErrorLoggerClient } from 'errorlogger-sdk/build/client/ErrorLoggerClient'

new ErrorLoggerClient({
  dsn: process.env.REACT_APP_ERRORLOGGER_DSN,
  environment: 'production'
});

render(
  <StrictMode>
    <StoreProvider store={store}>
      <App />
    </StoreProvider>
  </StrictMode>,
  document.getElementById("root")
);
```

{% endcode %}

{% hint style="success" %}
**`You are good to go. Happy coding :)!`**
{% endhint %}

### Angular

{% hint style="info" %}
Go t&#x6F;**`src/environments/environment.[prod].ts and add DSN to environvment`**
{% endhint %}

```javascript
export const environment: IEnvironment = {
  production: false,
  errorLoggerDsn: '<DSN-HERE>'
}
```

{% hint style="info" %}
Go to **`app.module.ts and add following lines.`**
{% endhint %}

```javascript
import { environment } from '../environments/environment';
import { ErrorLoggerClient } from 'errorlogger-sdk/build/client/ErrorLoggerClient'

new ErrorLoggerClient({
  dsn: environment.errorLoggerDsn,
  environment: 'production'
});
```

{% hint style="success" %}
**`You are good to go. Happy coding :)!`**
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cereal-killer.gitbook.io/errorlogger/integrations-1/frontend.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.