Matomo domain config for local development is unclear

[jrhender]

When running locally, I think it is reasonable to expect that the matomo domain isn't provided as we don't want to collect usage data for local development generally speaking.
However, current usage of the MATOMO_DOMAIN wrangler.toml variable may lead to a errors for folks initially running the project:

• If MATOMO_DOMAIN is not provided, then a root.tsx:194 ReferenceError: MATOMO_DOMAIN is not defined error is obtained and the code content of the root page doesn't load.
• If MATOMO_DOMAIN is provided with the default value from wrangler.toml.template (MATOMO_DOMAIN = "{MATOMO_DOMAIN}"), then errors occur related to setting the html for matomo.

Based on the current code, providing an empty string (MATOMO_DOMAIN = "") avoids the matomo code path but folks must read the source code or discover by trial&error. I think it would be better to provide a default value of an empty string for locally development.

One we might improve this is by providing defaults in the wrangler.toml and overriding when deploying or by providing a local env config, see Cloudflare docs on env vars

Alternatively, you can specify per-environment values in the Wrangler configuration file and provide an environment value via the env flag when developing locally like so wrangler dev --env=local.

[LeMurphant]

I run the default MATOMO_DOMAIN = "{MATOMO_DOMAIN}" and I get no error, can you share the error you get setting the html for matomo?

[jrhender]

Hey @LeMurphant, the error is in the dev-tools console, not in the user interface, so it doesn't affect the functionality of the site, as far as I can tell. I've clarified this in the description.

Here's the error text that I think is related:

hook.js:608 Warning: Prop dangerouslySetInnerHTML did not match. Server: "" Client: "\n var _paq = window._paq = window._paq || [];\n /* tracker methods like "setCustomDimension" should be called before "trackPageView" */\n _paq.push(["disableCookies"]);\n _paq.push(['trackPageView']);\n _paq.push(['enableLinkTracking']);\n (function() {\n var u="https://{MATOMO_DOMAIN}.matomo.cloud/";\n _paq.push(['setTrackerUrl', u+'matomo.php']);\n _paq.push(['setSiteId', '3']);\n var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];\n g.async=true; g.src='https://cdn.matomo.cloud/{MATOMO_DOMAIN}.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);\n })();" Error Component Stack
at script ()
at AnaliticsTag (root.tsx:143:3)
at body ()
at html ()
at CachedObjectsProvider (useCachedObjects.tsx:54:3)
at BasePage (root.tsx:178:3)
at App (root.tsx:214:7)