> 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

All frontend integrations on one place.

## 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 %}