Web Extensions Error Reporter catches global errors, shows notifications and opens error reporter in one click
There is some mess in how you catch errors in a web-extension:
'use strict'; // Only if you don't use ES6 modules.
/*
bg-window — background window, main window of a web-extension.
non-bg-windows — popup, settings and other pages windows of a web-extension, that are not bg-window.
*/
window.addEventListener('error', (errorEvent) => {/* ... */});
// Case 1
throw new Error('Root (caught only in bg-window, not caught in non-bg windows');
// Case 2
setTimeout(
() => { throw new Error('Timeouted root (caught by handlers'); },
0,
);
// Case 3
chrome.tabs.getCurrent(() => {
throw new Error('Chrome API callback (not caught by handlers)');
});
// Case 4
chrome.tabs.getCurrent(() => setTimeout(() => {
throw new Error('Timeouted Chrome API callback (caught by handlers)');
}, 0));
// Case 5
chrome.tabs.getCurrent(async () => {
throw new Error(
'Async Chrome API callback (caught by handlers in Chrome, not caught in FireFox even if timeouted)',
);
});So if you want error catchers to work — your code must be wrapped in setTimeout.
This behavior may be a bug and is discussed in https://crbug.com/357568.
Now let's look how to catch errors with Weer.
'use strict'; // Only if you don't use ES6 modules.
// Import and setup Weer here, see corresponding paragraphs below.
throw new Error('This is caught by Weer, notification is shown, opens error reporter on click');// In popup, settings and other pages.
'use strict'; // Only if you don't use ES6 modules.
chrome.runtime.getBackgroundPage((bgWindow) =>
bgWindow.Weer.ErrorCatchers.installListenersOn({ hostWindow: window, nameForDebug: 'PUP' }, () => {
// Put all your code inside this arrow body (it is timeouted).
// Case 1:
throw new Error('PUPERR (caught by Weer)');
// Case 2:
document.getElementById('btn').onclick = () => {
throw new Error('ONCLCK! (caught by Weer)');
};
// Case 3:
chrome.tabs.getCurrent(Weer.Utils.timeouted(() => {
throw new Error('Timeouted Chrome API callback (caught by Weer)');
}));
})
);
// Case 4:
chrome.tabs.getCurrent(Weer.Utils.timeouted(() => {
throw new Error('Timeouted Chrome API callback (caught by Weer)');
}));
// Case 5
chrome.tabs.getCurrent(async () => {
throw new Error(
'Async Chrome API callback (caught by Weer in Chrome, never caught in FireFox even if timeouted)',
);
});npm install --save weer
tree ./node_modules/weer
weer/
├── cjs // Common JS format: `require(...)`
│ ├── error-catchers.js
│ ├── get-notifiers-singleton.js
│ ├── index.js
│ └── utils.js
├── esm // EcmaScript Modules format: `import ...`
│ ├── error-catchers.js
│ ├── get-notifiers-singleton.js
│ ├── index.js
│ └── utils.js
├── package.json
└── umd // Universal Module Definition format: `<script src=...></script>`
├── error-catchers.js // Requires `utils` bundle
├── get-notifiers-singleton.js // Requires `utils` bundle
├── index.js // All in one bundle, no dependencies
└── utils.jsFor webpack, rollup, etc.
import Weer from 'weer';If you need only a part of the API:
import Utils from 'weer/esm/utils';
import ErrorCatchers from 'weer/esm/error-catchers';
import GetNotifiersSingleton from 'weer/esm/get-notifiers-singleton';$ cp ./node_modules/weer/umd/index.js ./foo-extension/vendor/weer.js
$ cat foo-extension/manifest.json
...
"scripts": [
"./vendor/optional-debug.js",
"./vendor/weer.js",
...
],
..."permissions": [
"notifications",
...
],'use strict'; // Only if you don't use ES6 modules.
// For EcmaScript modules (node_modules/weer/esm) and CommonJS (node_modules/weer/cjs):
// 1. Import Weer somehow.
// 2. window.Weer = Weer; // Expose for non-bg windows (popup, settings, etc.).
Weer.install({
// Required:
sendReports: {
toEmail: 'homerjsimpson@example.com',
inLanguages: ['en'], // In what languages to show report template.
},
// Optional:
extErrorIconUrl: 'https://example.com/img/ext-error-128.png',
pacErrorIconUrl: 'https://example.com/img/pac-error-128.png',
maskIconUrl: 'https://example.com/img/mask-128.png',
});- Bundle visionmedia/debug for your environment and export global
debug. - Enable it by
debug.enable('weer:*')in extension background window and reload extension.
See examples of setups for webpack, rollup or without bundlers.
clone this repo
npm install
cd examples
npm start
ls dist <- Load as unpacked extension and play (tested on Chrome).
Chrome: yes.
Firefox: yes, but notifications are not sticky, unhandled proimise rejections are never caught, clicking notifications sometimes doesn't work.
See API.md.
You are welcome to propose issues, pull requests or ask questions.
By commiting your code you agree to give all the rights on your contribution to Ilya Ig. Petrov.
For credits of used assets see https://github.com/error-reporter/error-reporter.github.io
The product is dual-licensed under GPL-3.0+ and commercial license. To obtain commercial license contact Ilya Ig. Petrov.