Error-Tracer
Error-Tracer will help to trace client errors.
-
Collect client error.
Users don't report an error. They just go away and forget the error. -
Capture the source code when error occurred.
Sometimes source codes are overwritten. So it makes difficult to recognize what has been the problem. -
Snapshot of user's environment when error occurred.
What was the user browser? What was the data in local/sessionStorage or cookie? What time was error occurred?
Install
npm install --save error-tracer
yarn add -D error-tracer
or browser
<script src="https://unpkg.com/error-tracer@latest/dist/errortracer.bundle.js"></script>
Import
import ErrorTracer from 'error-tracer';
const ErrorTracer = require('error-tracer');
or browser
<script src="https://unpkg.com/error-tracer@latest/dist/errortracer.bundle.js"></script>
Usage
with Constructor
Note that default trigger error events are 'error', 'unhandledrejection', 'rejectionhandled'
.
- object (you can set triggers(error), callback, apiURL, sourceRange and ignores)
new ErrorTracer({
triggers: ['my_custome_error1', 'other_error'], // error events which observed
callback: function(e) { console.log(1, e) },
apiURL: "http://aaa.com",
sourceRange: 30, // line range will be captured (default: 10)
ignores: "error_message"
// ignores: ["Custom_Error1", Customer_Error2"]
// detail: userId, // # you can set extra detail information
});
- function (you can set just only callback function)
new ErrorTracer(function (errorItem) {
console.error("this is handled by error-tracer", errorItem);
});
- string (you can set just apiURL which get report)
new ErrorTracer("http://xxx.com..."); // ErrorTracer Item will be posted
with init method
same usage with constructor
const errorTrace1 = new ErrorTracer();
errorTrace1.init(function (errItem) {
console.log("errItem: ", errItem);
});
API
Methods
Name | Type | parameter | description |
---|---|---|---|
init(parameter) | Function | object, function, string | Initialize ErrorTracer |
active() | Function | none | Activate ErrorTracer (default: true) |
deactive | Function | none | Deactivate ErrorTracer |
history | Array[Object] | none | ErrorTracer History |
Parameters for init
Name | Type | description | Example |
---|---|---|---|
triggers | Array[String] | Error events will be observed. default ['error', 'unhandledrejection', 'rejectionhandled'] |
['my_custome_error1', 'other_error'] |
callback | Function | callback function for errorItem | function(e) { console.log("ErrorTracer Catch:" ,e); } |
apiURL | String | if assigned, errorItem will be passed | "https://zapier..." |
sourceRange | Integer | The range of source code will be captured at around error | 30 (Above 15 lines and Below 15 lines) |
ignores | Array[String] | Error message will be ignored in ErrorTracer | ["Custom_Error1", Customer_Error2"] |
detail | Information what you want to add | userId, sessionId, remote_ip,... whatever |
ErrorTracer will return below information
Below errorItem will be passed to callback/apiURL.
Name | Type | Description |
---|---|---|
errorId | String | Unique Error Id |
clientId | String | Unique Client Id |
error | Object | Original Error Event Object |
location | String | Location which error occurred |
source | Array[Object] | Source code around of error. Object contains 'lineNo' and 'content' |
errorLineNo | Integer | Line number of source code |
environment | Object | navigator, localStorage, sessionStorage, cookie |
detail | detail info which you set | |
timeStamp | Time | Date.now() |
ErrorTracer History
const errorTracer = new ErrorTracer(function(errorItem) {
console.log("error occured: ", errorItem);
});
// history, result is array
console.log(errorTracer.history);
Example #1 (Send ZapierWebHook)
You can easily collect error with Zapier. Trigger with "Catch Hook" and make action like "Send Gmail".
<script>
document.querySelector("#triggerError")
.addEventListener("click", function () {
notExist(); // make Error
});
const url = "http://xxxx..."; // Your Zapier Webhook URL
new ErrorTracer({
apiURL: url,
});
// or simpley
new ErrorTracer(url);
</script>
Now when Error occured, you can get report via Gmail about the error.
Author
License
MIT