How to log only heavy ad intervention errors with Sentry? - javascript

Now i am using following config:
<script src="https://browser.sentry-cdn.com/7.35.0/bundle.min.js" integrity="sha384-uwCOEtT/vtuzGz5QiQB6J1L3YFYSbznHZGi3B5Vc6+bnyGS3O9nnDfh6dCvLrQ7X" crossorigin="anonymous"></script>
<script src="https://browser.sentry-cdn.com/7.35.0/reportingobserver.min.js" integrity="sha384-IpI7+T3lCLEWg9wsg2Mjw8tT6/6rUrOUc8AXGFSSOuuuYXWzbwOv1thNsthhzvN+" crossorigin="anonymous"></script>
<script>
Sentry.init({
dsn: "https://xxx#xxxx.ingest.sentry.io/xxx",
sampleRate: 1,
tracesSampleRate: 1,
integrations: [new Sentry.Integrations.ReportingObserver(
{
types: ['intervention']
}
)],
});
</script>
And Sentry logs JS "Errors" + "Intervention" messages just fine, except one moment.
There are no so called "heavy ad interventions" (https://developer.chrome.com/blog/heavy-ad-interventions/) issues in logs.
But I am sure 100% that that kind of errors happens, because I saw them in my console.
I think that the problem could be that those "heavy ad intervention" errors appears only after some time after page DOM was loaded.
Anyone tried to catch those "heavy ad intervention" error with Sentry? How?

you need to wrap the code in a try-catch block and send the error to Sentry:
try {
// Your code here
} catch (error) {
Sentry.captureException(error);
}

Related

Global Constants in background_worker.js and popup.js - Chrome Extention v3

I really want to share constants with all my js files, background_serviceworker.js and popup.js.
const EXTENSION_MODE = {
SEARCH_ONLY: "searchOnly",
FILTER: "filter",
OFF: "off"
}
Just putting vars in the background_serviceworker.js and using getBackgroundPage() seems a bit messy to me (can make the background file very big).
I created constants.js.
// constants.js
var EXTENSION_MODE = Object.freeze({
SEARCH_ONLY: "searchOnly",
FILTER: "filter",
OFF: "off"
})
Inject it to the background-service-worker file (using an answer from here Service worker registration failed. Chrome extension to actually see the errors from the injected script. Without, you only see very general error)
// background.js
try { importScripts("constants.js"); } catch (e) { console.error(e); }
Now popup.js still don't have access to that, because it runs in isolated contexed.
So I Also injected it to the popup.html (In the good old fashion way).
<!-- popup.html -->
<body>
<some-other-elements/>
<script src="./constants.js"></script>
<script src="./popup.js"></script>
</body>
And I can use it in popup.js
// popup.js
console.log("popup: " + EXTENSION_MODE.FILTER);
PS. on content scripts (injected using the chrome.scripting.executeScript), we won't use it. There we need to start using Storage and Messaging https://developer.chrome.com/docs/extensions/reference/storage/
https://developer.chrome.com/docs/extensions/mv3/messaging/

How to catch *all* errors and exceptions with Sentry?

Out of 24 errors that appear in the console of my page in Chrome, Sentry only records one.
I have followed the documentation and ensured that Sentry is loaded and initialized in the <head> of the page, after jQuery, but before our CMS vendor code and custom bundles:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://browser.sentry-cdn.com/5.8.0/bundle.min.js" crossorigin="anonymous"</script>
<script>
Sentry.init({
dsn: "https://...#.../..."
});
</script>
<script src="..."></script>
I have also patched Sentry as described here to copy console.error() with Sentry.captureMessage(), so that I am now seeing three messages in Sentry.
But I am still struggling with three types of errors:
Uncaught TypeError
error in a JS file coming from our CMS
some very particular <img> srcset errors
As regards the srcset errors: I have already added onerror handlers to the images. They are called in some cases, but not in this particular case (the srcset attribute has a space in the filename which violates the syntax); admittedly, this problem should rather be reported to the Chrome dev team than fixed in Sentry.
I have tried to capture these errors myself and redirect them manually to Sentry, but none of the following listeners even catches them in Chrome (sorry for the .join(), just test code, I didn't beautify it):
window.onerror = function (errorMsg, url, lineNumber) {
alert(["window.onerror", errorMsg, url, lineNumber].join());
return true;
};
window.addEventListener("unhandledrejection", function (e) {
alert(["window: Unhandled Rejection", e.reason.message].join());
});
window.addEventListener("rejectionhandled", function (e) {
alert(["window: rejectionhandled", e.reason.message].join());
});
window.addEventListener("error", function (e) {
alert(["window: Error", e.reason.message].join());
});
$.error = function (message) {
alert(["jQuery error", message].join());
};
So: am I missing anything (some Sentry config setting, other browser events that I should capture, etc.)?

Saving and restoring current view state of a Tableau graph through javascript API

The problem:
How can I store - and then later retrieve - the custom state of a Tableau view through the javascript-API?
Description:
I am working on a site where we currently allow any user to collaborate a set of Tableau views into a PowerPoint-like online presentation for later use. In our current implementation, the state of the Tableau graphs are not stored, and the user therefore has to apply his or hers desired filter, select worksheets etc. while holding the presentation - every time. This is what we now would like to avoid.
The easiest solution for this would be to store and retrieve one of the "Share"-links accessed through the bottom bar interface; these links contains the state of the current view, but so far, we have not been able to do this: firstly, due to domain issues, we cannot simply fetch the Share-links from the embed-code iframe; and secondly, the API-method workbook.getUrl() does not seem to include the state of the current view.
I am currenty looking into the workbook.rememberCustomViewAsync(name) and workbook.showCustomViewAsync(name) methods, which seem like a possible solution. However, I cannot seem to get any sensible results from either of these two methods, as they both end up giving obscure, non-informative 500 errors when run.
An example file, and the errors:
To better illustrate this issue, I have created a minimal demo (snippet below) that attempts to use the second method described above. When opened in Google Chrome, neither of the two buttons ('save state' and 'retrieve state') work for me, and the following errors can be seen in the Developer Tools (the http response message and developer console output, respectively):
Http response:
<br>
2015-11-11 16:14:17.916
(VkNpWQrCQaIAACQo2YYAAAPi,0,0)
Console error:
POST http://public.tableau.com/vizql/w/Book6_426/v/YRKE/save_customized_view/sessions/208A699D34E14708A2268AA10A827C99-0:0 500 (Internal Server Error)
Does anyone know how I can solve this issue, either by making the provided code example work (the second method described), or through any other means? Any help would be appreciated!
PS: The snippet simulator here will cause a Access-Control-Allow-Origin error. The file has also been published here.
<html>
<head>
<title>A simple Tableau API demo</title>
<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau_v8.js"></script-->
<script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau-2.min.js "></script>
</head>
<body>
<H2>Custom view storage demo</H2>
<button id="remember-button">
Remember state 'test'
</button>
<button id="retrieve-button">
Retrieve state 'test'
</button>
<div id="viz-placeholder" style="width: 1000px; height: 1000px; display: block;"></div>
<script>
// Render tableau graph
function initializeViz() {
var placeholderDiv = document.getElementById("viz-placeholder");
var url = "https://public.tableau.com/views/Book6_426/YRKE";
var options = {
width: placeholderDiv.offsetWidth,
height: placeholderDiv.offsetHeight,
hideTabs: true,
hideToolbar: true,
onFirstInteractive: function() {
workbook = viz.getWorkbook();
activeSheet = workbook.getActiveSheet();
}
};
viz = new tableau.Viz(placeholderDiv, url, options);
}
$(initializeViz)
// Assign and set up button actions for storing and retrieving the custom view
var customViewName = "test";
$('#remember-button').click(function() {
console.log("Remembering: ", customViewName);
// Try to save state, or print error
viz.getWorkbook().rememberCustomViewAsync(customViewName).otherwise(function(err) {
console.log("An error occured:");
console.log(err);
});
});
$('#retrieve-button').click(function() {
console.log("Retrieving: ", customViewName);
// Try to retrieve state, or print error
viz.getWorkbook().showCustomViewAsync(customViewName).otherwise(function(err) {
console.log("An error occured:");
console.log(err);
});
});
</script>
</body>
</html>
Okey, so I have been in contact with Tableau Customer Support, and they seem to have found the issue.
Apparently, certain elements of the javascript-API is only available for Tableau Online and Tableau Server - not Tableau Public.
In other words, the function workbook.rememberCustomViewAsync('customViewName') is not supported for graphs hosted by Tableau Public - such as the one used in the example above (https://public.tableau.com/views/...).

how to catch ALL javascript errors with window.onerror? (including dojo)

this question is a follow-up to javascript: how to display script errors in a popup alert? where it was explained how to catch regular javascript errors using:
<script type="text/javascript">
window.onerror = function(msg, url, linenumber) {
alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
return true;
}
</script>
I tried it and found out that dojo erros like this one:
TypeError: this.canvas is undefined dojo.js (Row 446)
were not reported using this method, which leads me to my question:
How can I report all javascript errors using window.onerror (especially dojo errors)?
It could be Dojo is using proper Error handling methods (i.e. try-catch blocks) which prevents the exception from bubbling up and reaching the window container, on which you have registered the error handler.
If so, there is no way for you to do this. No error is going past the catch block, so no error handler is being called.
As pointed out by the comments, you can also use browser-specific debugging APIs like the Venkman hook and do break-on-error -- a solution that usually only works for privileged code (thanks to #Sam Hanes).
You can also do On(require, 'error', function () {}); to add error handling on DOJO's asynchronous script loader -- another point mentioned in the comments by #buggedcom
you can write code like this:
var goErrHandler=window.onerror;
goErrHandler= function(msg, url, linenumber) {
console.log('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
return true;
}
goErrHandler();
so in console you'll see some thing like this :
Error message: undefined
URL: undefined
Line Number: undefined
The better solution is to use try/catch, e.g.
try{
if(a=='a'){
}
}catch(e){
alert(e);
//or send to server
new Image().src='errorReport.php?e='+e;
}
Google Plus seems to use this.

Programmatically access webpage error details in browsers

Is there some way to access webpage warning/error details using JavaScript?
For instance, errors in IE show up in the bottom left corner like so:
I would like to able to access the details of this error (in IE as well as other browsers if possible) using JavaScript.
Any suggestions?
EDIT: I'm not looking for debuggers. I want to access the content of the error details/error console. Alternately, figuring out how to create a global exception handler equivalent for JavaScript would help too
You may want to use the window.onerror event. You can consider this event as a sort of global exception handler. The value returned by onerror determines whether the browser displays a standard error message. If you return false, the browser displays the standard error message in the JavaScript console. If you return true, the browser does not display the standard error message. (Source)
<script type="text/javascript">
window.onerror=function(msg, url, line){
alert('An error has occurred' + msg);
return true;
}
</script>
<script type="text/javascript">
// Syntax error
document.write('hi there'
</script>
You can also use traditional exception handling in JavaScript to catch run-time errors.
try
{
document.write(junkVariable)
}
catch (exception)
{
document.write(exception)
}
The output of the above would be:
‘junkVariable’ is undefined
EDIT: As noted by psychotik's comment, the window.onerror event does not work in Google Chrome. (Source)

Categories

Resources