What is the best practice to embed the sentry DSN or other tracking codes in vite/Vue front-end code?
The way I see it, either it is baked into the transpiled JS on build time (and then part of the Docker image) or the front-end code has to load it from an API (which means issues in this part of the code cannot be tracked).
I would be interested in learning about best practices.
In my opinion there is no "best practice", there is a tradeoff between 2 main options, both have pros and cons. The options are:
This is a more simple setup, and it includes that tracking code located in your source code during build. There is no need to use any API calls during runtime, and that may reduce issues during runtime.
However, there is a security risk, in case your code is exposed in the client side JS, as it may be accesible to users and hackers.
That practice allows you to update tracking configurations without having to go through the entire build process, not to mention overhead of deployment, and it also gives you enhanced security. However, you may encounter runtime errors and need to prepare to addressing them during runtime.