marker-io / browser-sdk Goto Github PK
View Code? Open in Web Editor NEWMarker.io browser SDK
License: MIT License
Marker.io browser SDK
License: MIT License
Hi! Im looking for a way to disable automatic screenshots - can this be done somehow via the sdk? Been looking through the documentation but cannot find any info. The reason for this is GDPR - I dont want people to accidently submit personal data due to automatic screenshots.
When reporting issue in a screen which uses responsive images, the HTML will look like this
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
The images are not displayed.
While working on performance enhancements in a project, I noticed this library loads two files which seem to be different versions of marker-io or are these file two different things?
/latest/3.v1.49.0.c7628fa0355869e73f1c.js
/latest/4.v1.49.0.cf91bfe42d212993d552.js
Currently it breaks with NextJS.
Since NextJS is prerendered serverside, and it uses Nodejs which uses commonjs exports instead, the export default
breaks it (expects module.exports = foo
)
To fix this, maybe it could be compiled into separate files or into UMD (Universal module definition) by something like rollup
Version 0.16.0
The error is : TS2339: Property 'setCustomData' does not exist on type 'MarkerSdk'.
Code sample below:
const widget = await markerSDK.loadWidget({
project: 'xxxxxxxxxxxxxxxxxxxx',
});
widget.setCustomData({
userName,
});
GitHub Issue: #37
I have Vite+React TS app and use @tinymce/tinymce-react editor for creating content, I get this issue when I remove typed text in the editor.
I created a GitHub repo where this issue is reproduced, so have a look.
Will be great to fix this ASAP or maybe give me some feedback on how to handle this on my end.
When i try to install the package by npm install -s @marker.io/browser
i get this error
The splatting operator '@' cannot be used to reference variables in an expression. '@marker' can be used only as an argument to a command. To reference variables in an expression use '$marker'.
perhaps there is an alias that we can use to install the package without using "@"?
any help appreciated
`
Some options are missing in the SDK.
May you add them @emilevictorportenart?
(Marker.io SDK) unknown param "silent" (need to upgrade?)
(Marker.io SDK) unknown param "source" (need to upgrade?)
(Marker.io SDK) unknown param "ssr" (need to upgrade?)
Issue Description:
I am currently working on a web project that utilizes Next.js 13 with App routing. To enhance the user experience, I have integrated the react-i18next library for language translation. However, I have encountered a critical issue related to iframe behavior and the functionality of the marker.io SDK when changing the language.
Problem Details:
When I switch the language, the iframe generated by marker.io mysteriously disappears from the page. Upon investigating the issue further, I noticed the following problematic behaviors:
isvisible Function: The isvisible function returns true even though the iframe is no longer visible on the page.
isExtensionInstalled Function: The isExtensionInstalled function returns false, indicating that the marker.io extension is not installed, even though it was working previously.
Error on Reload: If I attempt to reload the page after changing the language, I encounter an error related to the document.querySelector('[data-marker-styles="1"]').remove() operation. This error is specifically a "TypeError: Cannot read properties of null (reading 'remove')".
Context and Workaround:
I have noticed that when I refresh the entire page, the iframe reappears, and everything functions as expected. To provide additional context, I am utilizing the script installer for marker.io because directly importing the SDK from npm leads to a ".remove" error, likely due to its placement within a useEffect function. Unfortunately, changing the language disrupts the entire application and leads to this issue.
Request for Assistance:
I kindly request assistance in resolving this issue. It is critical for the proper functioning of our multilingual web project. Any guidance, insights, or potential workarounds would be greatly appreciated.
Thank you in advance for your help and support in resolving this matter.
I know why this feature exists, but I need to use marker in dev mode and I can't have it interfering with me being able to determine where the log call came from in console dev tools. #20 explains why, but never told us how it can be disabled. How can we disable the console.log interception in marker?
Hello, I don't know if this is a bug, I followed the documentation (https://marker.io/blog/integrate-web-app-browser-sdk) and got error. Please help. Thanks
I'm using vuejs 3.
const widget = markerSDK.loadWidget({
project: 'abc1234',
reporter: {
email: '[email protected]',
fullName: 'John Smith',
},
});
function reportABug(){
widget.capture()
}
Looking at the doc and see silent mode property in config option while initialisation, but can't find this in source files of the npm package and it throws a warning in console
This SDK is basically a vehicle for marker to inject their widget script from a remote host (outside of the control of the customer) into a client application. Because of this, it's impossible to independently audit, or manage the release version, or gain helpful insights into the SDK being used.
I think that the current approach is holding marker.io back because as I dig more and more into how it works, the more uncomfortable I become about using it. Marker's SDK is no different from adding a script via CDN, except that script is a black-box and we have no control over the script's version, contents, etc. Marker could push an update that breaks our software and there would be no way to stop it with any QA processes. This needs to change.
With that said, I hope to see improvements to Marker soon!
loadWidget
is an async function that you're making things hard for us developers to figure out when we're able to actually make calls to the API from the window global? I have a dev toolbar and if it loads in before your widget has initialized, I can't get the marker widget state or manipulate it's behaviors appropriately.Just trying to use Marker and the API and I got this error. It shows up on page load intermittently suggesting its possibly some kind of async race condition.
I'm tracking this back to when I try to call setReporter
and I think that I am calling setReporter in my state manager before the Marker Widget is ready for me to call it. Yet, the error is getting emitted for Marker's code so the fix should be on your end.
As for writing code to check if setReporter
is safe for me to call; I don't want to, and shouldn't have to wrap a call to setReporter in an marker's on
event handler method because that is not an acceptable workaround for bunch of reasons that I don't want to get into.
Thank you!
When loading the package from a Remix/React project, I'm running into this error:
.../node_modules/@marker.io/browser/src/index.js:5
export default {
^^^^^^
SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (.../app/root.tsx:12:23)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at .../node_modules/@remix-run/serve/dist/index.js:43:17
Looks like it's trying to load your esm package with the commonjs loader (node:internal/modules/cjs/loader), which leads to an error.
A potential fix for this issue would be to add "type": "module",
to the package.json so Node knows that it's an ESM package.
It looks like analytics are being loaded from https://s3.eu-west-1.amazonaws.com/marker.sessions.prod. This results in a lot of failed connections in our app because our CSP needs to allow specific domains. Opening it up to all of https://s3.eu-west-1.amazonaws.com would present a security issue that CSP is designed to prevent.
Could you please provide a way for us to resolve this either by using a designated domain for collecting analytics information or something in the SDK to better handle the errors?
if you call widget.setReporter({ email: '[email protected]', fullName: '[email protected]' })
is there a widget.clearReporter()
or should there be?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.