Trying Out Faro for Real User Monitoring
Fleetingsee https://github.com/grafana/faro-web-sdk/blob/main/docs/sources/tutorials/quick-start-browser.md
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="https://ipfs.konubinix.eu/p/bafkreib3gcvqpp3fox36m7sn4d6qfcru7n62svzclt5w7lf6j43pkyla4q?orig=https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.js"></script>
<script defer src="https://ipfs.konubinix.eu/p/bafkreihw6a7byfwe4mtoda5ivd6wkdmclapfij6jul5vdb2on5qmori7fe?orig=https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/shoelace-autoloader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
<script src="https://hyperscript.org/js/_hyperscript_w9y.min.js"></script>
<script src="https://unpkg.com/@grafana/faro-web-sdk@1.19.0/dist/bundle/faro-web-sdk.iife.js"></script>
<script src="https://unpkg.com/@grafana/faro-web-tracing@1.19.0/dist/bundle/faro-web-tracing.iife.js"></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('app', () => ({
message: "",
async ok_case () {
const { trace, context } = faro.api.getOTEL();
const tracer = trace.getTracer('default');
const span = tracer.startSpan('my top level user interaction');
// the callback must not be async
context.with(trace.setSpan(context.active(), span), () => {
console.log("this is a test at the beginning")
console.log("this is another test at the beginning")
fetch("http://home/iothelper/toybox")
faro.api.pushLog(['Hello world', 123], { level: GrafanaFaroWebSdk.LogLevel.Debug });
fetch("http://home/graphql", {method: "POST", headers: {"Content-Type": "application/json"}, body: '{"query":"query MyQuery { files(first: 1) { edges { node {description }}}}","variables":null,"operationName":"MyQuery"}'})
fetch("http://home/iothelper/toolbox2")
console.log("this is another test")
span.end();
});
},
async ko_case() {
const { trace, context } = faro.api.getOTEL();
const tracer = trace.getTracer('default');
const span = tracer.startSpan('my top level user interaction');
// the callback must not be async
context.with(trace.setSpan(context.active(), span), () => {
console.log("this is a test at the beginning")
console.log("this is another test at the beginning")
fetch("http://home/iothelper/toybox")
faro.api.pushLog(['Hello world', 123], { level: GrafanaFaroWebSdk.LogLevel.Debug });
fetch("http://home/graphql", {method: "POST", headers: {"Content-Type": "application/json"}, body: '{"query":"query MyQuery { files(first: 1) { edges { node {description }}}}","variables":null,"operationName":"MyQuery"}'})
fetch("http://home/iothelper/toolbox1")
console.log("this is another test")
span.end();
});
},
async init () {
const instrumentationOptions = {
propagateTraceHeaderCorsUrls: [new RegExp('.*')], // This is a list of specific URIs or regular exprressions
};
window.f = window.GrafanaFaroWebSdk.initializeFaro({
instrumentations: [
new window.GrafanaFaroWebSdk.ErrorsInstrumentation(),
// new window.GrafanaFaroWebSdk.WebVitalsInstrumentation(),
new window.GrafanaFaroWebSdk.ConsoleInstrumentation({
// console.log will be captured
disabledLevels: [window.GrafanaFaroWebSdk.LogLevel.TRACE, window.GrafanaFaroWebSdk.LogLevel.ERROR],
}),
new window.GrafanaFaroWebSdk.SessionInstrumentation(),
new window.GrafanaFaroWebTracing.TracingInstrumentation({ instrumentationOptions }),
],
transports: [
new window.GrafanaFaroWebSdk.FetchTransport({
url: 'http://home/faro/collect',
apiKey: 'secret',
}),
new window.GrafanaFaroWebSdk.ConsoleTransport(),
],
app: {
name: 'frontend',
version: '1.0.0',
},
});
},
}))
})
</script>
</head>
<body x-data="app">
<div x-text="message"></div>
<sl-button @click="ok_case()">OK case</sl-button>
<sl-button @click="ko_case()">KO case</sl-button>
</body>
</html>