diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
new file mode 100644
index 0000000..0833c0c
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,21 @@
+### Steps to reproduce
+
+#### Live Demo
+<!-- Fork this JSBin, or provide your own URL -->
+https://jsbin.com/ligimo/3/edit?html,output
+
+### Expected result
+
+### Actual result
+
+### Browsers affected
+
+<!-- Check all that apply -->
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Edge
+- [ ] Safari 9
+- [ ] Safari 8
+- [ ] IE 11
+
+### Screenshot
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..bddfad8
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,21 @@
+language: node_js
+sudo: required
+dist: trusty
+before_script:
+- npm install web-component-tester
+- npm install bower
+- export PATH=$PWD/node_modules/.bin:$PATH
+- bower install
+node_js: 8
+addons:
+  apt:
+    sources:
+    - google-chrome
+    packages:
+    - google-chrome-stable
+script:
+- xvfb-run wct
+env:
+  global:
+  - secure: udu+o3NNMHha79ytgmQxCKH99hTEO2egjCPyy97cCMY0b7jkaMM87UtGvrdxJtZGpkSLRPDxIseafZ0Z9Kvn8splH/cNe23m34LuW97BOeI6R9/1HQBJAyG17luVI8wlW2aYq1xD0xJqpxdTyG/hAKB3D3/8KoAIe9r/fH53cNEHi0mfuOqfWuuQmvmrzKD+DFgPj4SmQPLMxBba6O83kmXZw5NIQYYuoEszPmA4wZxtQzNO0DS37g1N7bsoU6505CKzYaXVLApcpCnmz4s5no21TP+tFBPW9zCjul+J+0WR20PxiaGtI1PlnAAdr0LZPUuBxoRpFhoQwZV5ojsTo82JNjexvmEVY2xOLE3+LS1j9IMvK7Fuv1TbV4r9eufAqvYTt4pVVgo6FwuEfLiMx9Tye7GFlfYmJFsv2dSTDekFr1vDi5E28R2V5JVAT/y+q4eSEsgLDSc7Tpts/ME1nUG3wMTH8NaAqZr7opcfa3vBe+dkeXTw8p8DX6lsaUtLiVvpw4hZGG15h0x05proU2e+RBBDp1SX0bovBjzbxSkJklm5Gzc+lVcGWDJtf/szcwLp77+LvKIHHnLMswezF002OlhRPfNQ8xil9bk/GR5PWnrH/n1A8VLYPAaFwU1tf89I4dPhZVnHSj+y8RWkV+SG7FUbbWE4uFBZnX9oQ6I=
+  - secure: R1ycV0k4ZbLsNrOhCTTBWzA39mYhH5DtDJ+3fUXvfuWKB97dFDBKgsIFCRketQ2y4uLQr9iNA2kMWjygQ1uwL5SscyYypyKCuVT7dAVa6E+wGO4UjxR/8E0VcgmkfHi9wD2neC3GNDumHH5SwZVLHmqSf0QFvB+Gem46ukDuS3wdgTv1+0oGFpQGbruBCTGxWZ2ydWuuC5zWZYoOguy/IZilDU+2wvG5wAFRz5cQuwSIy6iOsprIdtlgvDpBkwSS2KPs16f3j1xntrg995SXfUFDCyVJ3FGusDAAvIYJ25jls4zydUXDH1JrhiD1rhty1Nc3RI2hZ/yFdXll9J0Kl/nPMNpsECn65pn25AfxcPSChjIgXm+U1pcWEQEMGvhvqvVeZL3fp0o8srxtVssmLAQMMDR2vxe3McDrVnKLHEsbRHQEM0GIlRInsMuZ2RvyDpypGMYEkzZvGMVIUCDTS31xOz/Vtr8/WocqaW0wslvg2l4oKsw+ckWWDJbOXOCQ3RyrEl3+qknJ6a5KF7o4TQwxwpxndeEtgeJeHPwHHThV77SWViOtBgBSvmuZwVngVBaerhIUCsOvCdc9xBvHzfz8o94UbuFIPvV9p03yvdplRmIband0bL9tuerHxmNtVq/au2z21WOdsHVrqZEjhrv4XwTkLiw8QUGkPJ44W4I=
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..3bd40b3
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,75 @@
+# Contributing
+
+We welcome and truly appreciate contribution in all forms - issues, pull requests, questions, or fancy examples of apps/elements build on to of your elements.
+
+## Filing bugs
+
+Our team heavily uses Github for all of our software management. We use Github issues to track all bugs and features.
+
+If you find an issue, please do file it on the repository.
+
+We love examples for addressing issues - issues with a Plunkr, [jsFiddle](http://jsfiddle.net), or [jsBin](http://jsbin.com) will be much easier for us to work on quickly.
+
+Occasionally we'll close issues if they appear stale or are too vague - please don't take this personally! Please feel free to re-open issues we've closed if there's something we've missed and they still need to be addressed.
+
+## Developing the element
+
+If you would like to start to fiddle with element's code, here is the flow we use.
+
+- Make a local clone of this repo: `git clone git@github.com:Palindrom/palindrom-error-catcher.git`
+
+In order to develop it locally we suggest to use [polyserve](https://npmjs.com/polyserve) tool to handle bower paths gently.
+
+0. Go to the repo's directory: `cd palindrom-error-catcher`
+1. Install [bower](http://bower.io/) & [polyserve](https://npmjs.com/polyserve): `$ npm install -g bower polyserve`
+2. Install local dependencies: `$ bower install`
+3. Start development server `$ polyserve -p 8000`
+4. Open the demo/preview: [http://localhost:8000/components/palindrom-error-catcher/](http://localhost:8000/components/palindrom-error-catcher/)
+5. Open the test suite: [http://localhost:8000/components/palindrom-error-catcher/test/](http://localhost:8000/components/palindrom-error-catcher/test/)
+
+## Contributing Pull Requests
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -m 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Open corresponding issue if needed
+6. Submit a pull request :D
+
+
+## Unit tests
+
+This project uses [`web-component-tester`](https://github.com/Polymer/web-component-tester) for unit tests.
+The [`polyserve`](https://github.com/PolymerLabs/polyserve) utility is helpful for running tests in the browser](#developing-the-element).
+
+
+### Running element unit tests from CLI
+
+To run the element unit tests from CLI, you need to:
+
+0.  Install `web-component-tester` globally: `npm install -g web-component-tester`
+1.  Clone the element repo.
+2.  Install the dependencies. `bower install`
+3.  Run the tests: `wct`
+
+#### Configuring `web-component-tester`
+
+By default, `web-component-tester` runs tests on all installed browsers. You can configure it
+to run tests on a subset of available browsers, or to run tests remotely using Sauce Labs.
+
+See the [`web-component-tester` README](https://github.com/Polymer/web-component-tester) for
+information on configuring the tool.
+
+## Releasing a new version
+
+**The release is done from `master` branch.**
+
+1. Make sure that the browser tests pass in Chrome, Firefox, Edge and IE. This can be done manually or using `npm run test` (see instructions above).
+2. Call `git status` to verify that there are no uncommited files in the directory
+3. Call `grunt bump:patch`, `grunt bump:minor` or `grunt bump:major`. This command:
+ - increments the version number in the relevant files
+ - commits changes to Git with the version number as the commit message
+ - creates a Git tag wit the version
+4. Call `git push` to push the changes to `origin master`
+5. Call `git push --tags` to push the tag to `origin master`
+6. Explain the changes (at least an summary of the commit log) in [GitHub Releases](https://github.com/Palindrom/palindrom-error-catcher).
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..83af4be
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,27 @@
+module.exports = function(grunt) {
+
+    grunt.initConfig({
+        bump: {
+          options: {
+            files: ['bower.json', 'palindrom-error-catcher.html'],
+            commit: true,
+            commitMessage: '%VERSION%',
+            commitFiles: ['bower.json', 'palindrom-error-catcher.html'],
+            createTag: true,
+            tagName: '%VERSION%',
+            tagMessage: 'Version %VERSION%',
+            push: false,
+            globalReplace: false,
+            prereleaseName: false,
+            regExp: false
+          }
+        }
+    });
+
+
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-bump');
+
+    grunt.registerTask('default', ['watch']);
+
+};
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..330c8e1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,65 @@
+# &lt;palindrom-error-catcher&gt; [![Build Status](https://travis-ci.org/Palindrom/palindrom-error-catcher.svg?branch=gh-pages)](https://travis-ci.org/Palindrom/palindrom-error-catcher)
+
+---
+
+> Handles palindrom-client disconnection events and creates the needed UI to give the user control over them
+
+Custom Element that binds with [palindrom-client](https://github.com/Palindrom/palindrom-client) connection events and shows a simple UI that allows the user to interact with the events. It is can be used as an example of designing your own error-preseting UI.
+
+Please check the code at `palindrom-error-catcher.html` file to see how events are handled. 
+
+## Creating your own
+
+If you want to gain control over the appearance of your errors UI. You can fork this element, put it in the `wwwroot/sys/` folder of your app. And edit it as desired. Once you have an element in this folder with the same name, it will supersede the default one and your UI will be shows. 
+
+## Install
+
+Install the component using [Bower](http://bower.io/):
+
+```sh
+$ bower install palindrom-error-catcher --save
+```
+
+Or [download as ZIP](https://github.com/Palindrom/palindrom-error-catcher/archive/master.zip).
+
+## Usage
+
+1. Import polyfill:
+
+    ```html
+    <script src="bower_components/webcomponentsjs/webcomponent-lite.js"></script>
+    ```
+
+2. Import custom element:
+
+    ```html
+    <link rel="import" href="bower_components/palindrom-error-catcher/palindrom-error-catcher.html">
+    ```
+
+3. Start using it!
+
+    ```html
+    <palindrom-error-catcher></palindrom-error-catcher>
+    ```
+
+## Options
+
+Attribute     | Options     | Default      | Description
+---           | ---         | ---          | ---
+`target-selector`         | *string*    | `palindrom-client`        | CSS selector of `palindrom-client` element.
+
+## Methods
+
+Method        | Parameters   | Returns     | Description
+---           | ---          | ---         | ---
+`cancelReloading()`   | None.        | Nothing.    | Cancels reloading timer and hides the disconnection bar.
+
+## [Contributing and Development](CONTRIBUTING.md)
+
+## History
+
+For detailed changelog, check [Releases](https://github.com/Palindrom/palindrom-error-catcher/releases).
+
+## License
+
+MIT
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..461a9c3
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,33 @@
+{
+  "name": "palindrom-error-catcher",
+  "version": "1.0.0",
+  "description":
+    "Handles palindrom-client disconnection events and creates the needed UI to give the user control over them",
+  "private": true,
+  "authors": ["Omar Alshaker"],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "json-patch",
+    "palindrom",
+    "binding",
+    "puppetjs",
+    "template",
+    "web-socket",
+    "http",
+    "json"
+  ],
+  "main": "palindrom-error-catcher.html",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/Palindrom/palindrom-error-catcher.git"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/Palindrom/palindrom-error-catcher",
+  "ignore": ["**/.*", "node_modules", "bower_components", "test/"],
+  "devDependencies": {
+    "test-fixture": "PolymerElements/test-fixture#^3.0.0",
+    "web-component-tester": "^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cef819e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta http-equiv="refresh" content="0;URL='/components/palindrom-error-catcher/test/" />
+</head>
+
+</html>
\ No newline at end of file
diff --git a/palindrom-error-catcher.html b/palindrom-error-catcher.html
new file mode 100644
index 0000000..37a57f4
--- /dev/null
+++ b/palindrom-error-catcher.html
@@ -0,0 +1,181 @@
+<!-- palindrom-error-catcher version: 1.0.0 | MIT License -->
+
+<!--
+   Custom Element that binds with [palindrom-client](https://github.com/Palindrom/palindrom-client) connection events and shows a simple UX that allows the user to interact with them. It is can be used as an example of designing your own error catcher.
+-->
+
+<template id="palindrom-error-catcher">
+    <style>
+        .box-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            z-index: 1000;
+        }
+
+        .box-container[hidden] {
+            display: none;
+        }
+
+        .box {
+            padding: 5px 5px;
+            background-color: #fee;
+            border: 1px solid #f9c1c1;
+            border-top: none;
+            color: #444;
+            cursor: pointer;
+        }
+
+        .hourglass {
+            animation: rotateHG 2s cubic-bezier(.03, 1, 1, 0) infinite;
+            transform-origin: 50% 50%;
+            display: inline-block;
+            text-decoration: none !important;
+        }
+
+        @keyframes rotateHG {
+            100% {
+                transform: rotate(360deg)
+            }
+        }
+    </style>
+    <div class="box-container connection-error-pane" hidden>
+        <div class="box error tappable">
+            <span class="hourglass">⏳</span> Connection error.</strong> See console for details.
+            <a class="reloading-in-message">
+                Reloading page in
+                <span class="reconnection-seconds">5</span>... •
+                <a href="javascript:;" class="cancel-reloading-btn">Do not reload</a> •
+            </a>
+            <a href="javascript:;" class="reload-btn">Reload now</a>
+        </div>
+    </div>
+    <div class="box-container generic-error-pane" hidden>
+        <div class="box error tappable">
+            <strong>⚠️ An error has occurred.</strong> See console for details.
+            <span>Click here to reload</span>
+        </div>
+    </div>
+</template>
+
+<script>
+    (function () {
+        const template = document.currentScript.ownerDocument.querySelector('#palindrom-error-catcher');
+
+        function bindCallbacks(to) {
+            to.handleConnectionError = to.handleConnectionError.bind(to);
+            to.handleReconnectionCountdownTick = to.handleReconnectionCountdownTick.bind(to);
+            to.handleReconnectionEnd = to.handleReconnectionEnd.bind(to);
+            to.handleGenericError = to.handleGenericError.bind(to);
+            to.cancelReloading = to.cancelReloading.bind(to);
+        }
+
+        function reload() {
+            location.reload();
+        }
+
+        function bindToElement(instance) {
+            instance.target = instance.getRootNode().querySelector(instance.targetSelector) || document.querySelector(instance.targetSelector);
+        }
+
+        function subscribeToEvents(instance) {
+            unsubscribeToEvents(instance);
+            instance.target.addEventListener('generic-error', instance.handleGenericError);
+            instance.target.addEventListener('connection-error', instance.handleConnectionError);
+            instance.target.addEventListener('reconnection-countdown', instance.handleReconnectionCountdownTick);
+            instance.target.addEventListener('reconnection-end', instance.handleReconnectionEnd);
+            instance.cancelReloadingBtn.addEventListener('click', instance.cancelReloading);
+            instance.reloadNowBtn.addEventListener('click', reload);
+            instance.genericErrorPane.addEventListener('click', reload);
+            instance.subscribed = true;
+        }
+
+        function unsubscribeToEvents(instance) {
+            if (instance.subscribed) {
+                instance.target.removeEventListener('generic-error', instance.handleGenericError);
+                instance.target.removeEventListener('connection-error', instance.handleConnectionError);
+                instance.target.removeEventListener('reconnection-countdown', instance.handleReconnectionCountdownTick);
+                instance.target.removeEventListener('reconnection-end', instance.handleReconnectionEnd);
+                instance.genericErrorPane.removeEventListener('click', reload);
+                instance.cancelReloadingBtn.removeEventListener('click', instance.cancelReloading);
+                instance.reloadNowBtn.removeEventListener('click', reload);
+                instance.subscribed = false;
+            }
+        }
+
+        class PalindromErrorCatcher extends HTMLElement {
+            static get observedAttributes() {
+                return ['target-selector']
+            }
+
+            constructor() {
+                super();
+
+                // Creates the shadow root
+                const shadowRoot = this.attachShadow({ mode: 'open' });
+                const clone = document.importNode(template.content, true);
+                shadowRoot.appendChild(clone);
+
+                this.connectionErrorPane = shadowRoot.querySelector('.connection-error-pane');
+                this.genericErrorPane = shadowRoot.querySelector('.generic-error-pane');
+                this.reconnectionSecondsSpan = shadowRoot.querySelector('.reconnection-seconds');
+                this.cancelReloadingBtn = shadowRoot.querySelector('.cancel-reloading-btn');
+                this.reloadNowBtn = shadowRoot.querySelector('.reload-btn');
+
+                bindCallbacks(this);
+            }
+
+
+            connectedCallback() {
+                this.targetSelector = this.getAttribute('target-selector') || 'palindrom-client';
+                bindToElement(this);
+                subscribeToEvents(this);
+            }
+
+            disconnectedCallback() {
+                unsubscribeToEvents(this);
+            }
+
+            handleGenericError(event) {
+                this.genericErrorPane.removeAttribute('hidden');
+                console.error(event.detail.error);
+            }
+
+            cancelReloading() {
+                this.connectionErrorPane.setAttribute('hidden', '');
+                clearInterval(this.reloadInterval);
+                delete this.reloadInterval;
+            }
+
+            handleConnectionError(event) {
+                this.connectionErrorPane.removeAttribute('hidden');
+                let timeout = 4;
+                // in case two consequtive errors happen, we don't want to schedule reloading twice
+                if (!this.reloadInterval) {
+                    this.reloadInterval = setInterval(() => {
+                        this.reconnectionSecondsSpan.textContent = timeout--;
+                        if (timeout === 0) {
+                            reload();
+                        }
+                    }, 1000);
+                }
+                console.error(event.detail.error);
+            }
+            handleReconnectionCountdownTick(event) {
+                /* you can use this method to add your logic to handle reconnection timer ticks */
+                console.info('Reconnection tick', event)
+            }
+            handleReconnectionEnd() {
+                /* you can use this method to add your logic to handle reconnection initiation. */
+                console.info('Reconnection will happen now...')
+            }
+            attributeChangedCallback(name, oldVal, newVal) {
+                this.targetSelector = newVal;
+                this.bindToElement(this);
+                this.subscribeToEvents(this);
+            }
+        }
+        customElements.define('palindrom-error-catcher', PalindromErrorCatcher)
+    })();
+</script>
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 0000000..a19b81a
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+
+<body>
+  <script>
+    WCT.loadSuites([
+      'simple.html'
+    ]);
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test/shared/helpers.html b/test/shared/helpers.html
new file mode 100644
index 0000000..24ad52e
--- /dev/null
+++ b/test/shared/helpers.html
@@ -0,0 +1,27 @@
+<script>
+    window.palindromChaiPlugin = function (chai, utils) {
+        chai.Assertion.addProperty('visible', function () {
+            this.assert(this._obj.offsetWidth || this._obj.offsetHeight || this._obj.getClientRects().length,
+                "expected element #{this} to be visible, but it's hidden",
+                "expected element #{this} to be hidden, but it's visible");
+        })
+    };
+    customElements.define('palindrom-client', class PalindromClientMock extends HTMLElement {
+        fireConnectionErrorEvent(msg) {
+            this.dispatchEvent(new CustomEvent('connection-error', {
+                detail: { error: new Error(msg) }
+            }));
+        }
+        fireGenericErrorEvent(msg) {
+            this.dispatchEvent(new CustomEvent('generic-error', {
+                detail: { error: new Error(msg) }
+            }));
+        }
+        fireReconnectionTickEvent() {
+            this.dispatchEvent(new CustomEvent('reconnection-countdown'));
+        }
+        fireReconnectionEndEvent() {
+            this.dispatchEvent(new CustomEvent('reconnection-end'));
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/test/simple.html b/test/simple.html
new file mode 100644
index 0000000..f5f1f3f
--- /dev/null
+++ b/test/simple.html
@@ -0,0 +1,92 @@
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Importing Web Component's Polyfill -->
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <script src="../../sinonjs/sinon.js"></script>
+
+    <link rel="import" href="shared/helpers.html">
+
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <!-- Step 1: import the element to test -->
+    <link rel="import" href="../palindrom-error-catcher.html">
+</head>
+
+<body>
+    <test-fixture id="text-fixture">
+        <template>
+            <palindrom-client></palindrom-client>
+            <palindrom-error-catcher></palindrom-error-catcher>
+        </template>
+    </test-fixture>
+    <script>
+        describe('palindrom-error-catcher', function () {
+            var textFixture, ppclient, palindromErrorCatcher, errorCatcherShadowRoot, originalConsoleError;
+            before(function () {
+                chai.use(palindromChaiPlugin);
+                /* for some strange reason I couldn't find a trace for,
+                when console.error is called, mocha assumes an exception happened,
+                even if it is intended. This fixes the issue but doesn't affect the test scenario */
+                originalConsoleError = console.error;
+                console.error = function noop () {};
+            });
+            after(function() {
+                // just to be clean
+                console.error = originalConsoleError;
+            })
+            beforeEach(function () {
+                textFixture = fixture('text-fixture');
+                ppclient = textFixture[0];
+                palindromErrorCatcher = textFixture[1];
+                errorCatcherShadowRoot = palindromErrorCatcher.shadowRoot;
+                
+            });
+            describe('Connection errors: UI', function () {
+                it('Should show UI after connection error', function () {
+                    const errorPane = errorCatcherShadowRoot.querySelector('.connection-error-pane');
+
+                    expect(errorPane).to.be.not.visible;
+                    ppclient.fireConnectionErrorEvent();
+                    expect(errorPane).to.be.visible;
+                });
+                it('Should show UI after generic error', function () {
+                    const errorPane = errorCatcherShadowRoot.querySelector('.generic-error-pane');
+
+                    expect(errorPane).to.be.not.visible;
+                    ppclient.fireGenericErrorEvent();
+                    expect(errorPane).to.be.visible;
+                });
+            });
+            describe('Connection errors: console', function () {
+                var consoleErrorSpy;
+
+                beforeEach(function () {
+                    consoleErrorSpy = sinon.spy(console, 'error');
+                });
+                afterEach(function () {
+                    console.error.restore();
+                });
+
+                it('Should call console.error after connection error', function () {
+                    expect(consoleErrorSpy).to.be.not.called;
+                    ppclient.fireConnectionErrorEvent('some connection error');
+                    expect(consoleErrorSpy).to.be.called;
+                    expect(consoleErrorSpy.getCall(0).args[0].message).to.contain('some connection error');
+                });
+                it('Should  call console.error after generic error', function () {
+                    expect(consoleErrorSpy).to.be.not.called;
+                    ppclient.fireGenericErrorEvent('some generic error');
+                    expect(consoleErrorSpy).to.be.called;
+                    expect(consoleErrorSpy.getCall(0).args[0].message).to.contain('some generic error');
+                });
+            });
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/wct.conf.json b/wct.conf.json
new file mode 100644
index 0000000..1dc1214
--- /dev/null
+++ b/wct.conf.json
@@ -0,0 +1,20 @@
+{
+  "verbose": false,
+  "trackConsoleError": false,
+  "plugins": {
+    "local": {
+      "browsers": ["chrome", "firefox"]
+    },
+    "sauce": {
+      "disabled": false,
+      "browsers": [{
+        "browserName": "MicrosoftEdge",
+        "platform": "Windows 10"
+      },
+      {
+        "browserName": "safari",
+        "platform": "macOS 10.13"
+      }]
+    }
+  }
+}