<commit_before># Logging to elmah.io from JavaScript

> We are currently building elmah.io.js. The description below is an example of how installation and usage may turn out. Nothing of the below works yet! :)

[TOC]

elmah.io doesn't only support server-side .NET logging. We also log JavaScript errors happening on your website. Logging client-side errors, requires nothing more than installing the `elmahio.js` script on your website.

## Installation

Pick an installation method of your choice:

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="nav-item"><a class="nav-link active" href="#manually" aria-controls="home" role="tab" data-toggle="tab">Manually</a></li>
    <li role="presentation" class="nav-item"><a class="nav-link" href="#cdn" aria-controls="home" role="tab" data-toggle="tab">CDN</a></li>
    <li role="presentation" class="nav-item"><a class="nav-link" href="#npm" aria-controls="profile" role="tab" data-toggle="tab">npm</a></li>
    <li role="presentation" class="nav-item"><a class="nav-link" href="#bower" aria-controls="profile" role="tab" data-toggle="tab">Bower</a></li>
    <li role="presentation" class="nav-item"><a class="nav-link" href="#libman" aria-controls="profile" role="tab" data-toggle="tab">Library Manager</a></li>
</ul>

  <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="manually">

Download the latest release as a zip: [https://github.com/elmahio/elmah.io.js/releases](https://github.com/elmahio/elmah.io.js/releases)

Unpack and copy `elmahio.min.js` to the `Scripts` folder or whatever folder you use to store JavaScript files.

Reference `elmahio.min.js` just before the `</body>` tag (but before all other JavaScripts) in your shared `_Layout.cshtml` or all HTML files, depending on how you've structured your site:

```html
<script src="~/Scripts/elmahio.min.js?apiKey=YOUR-API-KEY&logId=YOUR-LOG-ID" type="text/javascript"></script>
```

</div>
  <div role="tabpanel" class="tab-pane" id="cdn">

Reference `elmahio.min.js` just before the `</body>` tag (but before all other JavaScripts) in your shared `_Layout.cshtml` or all HTML files, depending on how you've structured your site:

```html
<script src="https://cdn.rawgit.com/elmahio/elmah.io.js/1.0.2/dist/elmahio.min.js?apiKey=YOUR-API-KEY&logId=YOUR-LOG-ID" type="text/javascript"></script>
```

  </div>
  <div role="tabpanel" class="tab-pane" id="npm">

Install the elmah.io.js npm package:

```ps
npm install elmah.io.js
```

Reference `elmahio.min.js` just before the `</body>` tag (but before all other JavaScripts) in your shared `_Layout.cshtml` or all HTML files, depending on how you've structured your site:

```html
<script src="~/node_modules/elmah.io.js/dist/elmahio.min.js?apiKey=YOUR-API-KEY&logId=YOUR-LOG-ID" type="text/javascript"></script>
```

  </div>
  <div role="tabpanel" class="tab-pane" id="bower">

Install the `elmah.io.js` Bower package:

```ps
bower install elmah.io.js
```

Reference `elmahio.min.js` just before the `</body>` tag (but before all other JavaScripts) in your shared `_Layout.cshtml` or all HTML files, depending on how you've structured your site:

```html
<script src="~/bower_components/elmah.io.js/dist/elmahio.min.js?apiKey=YOUR-API-KEY&logId=YOUR-LOG-ID" type="text/javascript"></script>
```

  </div>
  <div role="tabpanel" class="tab-pane" id="libman">

Add the `elmah.io.js` library in your `libman.json` file:

```json
{
  ...
  "libraries": [
    ...
    {
      "provider": "filesystem",
      "library": "https://raw.githubusercontent.com/elmahio/elmah.io.js/1.0.2/dist/elmahio.min.js",
      "destination": "wwwroot/lib/elmahio"
    }
  ]
}
```

or using the LibMan CLI:

```powershell
libman install https://github.com/elmahio/elmah.io.js/blob/1.0.2/elmahio.min.js --provider filesystem --destination wwwroot\lib\elmahio
```

Reference `elmahio.min.js` just before the `</body>` tag (but before all other JavaScripts) in your shared `_Layout.cshtml` or all HTML files, depending on how you've structured your site:

```html
<script src="~/lib/elmahio/dist/elmahio.min.js?apiKey=YOUR-API-KEY&logId=YOUR-LOG-ID" type="text/javascript"></script>
```

  </div>
</div>

That's it. All uncaught errors on your website, are now logged to elmah.io.

## Configuration in code

If you prefer configuring in code (or need to access the options for something else), API key and log ID can be configured by referencing the `elmahio.min.js` script with parameters:

```html
<script src="~/scripts/elmahio.min.js" type="text/javascript"></script>
```

Then initialize the logger in JavaScript:

```javascript
new Elmahio({
    apiKey: 'YOUR-API-KEY',
    logId: 'YOUR-LOG-ID'
});<commit_msg>Bower supported through bower-npm-resolver<commit_after># Logging to elmah.io from JavaScript

> We are currently building elmah.io.js. The description below is an example of how installation and usage may turn out. Nothing of the below works yet! :)

[TOC]

elmah.io doesn't only support server-side .NET logging. We also log JavaScript errors happening on your website. Logging client-side errors, requires nothing more than installing the `elmahio.js` script on your website.

## Installation

Pick an installation method of your choice:

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="nav-item"><a class="nav-link active" href="#manually" aria-controls="home" role="tab" data-toggle="tab">Manually</a></li>
    <li role="presentation" class="nav-item"><a class="nav-link" href="#cdn" aria-controls="home" role="tab" data-toggle="tab">CDN</a></li>
    <li role="presentation" class="nav-item"><a class="nav-link" href="#npm" aria-controls="profile" role="tab" data-toggle="tab">npm</a></li>
    <li role="presentation" class="nav-item"><a class="nav-link" href="#nuget" aria-controls="profile" role="tab" data-toggle="tab">NuGet</a></li>
    <li role="presentation" class="nav-item"><a class="nav-link" href="#libman" aria-controls="profile" role="tab" data-toggle="tab">Library Manager</a></li>
    <li role="presentation" class="nav-item"><a class="nav-link" href="#bower" aria-controls="profile" role="tab" data-toggle="tab">Bower</a></li>
</ul>

  <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="manually">

Download the latest release as a zip: [https://github.com/elmahio/elmah.io.js/releases](https://github.com/elmahio/elmah.io.js/releases)

Unpack and copy `elmahio.min.js` to the `Scripts` folder or whatever folder you use to store JavaScript files.

Reference `elmahio.min.js` just before the `</body>` tag (but before all other JavaScripts) in your shared `_Layout.cshtml` or all HTML files, depending on how you've structured your site:

```html
<script src="~/Scripts/elmahio.min.js?apiKey=YOUR-API-KEY&logId=YOUR-LOG-ID" type="text/javascript"></script>
```

</div>
  <div role="tabpanel" class="tab-pane" id="cdn">

Reference `elmahio.min.js` just before the `</body>` tag (but before all other JavaScripts) in your shared `_Layout.cshtml` or all HTML files, depending on how you've structured your site:

```html
<script src="https://cdn.rawgit.com/elmahio/elmah.io.js/1.0.2/dist/elmahio.min.js?apiKey=YOUR-API-KEY&logId=YOUR-LOG-ID" type="text/javascript"></script>
```

  </div>
  <div role="tabpanel" class="tab-pane" id="npm">

Install the elmah.io.js npm package:

```ps
npm install elmah.io.js
```

Reference `elmahio.min.js` just before the `</body>` tag (but before all other JavaScripts) in your shared `_Layout.cshtml` or all HTML files, depending on how you've structured your site:

```html
<script src="~/node_modules/elmah.io.js/dist/elmahio.min.js?apiKey=YOUR-API-KEY&logId=YOUR-LOG-ID" type="text/javascript"></script>
```

  </div>
  <div role="tabpanel" class="tab-pane" id="bower">

Since Bower is <a href="https://bower.io/blog/2017/how-to-migrate-away-from-bower/" target="_blank" rel="noopener noreferrer">no longer maintained</a>, installing `elmah.io.js` through Bower, is supported using `bower-npm-resolver`. Install the resolver:

```ps
npm install bower-npm-resolver --save
```

Add the resolver in your `.bowerrc` file:

```json
{
  "resolvers": [
    "bower-npm-resolver"
  ]
}
```

Install the `elmah.io.js` npm package:

```ps
bower install npm:elmah.io.js --save
```

Reference `elmahio.min.js` just before the `</body>` tag (but before all other JavaScripts) in your shared `_Layout.cshtml` or all HTML files, depending on how you've structured your site:

```html
<script src="~/bower_components/elmah.io.js/dist/elmahio.min.js?apiKey=YOUR-API-KEY&logId=YOUR-LOG-ID" type="text/javascript"></script>
```

  </div>
  <div role="tabpanel" class="tab-pane" id="libman">

Add the `elmah.io.js` library in your `libman.json` file:

```json
{
  ...
  "libraries": [
    ...
    {
      "provider": "filesystem",
      "library": "https://raw.githubusercontent.com/elmahio/elmah.io.js/1.0.2/dist/elmahio.min.js",
      "destination": "wwwroot/lib/elmahio"
    }
  ]
}
```

or using the LibMan CLI:

```powershell
libman install https://github.com/elmahio/elmah.io.js/blob/1.0.2/elmahio.min.js --provider filesystem --destination wwwroot\lib\elmahio
```

Reference `elmahio.min.js` just before the `</body>` tag (but before all other JavaScripts) in your shared `_Layout.cshtml` or all HTML files, depending on how you've structured your site:

```html
<script src="~/lib/elmahio/dist/elmahio.min.js?apiKey=YOUR-API-KEY&logId=YOUR-LOG-ID" type="text/javascript"></script>
```

  </div>
  <div role="tabpanel" class="tab-pane" id="nuget">

Install the `elmah.io.js` NuGet package:

```ps
Install-Package elmah.io.js
```

Reference `elmahio.min.js` just before the `</body>` tag (but before all other JavaScripts) in your shared `_Layout.cshtml` or all HTML files, depending on how you've structured your site:

```html
<script src="~/Scripts/elmahio.min.js?apiKey=YOUR-API-KEY&logId=YOUR-LOG-ID" type="text/javascript"></script>
```

  </div>
</div>

That's it. All uncaught errors on your website, are now logged to elmah.io.

## Configuration in code

If you prefer configuring in code (or need to access the options for something else), API key and log ID can be configured by referencing the `elmahio.min.js` script with parameters:

```html
<script src="~/scripts/elmahio.min.js" type="text/javascript"></script>
```

Then initialize the logger in JavaScript:

```javascript
new Elmahio({
    apiKey: 'YOUR-API-KEY',
    logId: 'YOUR-LOG-ID'
});
{'fraction_non_alphanumeric': 0.16548689496843313, 'fraction_numerical': 0.002104457623876028, 'mean_word_length': 4.776243093922652, 'pattern_counts': {'":': 9, '<': 116, '<?xml version=': 0, '>': 118, 'https://': 11, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2968528', 'n_tokens_mistral': 3797, 'n_tokens_neox': 3615, 'n_words': 964}