Add app insights

[WayneFerrao]

Description

This PR adds user telemetry to the website through the integration of AppInsights

Changes include:

• Added AppInsights config
• Updated footer text for privacy compliance.

[alexvy86]

I don't think we can do this in the repo, some of the new deps are not publicly available so it becomes impossible for external contributors to work on docs/. I don't see how we would do this as extra steps in internal pipelines, though 🤔 .

[WayneFerrao]

I don't think we can do this in the repo, some of the new deps are not publicly available so it becomes impossible for external contributors to work on docs/. I don't see how we would do this as extra steps in internal pipelines, though 🤔 .

Shoot good point, the wcp-consent code would need to be abstracted. I think the App Insights code can stay though

[github-actions]

🔗 No broken links found! ✅

Your attention to detail is admirable.

linkcheck output

> [email protected] ci:check-links /home/runner/work/FluidFramework/FluidFramework/docs
> start-server-and-test "npm run serve -- --no-open" 3000 check-links

1: starting server using command "npm run serve -- --no-open"
and when url "[ 'http://127.0.0.1:3000' ]" is responding with HTTP status code 200
running tests using command "npm run check-links"


> [email protected] serve
> docusaurus serve --no-open

[SUCCESS] Serving "build" directory at: http://localhost:3000/

> [email protected] check-links
> linkcheck http://localhost:3000 --skip-file skipped-urls.txt

Crawling...

Stats:
  171689 links
    1596 destination URLs
    1826 URLs ignored
       0 warnings
       0 errors

[seanimam]

nit : 'Privacy Policy' is the common term used for these kinds of links

[WayneFerrao]

Saw this requirement in the Privacy review, will confirm with Jade!

[seanimam]

Is there any loading element we can use here other than just an empty div?

[Josmithr]

Since we only expect this to appear during local development, leaving an explicit notice with more details sounds like a good idea to me.

[seanimam]

Using the react plugin here looks to give you component level tracking but it looks like you need to use a higher order component for it to work, for example export default withAITracking(reactPlugin, MyComponent); (see https://www.npmjs.com/package/@microsoft/applicationinsights-react-js)

I'm not sure if enabling this plugin does anything without the use of this higher order component?

[Josmithr]

What happens if a user tries to install without the necessary environment variables set?

[alexvy86]

Does process.env.<value> even work here? I thought this was more of a static file, not something that gets executed in a node context. If that's true, what we need is probably docs saying "in order to work with @wcp/wcp-consent you need to add to your .npmrc file.

[WayneFerrao]

@Josmithr They would get a 401 which would fail gracefully, since the package is in optionalDependencies.

@alexvy86 You're right .npmrc is static. I think you can do export VAR=foo and then interpolate it using ${} but adding to .npmrc is the right convention

[alexvy86]

Nice, I didn't know you could do that.

[Josmithr]

These should move under devDependencies (since this doesn't get published as a library, all of the deps can be dev).

[Josmithr]

I would recommend linking to documentation for this library, and then note that it's MS-internal.

[alexvy86]

Yeah, I think I'd write all this from the perspective of "This bit is related to the production deployment of the site; if you're doing local development it's probably not relevant to you. If you're a Microsoft engineer who needs to work on this, refer to our internal documentation."

On related topics, using optional-dependencies does seem to work. If our pipelines set up the appropriate npm registries and credentials, the package will get installed when running there, and it'll just be ignored when installing the deps locally.