- Notifications
You must be signed in to change notification settings - Fork5
Painless and agnostic front-end bug reporting. Collect logs, errors, clicks, and session data easily.
License
perry-js/perry
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Perry.js is an Agnostic Bug Reporter tool that you can just plug in any website.
It allows you to record bug reports in web applications regardless of how they're built. It supports a programmatic API but also comes with a Preact Widget that can be loaded on the fly (thanks to Webpack Code Splitting).
You can learn more about it's capabilities athttps://perry-js.netlify.com/
Perry.js is still in active development and can be experimented in internal environments.
We still do not recommend Perry for log transporting, but we do recommend giving it a try for QA bug reporting.
You can find some implementation examples in these repo's:
- React(using CDN):https://github.com/perry-js/perry-react-cdn-example
- Vanilla(using CDN):https://github.com/perry-js/perry-vanilla-parcel-example
- Vue(using CDN):https://github.com/perry-js/perry-vue-cdn-example
More examples are being built currently too.
You can track these implementations here:#52
Disclaimer: We still didn't deployed Perry into a CDN.
Meanwhile, you can experiment using the current netlify build.
<scriptsrc="https://perry-js.netlify.com/bundle.js"></script><script>/* This is an example plugin for handling perry's report */functionConsoleLogPlugin(reportInfo){console.log("[Perry Report Info]:",reportInfo);console.log("[Perry Report Info]:",["","This was printed by the ConsoleLogPlugin.","It is implemented inline into this test page.","To know more about how to implement a Perry Plugin:","Checkout this page src code or the github repository."].join("\n"));alert(["[Perry Report Info]: Please check your console logs to see the recording report.","Sorry for the alert as well, we'll get rid of it soon! <3"].join("\n"));}/* Initialize Perry.js */constperry=newwindow.Perry({/* Enables log recording */log:true,/* Enables click recording */clicks:true,/* Enables screen recording */enableScreenRecording:true,/* Plugins are ways to handle the bug reporting submission */plugins:[ConsoleLogPlugin]});(async()=>{/* Starts Perry Recorder */awaitperry.start();/* Stops Perry Recorder */awaitperry.stop();/* Submit's Perry Report */awaitperry.submit({title:'test-report',description:'A test report'});/* You can aso render Perry Widget for UI Control */awaitperry.render();})();</script>
Disclaimer: We still didn't deployed Perry into NPM properly.
This documentation is stated here as a demonstration of how it will look like.
npm install --save perryjs
importPerryfrom'perryjs';/* This is an example plugin for handling perry's report */functionConsoleLogPlugin(reportInfo){console.log("[Perry Report Info]:",reportInfo);console.log("[Perry Report Info]:",["","This was printed by the ConsoleLogPlugin.","It is implemented inline into this test page.","To know more about how to implement a Perry Plugin:","Checkout this page src code or the github repository."].join("\n"));alert(["[Perry Report Info]: Please check your console logs to see the recording report.","Sorry for the alert as well, we'll get rid of it soon! <3"].join("\n"));}/* Initialize Perry.js */constperry=newPerry({/* Enables log recording */log:true,/* Enables click recording */clicks:true,/* Enables screen recording */enableScreenRecording:true,/* Plugins are ways to handle the bug reporting submission */plugins:[ConsoleLogPlugin]});(async()=>{/* Starts Perry Recorder */awaitperry.start();/* Stops Perry Recorder */awaitperry.stop();/* Submit's Perry Report */awaitperry.submit({title:'test-report',description:'A test report'});/* You can aso render Perry Widget for UI Control */awaitperry.render();})();
| Method | Signature | Description |
|---|---|---|
constructor | new Perry(options: PerryOptions): Perry | Returns an instance of Perry. |
notify | perry.notify(error: Error): Promise<void> | A programatic API so you can let perry know of errors without it having to catch them. Useful when handling errors. |
render | perry.render(): Promise<void> | Fetches the Perry Widget component, appends a#perry-widget element into the document body and renders Perry Widget inside of it. |
start | perry.start(): Promise<void> | Tries to start the perry watcher. If something goes wrong, it will stop it and throw an error. |
stop | perry.stop(): Promise<void> | Stops the perry watcher. |
submit | perry.submit(reportInfo: IPerryReportInfo): Promise<IPerryReport> | Aggregates the whole reporting session into the structure defined in theIPerryReport interface, invokes all plugins giving it as an argument and then returns it. Resolves after executing all the plugins configured. |
| Option | Description | Type | Default |
|---|---|---|---|
log | Enablesconsole.log() calls to be monitored | boolean | false |
warn | Enabledconsole.warn() calls to be monitored | boolean | true |
error | Enabledconsole.error() calls to be monitored | boolean | true |
clicks | Enables a listener ondocument.onclick with screen and viewport information | boolean | false |
cookies | Returns the customer browser cookies in the final report | boolean | false |
localStorage (WIP) | ReturnslocalStorage data in the final report | boolean | false |
sessionStorage (WIP) | ReturnssessionStorage data in the final report | boolean | false |
clearOnReload | Will clear the perry store everytime you reload it's instance | boolean | false |
clearOnStart | Will clear the perry store everytime you start a bug reporting session | boolean | true |
ignoreScriptErrors | Ignore's external script error messages. | boolean | false |
enableScreenRecording | Enables Screen Recording through the MediaDevices and MediaRecorder API's. | boolean | true |
plugins | Allows you to inject handlers for the reports generated by Perry. (e.g.: You can send data to your API using it). | ReadonlyArray<(reportInfo: PerryReportInfo) => void> | [] |
See the CONTRIBUTING.md file.
- Armando Magalhaes (armando.mag95@gmail.com)
- Guilherme Lima (guilhermelimak@gmail.com)
- Vitor Margis (vitor@margis.com.br)
- Jean Baudin (baudin.jean@gmail.com)
- Nayara Alves
- Iago Angelim Cavalcante (iagoangelimc@gmail.com)
Perry is licensed under MIT.
About
Painless and agnostic front-end bug reporting. Collect logs, errors, clicks, and session data easily.
Topics
Resources
License
Code of conduct
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors7
Uh oh!
There was an error while loading.Please reload this page.