quilk-js-error-reporting/README.md

Capture and send client-side errors from your production environments as they happen and for free. Add as much extra custom data to each report as you need.

# quilk-js-error-reporting

A simple lightweight js error reporting tool that will post the error details to the default url of `/js-error-reporting`.

What you do with the results POST'd to your server is up to you. Store them in a NoSQL db, email the details, send to your install of jira...

## How to use

Install `npm install quilk-js-error-reporting --save` (save to auto include in your package.json file)

Or you also use yarn ;) I here they say it is faster...


Then simply include the script tag in your website.
```
<script src="<path to node modules>/dist/quilk-js-error-reporting.js" 
        id="quilk-js-error-reporting"
></script>
```

Example raw php script grabbing the data at the server end:
```
$data = json_decode(file_get_contents('php://input'), true);
```

## Changing the reporting URL
To change the url reports are sent to, just add the a new attribute `data-url` eg:
```
<script src="<path to node modules>/dist/quilk-js-error-reporting.js" 
        id="quilk-js-error-reporting"
        data-url="/some-other-url"
></script>
```

## Adding additional data
You may add even more data to your reports, again with a simple attribute `data-extra-json`. JSON encode an object/array of data into the attribute, eg:
```
<script src="<path to node modules>/dist/quilk-js-error-reporting.js" 
        id="quilk-js-error-reporting"
        data-url="/some-other-url"
        data-extra-json='{"this":"is a test of even more data to analyse"}'
></script>
```


## Example data captured and sent:
```
{
  "extra_data": {"this":"is a test of even more data to analyse"},
  "url": "http:\/\/localhost:63342\/quilk-js-error-reporting\/examples\/index.html?_ijt=nssrlj3c29ih1oek0cslnlmask",
  "messageOrEvent": "Uncaught SyntaxError: Invalid regular expression: missing \/",
  "source": "http:\/\/localhost:63342\/quilk-js-error-reporting\/examples\/example.js",
  "lineno": 2,
  "colno": 9,
  "trace": [
    {
      "fileName": "SyntaxError: Invalid regular expression: missing \/",
      "source": "SyntaxError: Invalid regular expression: missing \/"
    }
  ],
  "browser": {
    "source": "Mozilla\/5.0 (X11; Linux x86_64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/58.0.3029.81 Safari\/537.36 OPR\/45.0.2552.635",
    "browser": {
      "family": "Opera",
      "major": 45,
      "minor": 0,
      "patch": 2552,
      "name": "Opera 45",
      "version": "45"
    },
    "os": {
      "family": "Linux",
      "major": null,
      "minor": null,
      "patch": null,
      "name": "Linux",
      "version": ""
    },
    "device": {
      "family": "Other",
      "type": "Desktop",
      "manufacturer": null
    }
  },
  "browser_history": {
    
  }
}
```


## Dependencies and thanks..
This package was made possible with detect.js and stacktrace.js.