PostHog | Brave Browser Event Tracking Issue - javascript

we have implemented Posthog with React and tested the implementation, which is working fine on Chrome and Firefox. But when we are testing it on Brave/Microsoft Edge Browsers it is not working.
We have done some research on this, which says these browsers have default ad blocker feature enabled and I need to manually disable ad blocking.
For resolving Brave browser tracking issue, we have created self hosted cloud front distribution and pass cloud front url in api_host parameter inside posthog.init function but it's not working and I am getting authentication issue. Could you please guide me for the same ?
I have used posthog-js in my react app for tracking events. Everything is working properly on chrome browser but my custom events are not getting triggered on brave browser.
Here is console logs error, please have a look to attached screenshot

The errors in the screenshot are the Brave browser doing its thing and blocking third-party scripts. You can check this using "shields" https://support.brave.com/hc/en-us/articles/360022806212-How-do-I-use-Shields-while-browsing-
I'd recommend you set up a reverse proxy so that traffic to PostHog travels to your own domain. So you would have something like https://my-own-domain.com/e
see https://posthog.com/docs/integrate/proxy
(as in the comment thread above. full disclosure I'm an engineer at PostHog)

Related

JS - Programmatically open DevTools [duplicate]

I'm looking for a way to open the WebKit “developer tools” from a script attached to a web-page. I need solutions for both Google Chrome and Safari, that will open the developer-tools pane if it's not already open, and (hopefully, if you can figure out how) also switch to a particular tab/section of said pane upon opening.
(Use-case, if anyone's interested: I want to open the console.log output-window if there's been an error and a developer is looking at the page; this particular page will be the output of some JavaScript unit-tests.)
I'm setting a bounty on this question because it's obviously one that hasn't been answered to anyone's satisfaction before, and the answer is a hairy one. Please don't answer it unless you have a real answer that both: 1) works in both browsers, and 2) doesn't require private extension APIs that won't work from a static web-page.
See (related, but specific to Chrome, and extensions): Can I programmatically open the devtools from a Google Chrome extension?
Simply: You can't.
The Dev Tools are not sandboxed (unlike any web page), thus granting sandboxed environments the power to open and control an unsandboxed environment is a major security design flaw.
I hope this answers your question :-)
You cannot directly use the Chrome's Dev Tools from your web pages. It is bundled with the browser.
But you can use it like a regular web application. Go to Chrome Developer Tools, then go to Contributing. You will find help on using Dev Tools for your app.
Setting up
Install Chrome Canary on Mac OS / Windows or download the latest Chromium build from the Chromium continuous builds archive on Linux
Clone Blink git repo from https://chromium.googlesource.com/chromium/blink.git
Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)
Running
Run one copy of Chrome Canary with the following command line flags: --remote-debugging-port=9222 --user-data-dir=blink/chromeServerProfile --remote-debugging-frontend="http://localhost:8090/front_end/inspector.html". These flags cause Chrome to allow websocket connections into localhost:9222 and to serve the front-end UI from your local git repo. (Adjust the path to chromeServerProfile to be some writable directory in your system).
Open a sample page (eg www.chromium.org).
Run a second copy of Chrome Canary with the command line flag: --user-data-dir=/work/chromeClientProfile. Open http://localhost:9222. Among the thumbnails you will see the sample page from the other browser instance. Click on it to start remote debugging your sample page.
The DevTools web page that opens is served from the remote-debugging-frontend in the first browser instance, which serves from the git repo your local filesystem. Debug this Devtools Web page and edit its source like any other web app.
I hope this is what you need.
There's no way to control the web developer tool from an in-page script, other than through the Console API which provides mostly logging facilities. Letting scripts control more than that would be a serious security issue, since it would allow a web page to control parts of the browser.
The only API remotely related to what you're trying to do is the debugger command, which switches to the script pane only if the developer tools were already open.
But who are you trying to develop this feature for?
If it's for developers working on the site, then it's better to just use the existing developer tools manually, by setting breakpoints, or the pause on exceptions toggle.
If it's for end users, don't. Unless your site is supposed to be used by highly technical web developers, you're only going to scare away users if the developer tools suddenly pop up with errors.
If you really want to show errors you can implement your own logging framework and the UI for error reporting, which works with basic JS and doesn't depend on a specific browser environment.
here's another answer that proposes a solution to your mentioned use case/objective (detecting errors, getting & displaying console logs) and not the not possible objective in the title.
you can make and use a console wrapper and use it in your code
and/or you can monkey patch the console functions if you use/import external js, but you need to apply it before loading them.
No, Any secure Browser will not allow a script to open an extension, as it leads to insecurity.
But, You may design an Add-On/extension OR Console API's to do the same.. for specific site.
Create an Add-On like this to achieve that requirement.
You can try sending keys 'CTRL' + SHIFT' + 'I'
that may work for Chrome any FireFox (in I.E you need to use 'F12'
I am using it when required as few utils in this add-on use to work better then the built-in.
EDIT:
Now a days Chrome is advanced with many new advancements source.
I hope this helps!
Hate to answer such an old question, but was surprised to not see this as an answer, so I thought I'd add it in case it can help someone in the future.
Assuming you have access to the source code, you can place an alert("open devtools"); statement immediately before the first line you're interested in debugging. This alert will give you an opportunity to open DevTools and set a breakpoint on that first line before clearing the alert thus allowing the code to continue and hitting the breakpoint.

Chrome SecurityError loading jQuery Mobile page from local file system

I get the following error in Chrome when loading a trivially simple html file with a jQuery Mobile reference. The error is not present with just the jQuery reference.
Uncaught SecurityError: Failed to execute 'replaceState' on 'History':
A history state object with URL 'http://stacksnippets.net/js' cannot
be created in a document with origin 'null'.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body></body>
</html>
You can also "Run code snippet" and see the error in the console.
This error did not happen before today. I have not changed my code or method of loading the html file in the browser. It used to work perfectly - I use the same code for all my PhoneGap apps.
Does anyone know if there was a Chrome security update that causes this SecurityError or whether I'm missing something? How would you go about debugging this? Thank you.
UPDATE
This discussion I think points out what is going on, which I suspected, since the error does not appear when running with a web server: Origin null is not allowed by Access-Control-Allow-Origin .
But I am still wondering why this changed in the past day, whether Chrome has had a change in their security policy, or why it was working before, and whether any of my PhoneGap apps will be affected.
This error is same as the origin is null error. This error occurs because of the security feature of Chrome.
A simple solution to test the application is to bypass this security on chrome.
Steps:
create a chrome browser shortcut on desktop.
Close all the instances of chrome on your machine.
Right click on the desktop shortcut of chrome and click on Properties.
in Target field, append " -allow-file-access-from-files" at the end.
Save and close properties.
Open chrome via this shortcut only.
Hurry, the error has gone. App works perfectly.
NOTE: This is just a work-around I use to test my cordova apps on desktop browser for UI testing.
Temporary solution: I've commented out all history.replaceState calls in jquery mobile, didn't need to manipulate browser history in my app anyways.
I wonder if it's chrome security bug or model and future behavior.
On a Mac I was able to fix this by running a webserver instead of loading it from a "file://" url:
http://lifehacker.com/start-a-simple-web-server-from-any-directory-on-your-ma-496425450?utm_expid=66866090-49.VYy4WCNHSyuP6EmjnM93MQ.0&utm_referrer=https%3A%2F%2Fwww.google.com%2F
python -m SimpleHTTPServer 8000
In the directory should make it available from Chrome via 0.0.0.0
I don't seem to have the same problem, not on the stable version of Chrome (45) or the Dev version (47).
However, I have personally seen issues with the CORS header, too. If you can cause the problem to happen reliably, I suggest filing a bug at crbug.com and a Chrome developer will have a look at it.

www-embed-player.js:150 GET chrome-extension://eojlgccfgnjlphjnlopmadngcgmmdgpk/cast_sender.js net::ERR_FAILED [duplicate]

I'm having an error running Chromecast sender in Chrome Incognito or if Chromecast extension is not installed:
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js
No cast extension found
Google cast sender is trying to send AJAX requests for local "cast_sender.js". Should this happen or is there a better way to check if Chromecast sender extension exists (not by requesting AJAX request)?
I believe these AJAX requests are a way of asking if Chromecast extension exists. Is there a better way to check if Chromecast extension exists?
Update: After several attempts, it looks like this may have been fixed in latest Chrome builds (per Paul Irish's comment below). That would suggest we will see this fixed in stable Chrome June-July 2016. Let's see ...
This is a known bug with the official Chromecast JavaScript library. Instead of failing silently, it dumps these error messages in all non-Chrome browsers as well as Chrome browsers where the Chromecast extension isn't present.
The Chromecast team have indicated they won't fix this bug.
If you are a developer shipping with this library, you can't do anything about it according to Chromecast team. You can only inform users to ignore the errors. (I believe Chromecast team is not entirely correct as the library could, at the least, avoid requesting the extension scipt if the browser is not Chrome. And I suspect it could be possible to suppress the error even if it is Chrome, but haven't tried anything.)
If you are a user annoyed by these console messages, you can switch to Chrome if not using it already. Within Chrome, either:
Install the Chromecast extension from here.
Configure devtools to hide the error message (see David's answer below).
Update [Nov 13, 2014]: The problem has now been acknowledged by Google. A member of the Chromecast team seems to suggest the issue will be bypassed by a change the team is currently working on.
Update 2 [Feb 17, 2015]: The team claim there's nothing they can do to remove the error logs as it's a standard Chrome network error and they are still working on a long-term fix. Public comments on the bug tracker were closed with that update.
Update 3 [Dec 4, 2015]: This has finally been fixed! In the end, Chrome team simply added some code to block out this specific error. Hopefully some combination of devtools and extensions API will be improved in the future to make it possible to fix this kind of problem without patching the browser. Chrome Canary already has the patch, so it should roll out to all users around mid-January. Additionally, the team has confirmed the issue no longer affects other browsers as the SDK was updated to only activate if it's in Chrome.
Update 4 (April 30): Nope, not yet anyway. Thankfully Google's developer relations team are more aware than certain other stakeholders how badly this has affected developer experience. More whitelist updates have recently been made to clobber these log messages. Current status at top of the post.
If you want to temporarily get rid of these console errors (like I did) you can install the extension here: https://chrome.google.com/webstore/detail/google-cast/boadgeojelhgndaghljhdicfkmllpafd/reviews?hl=en
I left a review asking for a fix. You can also do a bug report via the extension (after you install it) here. Instructions for doing so are here: https://support.google.com/chromecast/answer/3187017?hl=en
I hope Google gets on this. I need my console to show my errors, etc. Not theirs.
How about filtering these errors ?
With the regex filter bellow, we can dismiss cast_sender.js errors :
^((?!cast_sender).)*$
Do not forget to check Regex box.
Another quick solution is to "Hide network messages".
i know it is not the best solution, but the only one supposed solution that i have read for all the web is to install chrome cast extension, so, i've decide, not to put the iframe into the website, i just insert the thumnail of my video from youtube like in this post explain.
and here we have two options:
1) Target the video to the channel and play it there
2) Call the video via ajax, like explain here (i've decided for this one) in a colorbox or any another plugin.
and like this, i prevent the google cast sender error make my site slow
By default Chrome extensions do not run in Incognito mode. You have to explicitly enable the extension to run in Incognito.

Google Chromecast sender error if Chromecast extension is not installed or using incognito

I'm having an error running Chromecast sender in Chrome Incognito or if Chromecast extension is not installed:
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js
No cast extension found
Google cast sender is trying to send AJAX requests for local "cast_sender.js". Should this happen or is there a better way to check if Chromecast sender extension exists (not by requesting AJAX request)?
I believe these AJAX requests are a way of asking if Chromecast extension exists. Is there a better way to check if Chromecast extension exists?
Update: After several attempts, it looks like this may have been fixed in latest Chrome builds (per Paul Irish's comment below). That would suggest we will see this fixed in stable Chrome June-July 2016. Let's see ...
This is a known bug with the official Chromecast JavaScript library. Instead of failing silently, it dumps these error messages in all non-Chrome browsers as well as Chrome browsers where the Chromecast extension isn't present.
The Chromecast team have indicated they won't fix this bug.
If you are a developer shipping with this library, you can't do anything about it according to Chromecast team. You can only inform users to ignore the errors. (I believe Chromecast team is not entirely correct as the library could, at the least, avoid requesting the extension scipt if the browser is not Chrome. And I suspect it could be possible to suppress the error even if it is Chrome, but haven't tried anything.)
If you are a user annoyed by these console messages, you can switch to Chrome if not using it already. Within Chrome, either:
Install the Chromecast extension from here.
Configure devtools to hide the error message (see David's answer below).
Update [Nov 13, 2014]: The problem has now been acknowledged by Google. A member of the Chromecast team seems to suggest the issue will be bypassed by a change the team is currently working on.
Update 2 [Feb 17, 2015]: The team claim there's nothing they can do to remove the error logs as it's a standard Chrome network error and they are still working on a long-term fix. Public comments on the bug tracker were closed with that update.
Update 3 [Dec 4, 2015]: This has finally been fixed! In the end, Chrome team simply added some code to block out this specific error. Hopefully some combination of devtools and extensions API will be improved in the future to make it possible to fix this kind of problem without patching the browser. Chrome Canary already has the patch, so it should roll out to all users around mid-January. Additionally, the team has confirmed the issue no longer affects other browsers as the SDK was updated to only activate if it's in Chrome.
Update 4 (April 30): Nope, not yet anyway. Thankfully Google's developer relations team are more aware than certain other stakeholders how badly this has affected developer experience. More whitelist updates have recently been made to clobber these log messages. Current status at top of the post.
If you want to temporarily get rid of these console errors (like I did) you can install the extension here: https://chrome.google.com/webstore/detail/google-cast/boadgeojelhgndaghljhdicfkmllpafd/reviews?hl=en
I left a review asking for a fix. You can also do a bug report via the extension (after you install it) here. Instructions for doing so are here: https://support.google.com/chromecast/answer/3187017?hl=en
I hope Google gets on this. I need my console to show my errors, etc. Not theirs.
How about filtering these errors ?
With the regex filter bellow, we can dismiss cast_sender.js errors :
^((?!cast_sender).)*$
Do not forget to check Regex box.
Another quick solution is to "Hide network messages".
i know it is not the best solution, but the only one supposed solution that i have read for all the web is to install chrome cast extension, so, i've decide, not to put the iframe into the website, i just insert the thumnail of my video from youtube like in this post explain.
and here we have two options:
1) Target the video to the channel and play it there
2) Call the video via ajax, like explain here (i've decided for this one) in a colorbox or any another plugin.
and like this, i prevent the google cast sender error make my site slow
By default Chrome extensions do not run in Incognito mode. You have to explicitly enable the extension to run in Incognito.

Open Safari / Google Chrome developer tools programmatically from JavaScript

I'm looking for a way to open the WebKit “developer tools” from a script attached to a web-page. I need solutions for both Google Chrome and Safari, that will open the developer-tools pane if it's not already open, and (hopefully, if you can figure out how) also switch to a particular tab/section of said pane upon opening.
(Use-case, if anyone's interested: I want to open the console.log output-window if there's been an error and a developer is looking at the page; this particular page will be the output of some JavaScript unit-tests.)
I'm setting a bounty on this question because it's obviously one that hasn't been answered to anyone's satisfaction before, and the answer is a hairy one. Please don't answer it unless you have a real answer that both: 1) works in both browsers, and 2) doesn't require private extension APIs that won't work from a static web-page.
See (related, but specific to Chrome, and extensions): Can I programmatically open the devtools from a Google Chrome extension?
Simply: You can't.
The Dev Tools are not sandboxed (unlike any web page), thus granting sandboxed environments the power to open and control an unsandboxed environment is a major security design flaw.
I hope this answers your question :-)
You cannot directly use the Chrome's Dev Tools from your web pages. It is bundled with the browser.
But you can use it like a regular web application. Go to Chrome Developer Tools, then go to Contributing. You will find help on using Dev Tools for your app.
Setting up
Install Chrome Canary on Mac OS / Windows or download the latest Chromium build from the Chromium continuous builds archive on Linux
Clone Blink git repo from https://chromium.googlesource.com/chromium/blink.git
Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)
Running
Run one copy of Chrome Canary with the following command line flags: --remote-debugging-port=9222 --user-data-dir=blink/chromeServerProfile --remote-debugging-frontend="http://localhost:8090/front_end/inspector.html". These flags cause Chrome to allow websocket connections into localhost:9222 and to serve the front-end UI from your local git repo. (Adjust the path to chromeServerProfile to be some writable directory in your system).
Open a sample page (eg www.chromium.org).
Run a second copy of Chrome Canary with the command line flag: --user-data-dir=/work/chromeClientProfile. Open http://localhost:9222. Among the thumbnails you will see the sample page from the other browser instance. Click on it to start remote debugging your sample page.
The DevTools web page that opens is served from the remote-debugging-frontend in the first browser instance, which serves from the git repo your local filesystem. Debug this Devtools Web page and edit its source like any other web app.
I hope this is what you need.
There's no way to control the web developer tool from an in-page script, other than through the Console API which provides mostly logging facilities. Letting scripts control more than that would be a serious security issue, since it would allow a web page to control parts of the browser.
The only API remotely related to what you're trying to do is the debugger command, which switches to the script pane only if the developer tools were already open.
But who are you trying to develop this feature for?
If it's for developers working on the site, then it's better to just use the existing developer tools manually, by setting breakpoints, or the pause on exceptions toggle.
If it's for end users, don't. Unless your site is supposed to be used by highly technical web developers, you're only going to scare away users if the developer tools suddenly pop up with errors.
If you really want to show errors you can implement your own logging framework and the UI for error reporting, which works with basic JS and doesn't depend on a specific browser environment.
here's another answer that proposes a solution to your mentioned use case/objective (detecting errors, getting & displaying console logs) and not the not possible objective in the title.
you can make and use a console wrapper and use it in your code
and/or you can monkey patch the console functions if you use/import external js, but you need to apply it before loading them.
No, Any secure Browser will not allow a script to open an extension, as it leads to insecurity.
But, You may design an Add-On/extension OR Console API's to do the same.. for specific site.
Create an Add-On like this to achieve that requirement.
You can try sending keys 'CTRL' + SHIFT' + 'I'
that may work for Chrome any FireFox (in I.E you need to use 'F12'
I am using it when required as few utils in this add-on use to work better then the built-in.
EDIT:
Now a days Chrome is advanced with many new advancements source.
I hope this helps!
Hate to answer such an old question, but was surprised to not see this as an answer, so I thought I'd add it in case it can help someone in the future.
Assuming you have access to the source code, you can place an alert("open devtools"); statement immediately before the first line you're interested in debugging. This alert will give you an opportunity to open DevTools and set a breakpoint on that first line before clearing the alert thus allowing the code to continue and hitting the breakpoint.

Categories

Resources