Start tracking SSR and CSR events for diagnostics

app/pods/application/route.js

@@ -12,7 +12,7 @@ export default class ApplicationRoute extends BaseRoute {
       origin: this.routeName
     });
 
-    this.visit.create();
+    this.visit.track();
   }
 
   model() {

app/services/api.js

@@ -48,21 +48,6 @@ export default class ApiService extends Service {
     // expect back from the API is JSON API compliant data.
     headers['Accept'] = 'application/vnd.api+json';
 
-    // Each request will send up the Visit UUID so that subsequent request can
-    // be grouped. This is unique to this project, thus the X namespace.
-    headers['Visit-ID'] = this.visit.id;
-
-    // Add visit metadata to the requests.
-    if (this.fastboot.isFastBoot) {
-      const request = this.fastboot.request;
-      headers['SSR-Host'] = request.host;
-      headers['SSR-Referer'] = request.headers.headers['referer'].join(',');
-      headers['SSR-User-Agent'] = request.headers.headers['user-agent'][0];
-    } else {
-      headers['Browser-Width'] = window.innerWidth;
-      headers['Browser-Height'] = window.innerHeight;
-    }
-
     return headers;
   }
 

app/services/visit.js

@@ -4,6 +4,7 @@ import { tracked } from '@glimmer/tracking';
 
 export default class VisitService extends Service {
   @service fastboot;
+  @service store;
   @service uuid;
 
   // A unique UUID given to this website session. It will:
@@ -12,27 +13,54 @@ export default class VisitService extends Service {
   // * help group requests for analytics
   @tracked id;
 
-  create() {
-    if (this.fastboot.isFastBoot) {
-      // 1. Fastboot creates a unique UUID for this visit.
+  track() {
+    const ssr = this.fastboot.isFastBoot;
+    const csr = !ssr;
+
+    // Server Side Render
+    // When the app renders on the server in Fastboot.
+    if (ssr) {
+      // 1. Create a visit ID.
       this.id = this.uuid.generate();
 
-      // 2. Fastboot passes this ID down to Ember.
+      // 2. Pass this visit ID down to Ember for CSR.
       this.fastboot.shoebox.put('visit', this.id);
-      console.log('🧩 fastboot created visit', this.id);
-    } else {
-      // 3. Ember retrieves the ID passed down from Fastboot.
-      const id = this.fastboot.shoebox.retrieve('visit');
-
-      if (id) {
-        // 4. Ember remembers ID for all requests going forward.
-        this.id = id;
-        console.log('🧩 ember found ID in shoebox', this.id);
-      } else {
-        // 5. If anything went wrong with Fastboot, create a UUID with Ember.
+
+      // 3. Create a SSR record in the database.
+      const request = this.fastboot.request;
+      const record = this.store.createRecord('server-side-render', {
+        visitId: this.id,
+        host: request.host,
+        referrer: request.headers.headers['referer'].join(','),
+        userAgent: request.headers.headers['user-agent'][0]
+      });
+
+      record.save();
+    }
+
+    // Client Side Render
+    // When the app renders in the browser, in Ember.
+    if (csr) {
+      // 1. Retrieve the visit ID from the "shoebox" passed down from Fastboot to Ember.
+      this.id = this.fastboot.shoebox.retrieve('visit');
+
+      if (!this.id) {
+        // 2. In the rare event that Ember would render without Fastboot (during outages), create a UUID.
         this.id = this.uuid.generate();
-        console.log('🧩 ember created visit 🔥🔥🔥', this.id);
       }
+
+      // 3. Create a CSR record in the database.
+      const record = this.store.createRecord('client-side-render', {
+        visitId: this.id,
+        host: location.host,
+        referrer: document.referrer,
+        userAgent: navigator.userAgent,
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight,
+        userId: null // TODO
+      });
+
+      record.save();
     }
   }
 }