feat: Grafana FaroによるReal User Monitoringを導入

package.json

@@ -14,6 +14,8 @@
     "rtk-query-codegen": "TS_NODE_PROJECT=tsconfig.rtk.json rtk-query-codegen-openapi ./rtk-query-codegen-openapi.config.ts"
   },
   "dependencies": {
+    "@grafana/faro-web-sdk": "^2.2.2",
+    "@grafana/faro-web-tracing": "^2.2.2",
     "@pixi/react": "^8.0.3",
     "@pixi/sound": "^6.0.1",
     "@reduxjs/toolkit": "^2.9.0",

src/components/Page1.tsx

@@ -1,19 +1,29 @@
 import { Optional } from '@/utils/types'
 import { TalkView } from './models/talkView'
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 import { PageCtx } from './models/pageContext'
 import config from '@/config'
 import { getTimeStr } from '@/utils/time'
 import { trim } from '@/utils/utils'
 import PageHeader from './PageHeader'
+import { pushPageMeasurement, pushPageEvent } from '@/lib/faro'
 
 type PageProps = { view: Optional<TalkView>; isDk: boolean }
 type Props = { view: Optional<TalkView> }
 
 export default function Page({ view, isDk }: PageProps) {
   const { goNextPage } = useContext(PageCtx)
+  const renderStartTime = useRef(performance.now())
+
   useEffect(() => {
-    const cancel = setTimeout(goNextPage, config.transTimePage1 * 1000)
+    const duration = performance.now() - renderStartTime.current
+    pushPageMeasurement('Page1', duration)
+    pushPageEvent('Page1', 'page_displayed')
+
+    const cancel = setTimeout(() => {
+      pushPageEvent('Page1', 'page_exit')
+      goNextPage()
+    }, config.transTimePage1 * 1000)
     return () => clearTimeout(cancel)
   }, [goNextPage])
 

src/components/Page2.tsx

@@ -1,19 +1,29 @@
 import { Optional } from '@/utils/types'
 import { TalkView } from './models/talkView'
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 import { PageCtx } from './models/pageContext'
 import config from '@/config'
 import type { Speaker, Talk, Track } from '@/data/types'
 import PageHeader from './PageHeader'
 import { getTimeStr } from '@/utils/time'
+import { pushPageMeasurement, pushPageEvent } from '@/lib/faro'
 
 type PageProps = { view: Optional<TalkView>; isDk: boolean }
 type Props = { view: Optional<TalkView> }
 
 export default function Page({ view, isDk }: PageProps) {
   const { goNextPage } = useContext(PageCtx)
+  const renderStartTime = useRef(performance.now())
+
   useEffect(() => {
-    const cancel = setTimeout(goNextPage, config.transTimePage2 * 1000)
+    const duration = performance.now() - renderStartTime.current
+    pushPageMeasurement('Page2', duration)
+    pushPageEvent('Page2', 'page_displayed')
+
+    const cancel = setTimeout(() => {
+      pushPageEvent('Page2', 'page_exit')
+      goNextPage()
+    }, config.transTimePage2 * 1000)
     return () => clearTimeout(cancel)
   }, [goNextPage])
 

src/components/Page3.tsx

@@ -1,10 +1,11 @@
 import { Optional } from '@/utils/types'
 import { TalkView } from './models/talkView'
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useState, useRef } from 'react'
 import { PageCtx } from './models/pageContext'
 import config from '@/config'
 import PageHeader from './PageHeader'
 import Image from 'next/image'
+import { pushPageMeasurement, pushPageEvent } from '@/lib/faro'
 
 type PageProps = { view: Optional<TalkView>; isDk: boolean }
 type Props = { view: Optional<TalkView> }
@@ -22,8 +23,19 @@ const images: string[] = [
 export default function Page({ view, isDk }: PageProps) {
   const { goNextPage } = useContext(PageCtx)
   const { count } = useCounter(images.length)
+  const renderStartTime = useRef(performance.now())
+  const hasMeasured = useRef(false)
+
   useEffect(() => {
+    if (!hasMeasured.current) {
+      const duration = performance.now() - renderStartTime.current
+      pushPageMeasurement('Page3', duration)
+      pushPageEvent('Page3', 'page_displayed')
+      hasMeasured.current = true
+    }
+
     if (count >= images.length) {
+      pushPageEvent('Page3', 'page_exit')
       goNextPage()
     }
   }, [count, goNextPage])

src/components/Page4.tsx

@@ -1,8 +1,9 @@
 import { Optional } from '@/utils/types'
 import { TalkView } from './models/talkView'
-import { useContext } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 import { PageCtx } from './models/pageContext'
 import VideoPlaylist, { Playlist } from './VideoPlaylist'
+import { pushPageMeasurement, pushPageEvent } from '@/lib/faro'
 
 type Props = { view: Optional<TalkView> }
 
@@ -29,10 +30,22 @@ const playlist: Playlist = [
 
 export default function Page(_: Props) {
   const { goNextPage } = useContext(PageCtx)
+  const renderStartTime = useRef(performance.now())
+
+  useEffect(() => {
+    const duration = performance.now() - renderStartTime.current
+    pushPageMeasurement('Page4', duration)
+    pushPageEvent('Page4', 'page_displayed')
+  }, [])
+
+  const handleEnded = () => {
+    pushPageEvent('Page4', 'page_exit')
+    goNextPage()
+  }
 
   return (
     <div className="w-full h-full">
-      <VideoPlaylist onEnded={goNextPage} playlist={playlist}></VideoPlaylist>
+      <VideoPlaylist onEnded={handleEnded} playlist={playlist}></VideoPlaylist>
     </div>
   )
 }

src/lib/faro.ts

@@ -0,0 +1,61 @@
+import {
+  Faro,
+  getWebInstrumentations,
+  initializeFaro,
+} from '@grafana/faro-web-sdk'
+import { TracingInstrumentation } from '@grafana/faro-web-tracing'
+
+let faro: Faro | null = null
+
+export function initFaro() {
+  if (typeof window === 'undefined' || faro) return
+
+  faro = initializeFaro({
+    url: 'https://faro-collector-prod-us-central-0.grafana.net/collect/eb4a949e510aaf8acc2cebbd3656e800',
+    app: {
+      name: 'emtec intermission',
+      version: '1.0.0',
+      environment: 'production',
+    },
+    instrumentations: [
+      ...getWebInstrumentations(),
+      new TracingInstrumentation(),
+    ],
+  })
+}
+
+export function getFaro(): Faro | null {
+  return faro
+}
+
+export function pushPageMeasurement(
+  pageName: string,
+  duration: number,
+  context?: Record<string, string>
+) {
+  if (!faro) return
+
+  faro.api.pushMeasurement({
+    type: 'page_render',
+    values: {
+      duration,
+    },
+    context: {
+      page: pageName,
+      ...context,
+    },
+  })
+}
+
+export function pushPageEvent(
+  pageName: string,
+  eventName: string,
+  attributes?: Record<string, string>
+) {
+  if (!faro) return
+
+  faro.api.pushEvent(eventName, {
+    page: pageName,
+    ...attributes,
+  })
+}

src/pages/_app.tsx

@@ -1,12 +1,18 @@
 import './globals.css'
 import { wrapper } from '@/store'
+import { initFaro } from '@/lib/faro'
 import type { AppProps } from 'next/app'
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 import { Provider } from 'react-redux'
 
 const RootApp: FC<AppProps> = ({ Component, ...rest }) => {
   const { store, props } = wrapper.useWrappedStore(rest)
   const { pageProps } = props
+
+  useEffect(() => {
+    initFaro()
+  }, [])
+
   return (
     <Provider store={store}>
       <Component {...pageProps} />