I’m using:
“@grafana/faro-web-sdk”: “^1.3.7”,
“@grafana/faro-web-tracing”: “^1.3.7”
in my Sveltekit Project.
I want to send frontend metrics to my grafana-agent.
I’m using this simple example:
import { initializeFaro } from '@grafana/faro-web-sdk';
const grafanaFaro = () => {
return initializeFaro({
url: "myagenturl:12345/collect",
apiKey: "my api key",
app: {
name: "my app name",
version: '1.0.0'
}
});
};
export default grafanaFaro;
But in the browser I’m getting this error:
The entire Grafana setup is running on Docker containers in Caprover.
Is the error only related to CORS in the Grafana agent? I’m asking because I tweaked the CORS settings and tried to allow my origin, but I’m still getting this error.
localhost
is special for some browsers and they threat it “specially”. I would just use “cors everywhere” plugin in your browser, so you don’t need to deal with CORS issues on the localhost during development.
Then just configure proper cors_allowed_origins
for your Grafana agent in the prod:
musavimoe Did you manage to solve the CORS problem?
I am also experiencing similar issue with the Agent Flow. I cannot configure it to work as Faro collector, and also get CORS error, eventhough I have added the cors_allowed_origins.
Here is my config.river:
faro.receiver "faroReceiver" {
server {
cors_allowed_origins = ["*"]
listen_address = "0.0.0.0"
api_key="secret"
}
output {
logs = [loki.process.autologging.receiver]
traces = [otelcol.exporter.otlp.tempo.input]
}
}
and here is how I initialize Faro in Angular app:
var faro = initializeFaro({
url: 'http://localhost:12347/collect',
apiKey: 'secret',
app: {
name: 'MyAppX',
version: '1.0.0',
environment: 'production'
},
instrumentations: [
...getWebInstrumentations(),
new TracingInstrumentation(),
],
});
do you notice something here missing or wrong? Is the port 12347 correct (default) port?
Thanks!
1 Like