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?
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 ErrorTracer from 'error-tracer';
const ErrorTracer = require('error-tracer');
or browser
<script src="https://unpkg.com/error-tracer@latest/dist/errortracer.bundle.js"></script>
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
same usage with constructor
const errorTrace1 = new ErrorTracer();
errorTrace1.init(function (errItem) {
console.log("errItem: ", errItem);
});
| Name | Type | parameter | description |
|---|---|---|---|
| init(parameter) | Function | object, function, string | Initialize ErrorTracer |
| active() | Function | none | Activate ErrorTracer (default: true) |
| deactive() | Function | none | Deactivate ErrorTracer |
| push(error) | Function | error | Manually input error |
| history | Array[Object] | none | ErrorTracer History |
| 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 | Any | Information what you want to add | userId, sessionId, remote_ip,... whatever |
Below errorItem will be passed to callback/apiURL.
ErrorTracer will return 'source' info only when error has the filename and lineNo.
| 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 | Any | detail info which you set |
| timeStamp | Time | Date.now() |
const errorTracer = new ErrorTracer(function(errorItem) {
console.log("error occured: ", errorItem);
});
// history, result is array
console.log(errorTracer.history);
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.
Create an instance in 'main.js' (or any file which vuejs is imported) pass the 'vuejs error' to ErrorTracer.
ErrorTracer will return 'source' info only when error has the filename and lineNo.
Unfortunately ErrorTracer can't return 'source' info with Vue (Vue can't give those info).
// import ErrorTracer
import ErrorTracer from 'error-tracer'
// create errorTracer Instance
const myTracer = new ErrorTracer(function(err) {
console.log("ErrorTracerCathch!: ", err);
})
// Pass the 'Vue Error' to ErrorTracer
Vue.config.errorHandler = function(err, vm, info) {
myTracer.push(err); // <-- Yes Here! :)
}
MIT