Error monitoring tool for recording videos & screenshots of user sessions


Capturing screenshots

Post Reply

Post by dimehb »

I get an error message when I want to capture a screenshot with this config. 
var logger = window.RC && new RC.Logger({
            applicationId: "myKey",
            recordUserActions: true,
            recordSessionVideo: true,
            logResourceLoadFailures: true,
            logAjaxRequests: true,
            captureScreenshot: true,
            showUI: true,
            data: {
                company: "MyCompany"
                userName:"MyUser"
            }
        })

Uncaught (in promise) TypeError: Cannot read property 'stack' of null
at i.<anonymous> (rootcause-full-extjs.js?_=1566196820009:10)
at Array.forEach (<anonymous>)
at i.createStackingContexts (rootcause-full-extjs.js?_=1566196820009:10)
at i.<anonymous> (rootcause-full-extjs.js?_=1566196820009:10)
at rootcause-full-extjs.js?_=1566196820009:10

(anonymous) @ rootcause-full-extjs.js?_=1566196820009:10
i.createStackingContexts @ rootcause-full-extjs.js?_=1566196820009:10
(anonymous) @ rootcause-full-extjs.js?_=1566196820009:10
(anonymous) @ rootcause-full-extjs.js?_=1566196820009:10
Promise.then (async)
i @ rootcause-full-extjs.js?_=1566196820009:10
doScreenshot @ rootcause-full-extjs.js?_=1566196820009:10
screenshot @ rootcause-full-extjs.js?_=1566196820009:10
(anonymous) @ rootcause-full-extjs.js?_=1566196820009:10
collectCrashData @ rootcause-full-extjs.js?_=1566196820009:10
collectCrashData @ rootcause-full-extjs.js?_=1566196820009:10
e.<computed> @ rootcause-full-extjs.js?_=1566196820009:10
collectCrashData @ rootcause-full-extjs.js?_=1566196820009:10
e.<computed> @ rootcause-full-extjs.js?_=1566196820009:10
collectCrashData @ rootcause-full-extjs.js?_=1566196820009:10
e.<computed> @ rootcause-full-extjs.js?_=1566196820009:10
handleError @ rootcause-full-extjs.js?_=1566196820009:10
onError @ rootcause-full-extjs.js?_=1566196820009:10
error (async)
addErrorListeners @ rootcause-full-extjs.js?_=1566196820009:10
start @ rootcause-full-extjs.js?_=1566196820009:10
start @ rootcause-full-extjs.js?_=1566196820009:10
e.<computed> @ rootcause-full-extjs.js?_=1566196820009:10
start @ rootcause-full-extjs.js?_=1566196820009:10
e.<computed> @ rootcause-full-extjs.js?_=1566196820009:10
init @ rootcause-full-extjs.js?_=1566196820009:10
init @ rootcause-full-extjs.js?_=1566196820009:10
e.<computed> @ rootcause-full-extjs.js?_=1566196820009:10
init @ rootcause-full-extjs.js?_=1566196820009:10
e.<computed> @ rootcause-full-extjs.js?_=1566196820009:10
RC.Logger @ rootcause-full-extjs.js?_=1566196820009:10
ErrorLogger.init @ Index?v=xmNecjKITfdZPTUnn0PE-yqBlkcXx9Jigl3iqRX2pqc1:189855
fire @ Base?v=J6ml6xMyD10orcJTVvU1PRTOd7sNVLLa0LZFhOd5QJg1:3075
fireWith @ Base?v=J6ml6xMyD10orcJTVvU1PRTOd7sNVLLa0LZFhOd5QJg1:3187
done @ Base?v=J6ml6xMyD10orcJTVvU1PRTOd7sNVLLa0LZFhOd5QJg1:9081
script.onload.script.onreadystatechange @ Base?v=J6ml6xMyD10orcJTVvU1PRTOd7sNVLLa0LZFhOd5QJg1:9578
load (async)
send @ Base?v=J6ml6xMyD10orcJTVvU1PRTOd7sNVLLa0LZFhOd5QJg1:9563
ajax @ Base?v=J6ml6xMyD10orcJTVvU1PRTOd7sNVLLa0LZFhOd5QJg1:8983
jQuery.<computed> @ Base?v=J6ml6xMyD10orcJTVvU1PRTOd7sNVLLa0LZFhOd5QJg1:9128
getScript @ Base?v=J6ml6xMyD10orcJTVvU1PRTOd7sNVLLa0LZFhOd5QJg1:9115
ErrorLogger.initialize @ Index?v=xmNecjKITfdZPTUnn0PE-yqBlkcXx9Jigl3iqRX2pqc1:189829
(anonymous) @ Index?v=xmNecjKITfdZPTUnn0PE-yqBlkcXx9Jigl3iqRX2pqc1:190231
fire @ Base?v=J6ml6xMyD10orcJTVvU1PRTOd7sNVLLa0LZFhOd5QJg1:3075
fireWith @ Base?v=J6ml6xMyD10orcJTVvU1PRTOd7sNVLLa0LZFhOd5QJg1:3187
ready @ Base?v=J6ml6xMyD10orcJTVvU1PRTOd7sNVLLa0LZFhOd5QJg1:3394
completed @ Base?v=J6ml6xMyD10orcJTVvU1PRTOd7sNVLLa0LZFhOd5QJg1:3424
Any ideas how to solve this?

Post by mats »

Hmm no, never seen this. Do you have it running online somewhere that we can inspect?

Post by dimehb »

Sure but you'll need to do a few steps to get there, and I know you're not a big fan of doing such kind of things.

If I put a conditional breakpoint in the createStackingContexts, this is the object which has an empty parent: 
i {node: body#ext-element-1.fixed-topbar.fixed-sidebar.dashboard.sidebar-collapsed.x-webkit.x-chrome.x-windo…, parent: null, stack: null, bounds: null, borders: null, …}
backgroundClip: []
backgroundImages: null
borders: null
bounds: null
clip: []
colors: {}
computedStyles: CSSStyleDeclaration { …}
isPseudoElement: false
node: body#ext-element-1.fixed-topbar.fixed-sidebar.dashboard.sidebar-collapsed.x-webkit.x-chrome.x-windows.x-desktop.x-body.x-keyboard-mode.theme-sdtd.color-default.x-scroller
offsetBounds: null
opacity: null
parent: null
stack: null
styles: {display: "block", visibility: "visible"}
transformData: null
transformMatrix: null
visibile: true
visible: true
__proto__: Object
This corresponds to the body element inside the iframe.

The only noteworthy exception to the guides is that I conditionally load this script via jQuery. 
$.getScript("https://app.therootcause.io/rootcause-full-extjs.js", this.init.bind(this));
We made the error logger configurable, which is why we don't add it to the document by default. Any off chance this might be causing the issue?

Post by mats »

Very hard to say. Is your app running inside an iframe? Would need to reproduce it to know more.
Post Reply