shootem

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
// [e-mail] => 5f01963068b91474d92c6867ba46d952
// [e-mail] => 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