Sho[o]tEm Unofficial Instabug Web SDK
Instabug WEB SDK Clone with missing features.
Background
We have 4 main functionality:
- capture the page.
- annotating or drawing on the shot.
- capture user data and collect input.
- sending to instabug backend.
Issues
Whats wrong with current impelementation ]
- Promise dosn't polyfilled so screen capture dosn't work in IE [http://caniuse.com/#feat=promises].
- Not giving back respose if page take long to capture (due speed of internet). And shall give a way to cancel.
- No code spliting, don't load all code at one for ex. capturer only needed when we starting the report.
- Scrolling Proplem: we shall prevent user scroll while bug reporting.
- No support for mobile (UI and touch drawing).
- In screen captcher html2canvas:
- some problems with css.
- many proplems with custom scrolling.
- Arabic text
- Video
- Iframes [big problem]
- SVG [need sceond look up]
Posable Solutions
- for polyfill, its simple just polyfill it.
- for feedback while capturing, give feedback; but giving way to cancel its problem with promises, we could cancel user interface and ignore the result or dig more and change html2canvas to implement cancellation token.
- for separate javascript screen capture, could we?
- for scrolling proplem, do it like every modal libraries do it; add class to body that hide the overflow.
- for mobile support, more work :).
- for screen capture, dig for gold.
Added Fueatures
- support mobile ui and touch drawing.
- pen color and size.
- detect shape drawing, for now just rectangels.
Things to imporove
- smooth drawing path.
- detect the rest of basic shapes.
- cptcure videos.
Deps
production
- domReady
- HTML2Canvas
- @TBD
Developments
- babel
- webpack 2
- postcss
- @TBD
Run & Build
install deps
$ yarn install
start in dev mode
$ yarn start
build and start preview server
$ yarn start:prod
just build
$ yarn build
build and start stats interactive mode
$ yarn build:stats
Exposed API
Instabug Web SDK API {ibgSDK}
current | suggestion | description |
---|---|---|
init | ok, may take setting not just token | |
reportBug | ok | |
resetAndClose | ok, change to: close/closeBugReport | |
instabugLog | ok, change to: log | |
userData | ok, Ummm! change the name | add user data |
getLogs | Ummm! not exposed | |
submitReport | not exposed | |
ViewSubmitView | not exposed | |
downloadExtension | not exposed | |
takeScreenShotFromJavaScript | not exposed | |
getLocalStorage | not exposed | undefined |
Embeding Script
// instabug sdk preview => c48e32c9888e063a107eb5d6ad75e70a// mohamed.h.hegazy@gmail.com => 5f01963068b91474d92c6867ba46d952// mohamed@mohamedhegazy.com => a5910f2df0ad8a695c0319bcee492993// https://instabug.mohamedhegazy/static/sdk// https://s3.amazonaws.com/instabug-pro/sdk_releases/instabugsdk-1.1.0.min.js?1489404010// https://127.0.0.1:3000/static/js/bundle.js? // put this wherever you like but before ibgSdk.init(){ u=iibgSdk=g={};u{g=z};a=n0; b=n;basync=1;b{u=iibgSdk;!!g &&u;gcallback&&g};bsrc=s+'-'+t+'.min.js';a;}windowdocument'https://instabug.mohamedhegazy.com/static/instabugsdk''1.1.8'; ibgSdk; window_instabug = token: 'a5910f2df0ad8a695c0319bcee492993';// {token:"a5910f2df0ad8a695c0319bcee492993",v:'1.1.0'}; { g=token:"a5910f2df0ad8a695c0319bcee492993"v:'1.1.0';a=n0; b=n;basync=1;bsrc=s+'-'+gv+t;i_instabug=g;a;}windowdocument'https://127.0.0.1:3000/static/js/bundle.js?''.min.js?1486903903';
Notes
- Chrome Extension: gbhnbcggjeokebhgalmgkbhkabpjmnda