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
// [email protected] => 5f01963068b91474d92c6867ba46d952
// [email protected] => 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()
(function(i,n,s,t,a,b,u,g){
    u=i.ibgSdk=g={};u.init=function(z){g=z};a=n.getElementsByTagName('head')[0];
    b=n.createElement('script');b.async=1;b.onload=function(){u=i.ibgSdk;!!g
    &&u.init(g);g.callback&&g.callback()};b.src=s+'-'+t+'.min.js';a.appendChild(b);
})(window,document,'https://instabug.mohamedhegazy.com/static/instabugsdk','1.1.8');

ibgSdk.init({
    token: 'a5910f2df0ad8a695c0319bcee492993',
    callback: function() {}
});

window._instabug = {
    token: 'a5910f2df0ad8a695c0319bcee492993'
};
// {token:"a5910f2df0ad8a695c0319bcee492993",v:'1.1.0'};

(function(i,n,s,t,a,b,u,g){
    g={token:"a5910f2df0ad8a695c0319bcee492993",v:'1.1.0'};a=n.getElementsByTagName('head')[0];
    b=n.createElement('script');b.async=1;b.src=s+'-'+g.v+t;i._instabug=g;a.appendChild(b);
})(window,document,'https://127.0.0.1:3000/static/js/bundle.js?','.min.js?1486903903');

Notes

• Chrome Extension: gbhnbcggjeokebhgalmgkbhkabpjmnda