Adds Faro for SPA

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*

README.md

@@ -1,5 +1,20 @@
 # todo-react
 
+Kinsey notes:
+works on node 22.
+
+```
+yarn
+yarn build
+yarn run preview
+```
+
+Added a `.env` file with the generated Faro url from my Grafana Cloud instance as this is sensitive data.
+A drawback to this app is it's a single page app so you won't see route changes.
+
+---
+
+
 Sample todo app built with the React/ReactDOM framework. For the accompanying documentation, see
 [Understanding client-side JavaScript frameworks
 : React tutorials](https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks#React_tutorials).

package.json

@@ -11,9 +11,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@grafana/faro-react": "^1.14.1",
+    "@grafana/faro-web-sdk": "^1.14.1",
+    "@grafana/faro-web-tracing": "^1.14.1",
     "nanoid": "^5.1.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.4.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.79",

src/main.jsx

@@ -2,6 +2,9 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
+import { matchRoutes } from 'react-router-dom';
+import { initializeFaro, createReactRouterV6DataOptions, ReactIntegration, getWebInstrumentations, } from '@grafana/faro-react';
+import { TracingInstrumentation } from '@grafana/faro-web-tracing';
 
 // eslint-disable-next-line react-refresh/only-export-components
 const DATA = [
@@ -10,6 +13,31 @@ const DATA = [
   { id: "todo-2", name: "Repeat", completed: false },
 ];
 
+const FARO_URL = process.env.FARO_URL;
+
+initializeFaro({
+  url: FARO_URL,
+  app: {
+    name: 'todo-list',
+    version: '1.0.0',
+    environment: 'production'
+  },
+  sessionTracking: {
+    samplingRate: 1,
+    persistent: true
+  },
+  instrumentations: [
+    // Mandatory, omits default instrumentations otherwise.
+    ...getWebInstrumentations(),
+
+    // Tracing package to get end-to-end visibility for HTTP requests.
+    new TracingInstrumentation(),
+
+    // React integration without router, since this is a single-page app.
+    new ReactIntegration(),
+  ],
+});
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App tasks={DATA} />

vite.config.js

@@ -4,5 +4,6 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: "https://mdn.github.io/todo-react/"
+  // base: "https://mdn.github.io/todo-react/"
+  base: '/todo-react/'
 })