Set tags based on meta envelope (#12)

Author: davidjgoss

src/components/ClientWrapper.tsx

@@ -1,9 +1,28 @@
 'use client'
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { FC, PropsWithChildren } from 'react'
+import { Envelope } from '@cucumber/messages'
+import * as Sentry from '@sentry/nextjs'
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onSuccess: (data, query) => {
+      if (query.meta?.envelopes) {
+        const envelopes = data as ReadonlyArray<Envelope>
+        const meta = envelopes?.find(e => e.meta)?.meta
+        if (meta) {
+          Sentry.setTag('meta_os_name', meta.os.name)
+          Sentry.setTag('meta_os_version', meta.os.version)
+          Sentry.setTag('meta_runtime_name', meta.runtime.name)
+          Sentry.setTag('meta_runtime_version', meta.runtime.version)
+          Sentry.setTag('meta_implementation_name', meta.implementation.name)
+          Sentry.setTag('meta_implementation_version', meta.implementation.version)
+        }
+      }
+    },
+  }),
+})
 
 export const ClientWrapper: FC<PropsWithChildren> = ({ children }) => {
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

src/hooks/useEnvelopes.ts

@@ -12,5 +12,8 @@ export function useEnvelopes(id: string, getUrl: string) {
       const raw = await response.text()
       return raw.trim().split('\n').map(s => JSON.parse(s) as Envelope)
     },
+    meta: {
+      envelopes: true
+    }
   })
 }