Merge pull request #8 from metabase/49594-adapt-browser-logs-to-json-…

…format add ability to read browser information
metabase · Dec 11, 2024 · f3619cb · f3619cb
2 parents ef9220a + 3b236d6
commit f3619cb
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/src/components/DevToolsUi.tsx b/src/components/DevToolsUi.tsx
@@ -21,7 +21,7 @@ export default function DevToolsUI({ diagnosticData }: DevToolsUIProps) {
   return (
     <div className="flex flex-col h-screen bg-background text-foreground">
       <div className="w-full p-4 overflow-auto relative">
-        <Tabs defaultValue="frontendErrors" className="w-full">
+        <Tabs defaultValue="basicInfo" className="w-full">
           <div className="sticky top-0 left-0 w-full bg-background z-10">
             <TabsList className="tabs-list mb-4">
               <TabsTrigger value="basicInfo">Basic Info</TabsTrigger>
@@ -49,12 +49,30 @@ export default function DevToolsUI({ diagnosticData }: DevToolsUIProps) {
           </div>
 
           <TabsContent value="basicInfo" className="h-[calc(100%-3rem)]">
-            <p>
-              <strong>URL:</strong> {diagnosticData.url}
-            </p>
-            <p>
-              <strong>Description:</strong> {diagnosticData.description}
-            </p>
+            <div className="space-y-2">
+              <p>
+                <strong>URL:</strong> {diagnosticData.url}
+              </p>
+              <p>
+                <strong>Description:</strong> {diagnosticData.description}
+              </p>
+              {diagnosticData.browserInfo && (
+                <>
+                  <p>
+                    <strong>Browser:</strong> {diagnosticData.browserInfo.browserName} {diagnosticData.browserInfo.browserVersion}
+                  </p>
+                  <p>
+                    <strong>OS:</strong> {diagnosticData.browserInfo.os} {diagnosticData.browserInfo.osVersion}
+                  </p>
+                  <p>
+                    <strong>Platform:</strong> {diagnosticData.browserInfo.platform}
+                  </p>
+                  <p>
+                    <strong>Language:</strong> {diagnosticData.browserInfo.language}
+                  </p>
+                </>
+              )}
+            </div>
           </TabsContent>
           <TabsContent value="entityInfo" className="h-[calc(100%-3rem)]">
             <MetadataTable metadata={diagnosticData.entityInfo} />

diff --git a/src/components/UploadDropzone.tsx b/src/components/UploadDropzone.tsx
@@ -20,7 +20,7 @@ const UploadDropzone: React.FC<UploadDropzoneProps> = ({ onFileUpload }) => {
             const parsedData = JSON.parse(result)
 
             const diagnosticData: DiagnosticData = {
-              url: parsedData.url || window.location.href,
+              url: parsedData.url || '',
               entityInfo: {
                 ...parsedData.entityInfo,
                 bugReportDetails: parsedData.bugReportDetails,
@@ -34,6 +34,7 @@ const UploadDropzone: React.FC<UploadDropzoneProps> = ({ onFileUpload }) => {
               userLogs: Array.isArray(parsedData.userLogs) ? parsedData.userLogs : [],
               logs: Array.isArray(parsedData.logs) ? parsedData.logs : [],
               description: parsedData.description || 'No description provided',
+              browserInfo: parsedData.browserInfo || {},
             }
 
             onFileUpload(diagnosticData)

diff --git a/src/types/DiagnosticData.ts b/src/types/DiagnosticData.ts
@@ -10,4 +10,5 @@ export interface DiagnosticData {
   userLogs: any[]
   logs: any[]
   description: string
+  browserInfo?: Record<string, any>
 }