Sentry exceptions ui improvements (#122)

.changeset/angry-goats-notice.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Set up Storybook

.changeset/cool-ads-fail.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Sentry exceptions ui improvements

CONTRIBUTING.md

@@ -44,6 +44,15 @@ HYPERDX_API_KEY=<YOUR_INGESTION_API_KEY_HERE> docker compose -f ./docker-compose
 The core services are all hot-reloaded, so you can make changes to the code and
 see them reflected in real-time.
 
+### UI development with Storybook
+
+To run Storybook locally, you can run the following command from
+`/packages/app/`:
+
+```bash
+yarn storybook
+```
+
 ## Testing
 
 To run the tests locally, you can run the following command:

packages/app/.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
   plugins: ['@typescript-eslint', 'prettier'],
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: ['./tsconfig.json'],
+    project: ['./tsconfig.json', './tsconfig.storybook.json'],
   },
   extends: [
     'next',

packages/app/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {
+      nextConfigPath: '../next.config.js',
+    },
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

packages/app/.storybook/preview.ts

@@ -0,0 +1,4 @@
+import 'react-toastify/dist/ReactToastify.css';
+import '../styles/globals.css';
+import '../styles/app.scss';
+import '../src/LandingPage.scss';

packages/app/src/LogSidePanel.tsx

@@ -21,6 +21,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useQueryParam } from 'use-query-params';
 import type { StacktraceFrame, StacktraceBreadcrumb } from './types';
 import {
+  useShowMoreRows,
   networkColumns,
   stacktraceColumns,
   breadcrumbColumns,
@@ -695,6 +696,7 @@ function TraceSubpanel({
                 <ExceptionSubpanel
                   breadcrumbs={exceptionBreadcrumbs}
                   exceptionValues={exceptionValues}
+                  logData={selectedLogData}
                 />
               </ErrorBoundary>
             )}
@@ -1847,9 +1849,11 @@ function SidePanelHeader({
 }
 
 const ExceptionSubpanel = ({
+  logData,
   breadcrumbs,
   exceptionValues,
 }: {
+  logData?: any;
   breadcrumbs?: StacktraceBreadcrumb[];
   exceptionValues: {
     type: string;
@@ -1876,10 +1880,39 @@ const ExceptionSubpanel = ({
     [firstException.stacktrace?.frames],
   );
 
-  const chronologicalBreadcrumbs = useMemo(
-    () => breadcrumbs?.slice().reverse() ?? [],
-    [breadcrumbs],
-  );
+  const chronologicalBreadcrumbs = useMemo<StacktraceBreadcrumb[]>(() => {
+    return [
+      {
+        category: 'exception',
+        timestamp: new Date(logData?.timestamp ?? 0).getTime() / 1000,
+        message: `${firstException.type}: ${firstException.value} `,
+      },
+      ...(breadcrumbs?.slice().reverse() ?? []),
+    ];
+  }, [
+    breadcrumbs,
+    firstException.type,
+    firstException.value,
+    logData?.timestamp,
+  ]);
+
+  const {
+    handleToggleMoreRows: handleStacktraceToggleMoreRows,
+    hiddenRowsCount: stacktraceHiddenRowsCount,
+    visibleRows: stacktraceVisibleRows,
+    isExpanded: stacktraceExpanded,
+  } = useShowMoreRows({
+    rows: stacktraceFrames,
+  });
+
+  const {
+    handleToggleMoreRows: handleBreadcrumbToggleMoreRows,
+    hiddenRowsCount: breadcrumbHiddenRowsCount,
+    visibleRows: breadcrumbVisibleRows,
+    isExpanded: breadcrumbExpanded,
+  } = useShowMoreRows({
+    rows: chronologicalBreadcrumbs,
+  });
 
   // TODO: show all frames (stackable)
   return (
@@ -1932,9 +1965,30 @@ const ExceptionSubpanel = ({
           <Table
             hideHeader
             columns={stacktraceColumns}
-            data={stacktraceFrames}
+            data={stacktraceVisibleRows}
             emptyMessage="No stack trace found"
           />
+
+          {stacktraceHiddenRowsCount ? (
+            <Button
+              variant="dark"
+              className="text-muted-hover fs-8 mx-4 mt-1 mb-3"
+              size="sm"
+              as="a"
+              onClick={handleStacktraceToggleMoreRows}
+            >
+              {stacktraceExpanded ? (
+                <>
+                  <i className="bi bi-chevron-up me-2" /> Hide stack trace
+                </>
+              ) : (
+                <>
+                  <i className="bi bi-chevron-down me-2" />
+                  Show {stacktraceHiddenRowsCount} more frames
+                </>
+              )}
+            </Button>
+          ) : null}
         </SectionWrapper>
       </CollapsibleSection>
 
@@ -1942,9 +1996,29 @@ const ExceptionSubpanel = ({
         <SectionWrapper>
           <Table
             columns={breadcrumbColumns}
-            data={chronologicalBreadcrumbs}
+            data={breadcrumbVisibleRows}
             emptyMessage="No breadcrumbs found"
           />
+          {breadcrumbHiddenRowsCount ? (
+            <Button
+              variant="dark"
+              className="text-muted-hover fs-8 mx-4 mt-1 mb-3"
+              size="sm"
+              as="a"
+              onClick={handleBreadcrumbToggleMoreRows}
+            >
+              {breadcrumbExpanded ? (
+                <>
+                  <i className="bi bi-chevron-up me-2" /> Hide breadcrumbs
+                </>
+              ) : (
+                <>
+                  <i className="bi bi-chevron-down me-2" />
+                  Show {breadcrumbHiddenRowsCount} more breadcrumbs
+                </>
+              )}
+            </Button>
+          ) : null}
         </SectionWrapper>
       </CollapsibleSection>
     </div>

packages/app/src/LogSidePanelElements.tsx

@@ -7,8 +7,6 @@ import { CloseButton } from 'react-bootstrap';
 import { useLocalStorage } from './utils';
 import { ColumnDef, Row } from '@tanstack/react-table';
 import { TableCellButton } from './components/Table';
-import LogLevel from './LogLevel';
-
 import { UNDEFINED_WIDTH } from './tableUtils';
 
 export const CollapsibleSection = ({
@@ -158,24 +156,70 @@ export const stacktraceColumns: ColumnDef<StacktraceFrame>[] = [
   },
 ];
 
-const MAX_URL_LENGTH = 120;
+/**
+ * Breadcrumbs
+ */
+
 const Url = ({ url }: { url?: string }) => (
   <span className="text-slate-300" title={url}>
-    {url == null
-      ? ''
-      : url.length > MAX_URL_LENGTH
-      ? `${url.slice(0, MAX_URL_LENGTH)}...`
-      : url}
+    {url}
   </span>
 );
 
+const StatusChip = React.memo(({ status }: { status?: number }) => {
+  if (!status) {
+    return null;
+  }
+  const className =
+    status >= 500
+      ? 'text-danger bg-danger'
+      : status >= 400
+      ? 'text-warning bg-warning'
+      : 'text-success bg-success';
+  return (
+    <span
+      className={`badge lh-base rounded-5 bg-opacity-10 fw-normal ${className}`}
+    >
+      {status}
+    </span>
+  );
+});
+
+const LevelChip = React.memo(({ level }: { level?: string }) => {
+  if (!level) {
+    return null;
+  }
+  const className = level.includes('error')
+    ? 'text-danger bg-danger'
+    : level.includes('warn') || level.includes('warning')
+    ? 'text-warning bg-warning'
+    : 'text-slate-300 bg-grey';
+
+  return (
+    <span
+      className={`badge lh-base rounded-5 bg-opacity-10 fw-normal ${className}`}
+    >
+      {level}
+    </span>
+  );
+});
+
 export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
   {
     accessorKey: 'category',
     header: 'Category',
     size: 180,
     cell: ({ row }) => (
-      <span className="text-slate-300">{row.original.category}</span>
+      <span className="text-slate-300 d-flex align-items-center gap-2">
+        {row.original.category}
+        {row.original.category === 'console' && (
+          <LevelChip level={row.original.level} />
+        )}
+        {row.original.category === 'fetch' ||
+        row.original.category === 'xhr' ? (
+          <StatusChip status={row.original.data?.status_code} />
+        ) : null}
+      </span>
     ),
   },
   {
@@ -184,15 +228,18 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
     size: UNDEFINED_WIDTH,
     cell: ({ row }) => {
       // fetch
-      if (row.original.category === 'fetch' && row.original.data) {
+      if (
+        row.original.data &&
+        (row.original.category === 'fetch' || row.original.category === 'xhr')
+      ) {
         const { method, url } = row.original.data;
         return (
-          <>
+          <div className="text-truncate">
             <span>{method} </span>
             <span className="text-slate-300" title={url}>
               <Url url={url} />
             </span>
-          </>
+          </div>
         );
       }
 
@@ -200,7 +247,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
       if (row.original.category === 'navigation' && row.original.data) {
         const { from, to } = row.original.data;
         return (
-          <>
+          <div className="text-truncate">
             <span className="text-slate-300" title={from}>
               <Url url={from} />
             </span>
@@ -208,31 +255,28 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
             <span className="text-slate-300" title={to}>
               <Url url={to} />
             </span>
-          </>
+          </div>
         );
       }
 
-      return (
-        row.original.message || <span className="text-slate-500">Empty</span>
-      );
-    },
-  },
-  {
-    accessorKey: 'level',
-    header: '',
-    size: 80,
-    cell: ({ row }) => {
-      if (row.original.category === 'fetch' && row.original.data) {
-        const { status_code } = row.original.data;
-        return parseInt(status_code) >= 400 ? (
-          <span className="text-danger"> {status_code}</span>
-        ) : (
-          <span className="text-slate-500"> {status_code}</span>
+      // console
+      if (row.original.category === 'console') {
+        const { message } = row.original;
+        return (
+          <pre
+            className="text-slate-300 mb-0 text-truncate fs-8"
+            title={message}
+          >
+            {message}
+          </pre>
         );
       }
-      return row.original.level ? (
-        <LogLevel level={row.original.level} />
-      ) : null;
+
+      if (row.original.message) {
+        return <div className="text-truncate">{row.original.message}</div>;
+      }
+
+      return <span className="text-slate-500">Empty</span>;
     },
   },
   {
@@ -246,6 +290,31 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
   },
 ];
 
+export const useShowMoreRows = <T extends object>({
+  rows,
+  maxRows = 5,
+}: {
+  rows: T[];
+  maxRows?: number;
+}) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const visibleRows = React.useMemo(() => {
+    return isExpanded ? rows : rows.slice(0, maxRows);
+  }, [rows, isExpanded, maxRows]);
+
+  const hiddenRowsCount = React.useMemo<number | null>(() => {
+    const length = rows.length ?? 0;
+    return length > maxRows ? length - maxRows : null;
+  }, [rows.length, maxRows]);
+
+  const handleToggleMoreRows = React.useCallback(() => {
+    setIsExpanded(!isExpanded);
+  }, [isExpanded]);
+
+  return { visibleRows, hiddenRowsCount, handleToggleMoreRows, isExpanded };
+};
+
 /**
  * Request / Response Headers elements
  */

packages/app/src/components/Table.module.scss

@@ -9,6 +9,7 @@ $horizontalPadding: 12px;
 .tableWrapper {
   table {
     width: 100%;
+    table-layout: fixed;
 
     th,
     td {
@@ -41,6 +42,7 @@ $horizontalPadding: 12px;
     }
 
     td {
+      font-size: 12px;
       padding: $normalVerticalPadding $horizontalPadding;
       word-wrap: break-word;
       word-break: break-all;
@@ -70,6 +72,18 @@ $horizontalPadding: 12px;
       padding: $comfortableVerticalPadding $horizontalPadding;
     }
   }
+
+  // Interactive
+  &.tableInteractive {
+    tr:hover td {
+      cursor: pointer;
+      background-color: #ffffff08;
+    }
+    tr:active td {
+      background-color: #00000050;
+      opacity: 0.8;
+    }
+  }
 }
 
 .emptyMessage {

packages/app/src/components/Table.tsx

@@ -17,6 +17,7 @@ type TableProps<T extends object> = {
   hideHeader?: boolean;
   borderless?: boolean;
   density?: 'compact' | 'normal' | 'comfortable';
+  interactive?: boolean;
 };
 
 export const Table = <T extends object>({
@@ -26,6 +27,7 @@ export const Table = <T extends object>({
   hideHeader,
   borderless,
   density = 'normal',
+  interactive,
 }: TableProps<T>) => {
   const table = useReactTable({
     data,
@@ -43,6 +45,7 @@ export const Table = <T extends object>({
         [styles.tableBorderless]: borderless,
         [styles.tableDensityCompact]: density === 'compact',
         [styles.tableDensityComfortable]: density === 'comfortable',
+        [styles.tableInteractive]: interactive,
       })}
     >
       <table>
@@ -51,7 +54,15 @@ export const Table = <T extends object>({
             {table.getHeaderGroups().map(headerGroup => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map(header => (
-                  <th key={header.id}>
+                  <th
+                    key={header.id}
+                    style={{
+                      width:
+                        header.column.getSize() === UNDEFINED_WIDTH
+                          ? '100%'
+                          : header.column.getSize(),
+                    }}
+                  >
                     {header.isPlaceholder
                       ? null
                       : flexRender(
@@ -75,11 +86,6 @@ export const Table = <T extends object>({
                       cell.column.getSize() === UNDEFINED_WIDTH
                         ? '100%'
                         : cell.column.getSize(),
-                    // Allow unknown width columns to shrink to 0
-                    minWidth:
-                      cell.column.getSize() === UNDEFINED_WIDTH
-                        ? 0
-                        : cell.column.getSize(),
                   }}
                 >
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -101,7 +107,7 @@ export const TableCellButton: React.VFC<{
 }> = ({ onClick, title, label, biIcon }) => {
   return (
     <button className={styles.tableCellButton} title={title} onClick={onClick}>
-      <span>{label}</span>
+      {label && <span>{label}</span>}
       {biIcon ? <i className={`bi bi-${biIcon}`} /> : null}
     </button>
   );

packages/app/src/stories/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  rules: { 'import/no-anonymous-default-export': 'off' },
+};

packages/app/src/stories/LogSidePanelElements.mocks.ts

@@ -0,0 +1,940 @@
+import type { StacktraceBreadcrumb } from '../types';
+
+export const MOCK_BREADCRUMBS: StacktraceBreadcrumb[] = [
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/log-views',
+    },
+    timestamp: 1700614385.475,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/dashboards',
+    },
+    timestamp: 1700614385.475,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: '/api/config',
+    },
+    timestamp: 1700614385.484,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/team',
+    },
+    timestamp: 1700614385.552,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs/propertyTypeMappings',
+    },
+    timestamp: 1700614385.554,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: '/_next/static/development/_devPagesManifest.json',
+    },
+    timestamp: 1700614385.554,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 500,
+      url: 'http://localhost:8000/logs/histogram?q=&startTime=1700613485000&endTime=1700614385000',
+    },
+    timestamp: 1700614385.747,
+    type: 'http',
+  },
+  {
+    category: 'ui.click',
+    message:
+      'tr.LogTable_tableRow__Sil_V > td.align-top.overflow-hidden.text-truncate',
+    timestamp: 1700614386.846,
+  },
+  {
+    category: 'navigation',
+    data: {
+      from: '/search',
+      to: '/search?lid=6363eefd-c2e0-4b34-9498-728bdfb8f8fb&sk=1700614377713000000&from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05',
+    },
+    timestamp: 1700614386.898,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 301,
+      url: 'http://localhost:8080/api/config',
+    },
+    timestamp: 1700614387.052,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 404,
+      url: 'http://localhost:8000/logs/6363eefd-c2e0-4b34-9498-728bdfb8f8fb?sortKey=1700614377713000000',
+    },
+    timestamp: 1700614387.098,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 500,
+      url: 'http://localhost:8000/logs?endTime=1700614377713&offset=0&q=trace_id%3A%22d543c1bb39a54d939e1eb2e4188a105c%22+&startTime=1700599977713&order=desc&limit=1500&extraFields%5B%5D=end_timestamp&extraFields%5B%5D=parent_span_id&extraFields%5B%5D=rum_session_id&extraFields%5B%5D=span_id&extraFields%5B%5D=teamName&extraFields%5B%5D=trace_id&extraFields%5B%5D=userEmail&extraFields%5B%5D=userName',
+    },
+    timestamp: 1700614387.156,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 403,
+      url: 'http://localhost:8000/logs?endTime=1700628777713&offset=0&q=trace_id%3A%22d543c1bb39a54d939e1eb2e4188a105c%22+&startTime=1700614377713&order=asc&limit=1500&extraFields%5B%5D=end_timestamp&extraFields%5B%5D=parent_span_id&extraFields%5B%5D=rum_session_id&extraFields%5B%5D=span_id&extraFields%5B%5D=teamName&extraFields%5B%5D=trace_id&extraFields%5B%5D=userEmail&extraFields%5B%5D=userName',
+    },
+    timestamp: 1700614387.156,
+    type: 'http',
+  },
+  {
+    category: 'console',
+    data: {
+      arguments: [
+        'Root nodes did not cover all events',
+        0,
+        '\n    at TraceChart (webpack-internal:///./src/LogSidePanel.tsx:260:25)\n    at TraceSubpanel (webpack-internal:///./src/LogSidePanel.tsx:488:25)\n    at div\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at div\n    at nav\n    at div\n    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)\n    at LogSidePanel (webpack-internal:///./src/LogSidePanel.tsx:2333:23)\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at LogViewerContainer (webpack-internal:///./src/SearchPage.tsx:334:39)\n    at div\n    at div\n    at div\n    at SearchPage (webpack-internal:///./src/SearchPage.tsx:448:72)\n    at UserPreferencesProvider (webpack-internal:///./src/useUserPreferences.tsx:26:26)\n    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)\n    at QueryParamProviderInner (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:28:3)\n    at NextAdapter (webpack-internal:///./node_modules/next-query-params/dist/next-query-params.esm.js:15:23)\n    at QueryParamProvider (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:47:3)\n    at QueryParamProvider (webpack-internal:///./src/useQueryParam.tsx:29:26)\n    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/import.mjs:45:65)\n    at MyApp (webpack-internal:///./pages/_app.tsx:62:27)\n    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)\n    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)\n    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)\n    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)\n    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:403:27)',
+      ],
+      logger: 'console',
+    },
+    level: 'warn',
+    message:
+      'Root nodes did not cover all events 0 \n    at TraceChart (webpack-internal:///./src/LogSidePanel.tsx:260:25)\n    at TraceSubpanel (webpack-internal:///./src/LogSidePanel.tsx:488:25)\n    at div\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at div\n    at nav\n    at div\n    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)\n    at LogSidePanel (webpack-internal:///./src/LogSidePanel.tsx:2333:23)\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at LogViewerContainer (webpack-internal:///./src/SearchPage.tsx:334:39)\n    at div\n    at div\n    at div\n    at SearchPage (webpack-internal:///./src/SearchPage.tsx:448:72)\n    at UserPreferencesProvider (webpack-internal:///./src/useUserPreferences.tsx:26:26)\n    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)\n    at QueryParamProviderInner (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:28:3)\n    at NextAdapter (webpack-internal:///./node_modules/next-query-params/dist/next-query-params.esm.js:15:23)\n    at QueryParamProvider (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:47:3)\n    at QueryParamProvider (webpack-internal:///./src/useQueryParam.tsx:29:26)\n    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/import.mjs:45:65)\n    at MyApp (webpack-internal:///./pages/_app.tsx:62:27)\n    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)\n    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)\n    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)\n    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)\n    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:403:27)',
+    timestamp: 1700614387.166,
+  },
+  {
+    category: 'xhr',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:4318/v1/traces',
+    },
+    timestamp: 1700614389.525,
+    type: 'http',
+  },
+  {
+    category: 'ui.click',
+    message:
+      'label#EZDrawer__overlaylog-side-panel-6363eefd-c2e0-4b34-9498-728bdfb8f8fb.EZDrawer__overlay',
+    timestamp: 1700614389.988,
+  },
+  {
+    category: 'ui.click',
+    message:
+      'input#EZDrawer__checkboxlog-side-panel-6363eefd-c2e0-4b34-9498-728bdfb8f8fb.EZDrawer__checkbox[type="checkbox"]',
+    timestamp: 1700614389.988,
+  },
+  {
+    category: 'navigation',
+    data: {
+      from: '/search?lid=6363eefd-c2e0-4b34-9498-728bdfb8f8fb&sk=1700614377713000000&from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05',
+      to: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05',
+    },
+    timestamp: 1700614389.991,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8080/api/config',
+    },
+    timestamp: 1700614390.083,
+    type: 'http',
+  },
+  {
+    category: 'ui.click',
+    message:
+      'tr.LogTable_tableRow__Sil_V > td.align-top.overflow-hidden.text-truncate > span',
+    timestamp: 1700614390.643,
+  },
+  {
+    category: 'navigation',
+    data: {
+      from: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05',
+      to: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05&lid=e18cc0b9-a883-491c-921a-2589e36ac838&sk=1700614380046000000',
+    },
+    timestamp: 1700614390.644,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:4318/v1/logs',
+    },
+    timestamp: 1700614390.76,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8080/api/config',
+    },
+    timestamp: 1700614390.763,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs/e18cc0b9-a883-491c-921a-2589e36ac838?sortKey=1700614380046000000',
+    },
+    timestamp: 1700614390.794,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs?endTime=1700628780046&offset=0&q=trace_id%3A%22%22+&startTime=1700614380046&order=asc&limit=1500&extraFields%5B%5D=end_timestamp&extraFields%5B%5D=parent_span_id&extraFields%5B%5D=rum_session_id&extraFields%5B%5D=span_id&extraFields%5B%5D=teamName&extraFields%5B%5D=trace_id&extraFields%5B%5D=userEmail&extraFields%5B%5D=userName',
+    },
+    timestamp: 1700614390.839,
+    type: 'http',
+  },
+  {
+    category: 'ui.click',
+    message:
+      'label#EZDrawer__overlaylog-side-panel-e18cc0b9-a883-491c-921a-2589e36ac838.EZDrawer__overlay',
+    timestamp: 1700614390.884,
+  },
+  {
+    category: 'ui.click',
+    message:
+      'input#EZDrawer__checkboxlog-side-panel-e18cc0b9-a883-491c-921a-2589e36ac838.EZDrawer__checkbox[type="checkbox"]',
+    timestamp: 1700614390.884,
+  },
+  {
+    category: 'navigation',
+    data: {
+      from: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05&lid=e18cc0b9-a883-491c-921a-2589e36ac838&sk=1700614380046000000',
+      to: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05',
+    },
+    timestamp: 1700614390.885,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8080/api/config',
+    },
+    timestamp: 1700614390.968,
+    type: 'http',
+  },
+  {
+    category: 'ui.click',
+    message:
+      'tr.LogTable_tableRow__Sil_V > td.align-top.overflow-hidden.text-truncate',
+    timestamp: 1700614391.177,
+  },
+  {
+    category: 'navigation',
+    data: {
+      from: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05',
+      to: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05&lid=d52ca7d5-d849-476c-a05c-73c2a3adfe83&sk=1700614380392000000',
+    },
+    timestamp: 1700614391.178,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8080/api/config',
+    },
+    timestamp: 1700614391.272,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs/d52ca7d5-d849-476c-a05c-73c2a3adfe83?sortKey=1700614380392000000',
+    },
+    timestamp: 1700614391.297,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs?endTime=1700614380392&offset=0&q=trace_id%3A%22afb1ff12ec8b4d9a90d9c7b9d5eda600%22+&startTime=1700599980392&order=desc&limit=1500&extraFields%5B%5D=end_timestamp&extraFields%5B%5D=parent_span_id&extraFields%5B%5D=rum_session_id&extraFields%5B%5D=span_id&extraFields%5B%5D=teamName&extraFields%5B%5D=trace_id&extraFields%5B%5D=userEmail&extraFields%5B%5D=userName',
+    },
+    timestamp: 1700614391.34,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs?endTime=1700628780392&offset=0&q=trace_id%3A%22afb1ff12ec8b4d9a90d9c7b9d5eda600%22+&startTime=1700614380392&order=asc&limit=1500&extraFields%5B%5D=end_timestamp&extraFields%5B%5D=parent_span_id&extraFields%5B%5D=rum_session_id&extraFields%5B%5D=span_id&extraFields%5B%5D=teamName&extraFields%5B%5D=trace_id&extraFields%5B%5D=userEmail&extraFields%5B%5D=userName',
+    },
+    timestamp: 1700614391.346,
+    type: 'http',
+  },
+  {
+    category: 'console',
+    data: {
+      arguments: [
+        'Root nodes did not cover all events',
+        0,
+        '\n    at TraceChart (webpack-internal:///./src/LogSidePanel.tsx:260:25)\n    at TraceSubpanel (webpack-internal:///./src/LogSidePanel.tsx:488:25)\n    at div\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at div\n    at nav\n    at div\n    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)\n    at LogSidePanel (webpack-internal:///./src/LogSidePanel.tsx:2333:23)\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at LogViewerContainer (webpack-internal:///./src/SearchPage.tsx:334:39)\n    at div\n    at div\n    at div\n    at SearchPage (webpack-internal:///./src/SearchPage.tsx:448:72)\n    at UserPreferencesProvider (webpack-internal:///./src/useUserPreferences.tsx:26:26)\n    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)\n    at QueryParamProviderInner (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:28:3)\n    at NextAdapter (webpack-internal:///./node_modules/next-query-params/dist/next-query-params.esm.js:15:23)\n    at QueryParamProvider (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:47:3)\n    at QueryParamProvider (webpack-internal:///./src/useQueryParam.tsx:29:26)\n    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/import.mjs:45:65)\n    at MyApp (webpack-internal:///./pages/_app.tsx:62:27)\n    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)\n    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)\n    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)\n    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)\n    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:403:27)',
+      ],
+      logger: 'console',
+    },
+    level: 'error',
+    message:
+      'Root nodes did not cover all events 0 \n    at TraceChart (webpack-internal:///./src/LogSidePanel.tsx:260:25)\n    at TraceSubpanel (webpack-internal:///./src/LogSidePanel.tsx:488:25)\n    at div\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at div\n    at nav\n    at div\n    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)\n    at LogSidePanel (webpack-internal:///./src/LogSidePanel.tsx:2333:23)\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at LogViewerContainer (webpack-internal:///./src/SearchPage.tsx:334:39)\n    at div\n    at div\n    at div\n    at SearchPage (webpack-internal:///./src/SearchPage.tsx:448:72)\n    at UserPreferencesProvider (webpack-internal:///./src/useUserPreferences.tsx:26:26)\n    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)\n    at QueryParamProviderInner (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:28:3)\n    at NextAdapter (webpack-internal:///./node_modules/next-query-params/dist/next-query-params.esm.js:15:23)\n    at QueryParamProvider (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:47:3)\n    at QueryParamProvider (webpack-internal:///./src/useQueryParam.tsx:29:26)\n    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/import.mjs:45:65)\n    at MyApp (webpack-internal:///./pages/_app.tsx:62:27)\n    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)\n    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)\n    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)\n    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)\n    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:403:27)',
+    timestamp: 1700614391.348,
+  },
+  {
+    category: 'xhr',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:4318/v1/traces',
+    },
+    timestamp: 1700614393.928,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:4318/v1/logs',
+    },
+    timestamp: 1700614395.713,
+    type: 'http',
+  },
+  {
+    category: 'xhr',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:4318/v1/traces',
+    },
+    timestamp: 1700614399.726,
+    type: 'http',
+  },
+  {
+    category: 'console',
+    data: {
+      arguments: [
+        'Root nodes did not cover all events',
+        0,
+        '\n    at TraceChart (webpack-internal:///./src/LogSidePanel.tsx:260:25)\n    at TraceSubpanel (webpack-internal:///./src/LogSidePanel.tsx:488:25)\n    at div\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at div\n    at nav\n    at div\n    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)\n    at LogSidePanel (webpack-internal:///./src/LogSidePanel.tsx:2333:23)\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at LogViewerContainer (webpack-internal:///./src/SearchPage.tsx:334:39)\n    at div\n    at div\n    at div\n    at SearchPage (webpack-internal:///./src/SearchPage.tsx:448:72)\n    at UserPreferencesProvider (webpack-internal:///./src/useUserPreferences.tsx:26:26)\n    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)\n    at QueryParamProviderInner (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:28:3)\n    at NextAdapter (webpack-internal:///./node_modules/next-query-params/dist/next-query-params.esm.js:15:23)\n    at QueryParamProvider (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:47:3)\n    at QueryParamProvider (webpack-internal:///./src/useQueryParam.tsx:29:26)\n    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/import.mjs:45:65)\n    at MyApp (webpack-internal:///./pages/_app.tsx:62:27)\n    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)\n    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)\n    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)\n    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)\n    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:403:27)',
+      ],
+      logger: 'console',
+    },
+    level: 'error',
+    message:
+      'Root nodes did not cover all events 0 \n    at TraceChart (webpack-internal:///./src/LogSidePanel.tsx:260:25)\n    at TraceSubpanel (webpack-internal:///./src/LogSidePanel.tsx:488:25)\n    at div\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at div\n    at nav\n    at div\n    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)\n    at LogSidePanel (webpack-internal:///./src/LogSidePanel.tsx:2333:23)\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at LogViewerContainer (webpack-internal:///./src/SearchPage.tsx:334:39)\n    at div\n    at div\n    at div\n    at SearchPage (webpack-internal:///./src/SearchPage.tsx:448:72)\n    at UserPreferencesProvider (webpack-internal:///./src/useUserPreferences.tsx:26:26)\n    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)\n    at QueryParamProviderInner (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:28:3)\n    at NextAdapter (webpack-internal:///./node_modules/next-query-params/dist/next-query-params.esm.js:15:23)\n    at QueryParamProvider (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:47:3)\n    at QueryParamProvider (webpack-internal:///./src/useQueryParam.tsx:29:26)\n    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/import.mjs:45:65)\n    at MyApp (webpack-internal:///./pages/_app.tsx:62:27)\n    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)\n    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)\n    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)\n    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)\n    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:403:27)',
+    timestamp: 1700614401.026,
+  },
+  {
+    category: 'console',
+    data: {
+      arguments: [
+        'Root nodes did not cover all events',
+        0,
+        '\n    at TraceChart (webpack-internal:///./src/LogSidePanel.tsx:260:25)\n    at TraceSubpanel (webpack-internal:///./src/LogSidePanel.tsx:488:25)\n    at div\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at div\n    at nav\n    at div\n    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)\n    at LogSidePanel (webpack-internal:///./src/LogSidePanel.tsx:2333:23)\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at LogViewerContainer (webpack-internal:///./src/SearchPage.tsx:334:39)\n    at div\n    at div\n    at div\n    at SearchPage (webpack-internal:///./src/SearchPage.tsx:448:72)\n    at UserPreferencesProvider (webpack-internal:///./src/useUserPreferences.tsx:26:26)\n    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)\n    at QueryParamProviderInner (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:28:3)\n    at NextAdapter (webpack-internal:///./node_modules/next-query-params/dist/next-query-params.esm.js:15:23)\n    at QueryParamProvider (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:47:3)\n    at QueryParamProvider (webpack-internal:///./src/useQueryParam.tsx:29:26)\n    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/import.mjs:45:65)\n    at MyApp (webpack-internal:///./pages/_app.tsx:62:27)\n    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)\n    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)\n    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)\n    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)\n    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:403:27)',
+      ],
+      logger: 'console',
+    },
+    level: 'error',
+    message:
+      'Root nodes did not cover all events 0 \n    at TraceChart (webpack-internal:///./src/LogSidePanel.tsx:260:25)\n    at TraceSubpanel (webpack-internal:///./src/LogSidePanel.tsx:488:25)\n    at div\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at div\n    at nav\n    at div\n    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)\n    at LogSidePanel (webpack-internal:///./src/LogSidePanel.tsx:2333:23)\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at LogViewerContainer (webpack-internal:///./src/SearchPage.tsx:334:39)\n    at div\n    at div\n    at div\n    at SearchPage (webpack-internal:///./src/SearchPage.tsx:448:72)\n    at UserPreferencesProvider (webpack-internal:///./src/useUserPreferences.tsx:26:26)\n    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)\n    at QueryParamProviderInner (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:28:3)\n    at NextAdapter (webpack-internal:///./node_modules/next-query-params/dist/next-query-params.esm.js:15:23)\n    at QueryParamProvider (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:47:3)\n    at QueryParamProvider (webpack-internal:///./src/useQueryParam.tsx:29:26)\n    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/import.mjs:45:65)\n    at MyApp (webpack-internal:///./pages/_app.tsx:62:27)\n    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)\n    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)\n    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)\n    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)\n    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:403:27)',
+    timestamp: 1700614403.177,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/log-views',
+    },
+    timestamp: 1700614403.221,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/dashboards',
+    },
+    timestamp: 1700614403.225,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/me',
+    },
+    timestamp: 1700614403.226,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/team',
+    },
+    timestamp: 1700614403.226,
+    type: 'http',
+  },
+  {
+    category: 'console',
+    data: {
+      arguments: [
+        'Root nodes did not cover all events',
+        0,
+        '\n    at TraceChart (webpack-internal:///./src/LogSidePanel.tsx:260:25)\n    at TraceSubpanel (webpack-internal:///./src/LogSidePanel.tsx:488:25)\n    at div\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at div\n    at nav\n    at div\n    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)\n    at LogSidePanel (webpack-internal:///./src/LogSidePanel.tsx:2333:23)\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at LogViewerContainer (webpack-internal:///./src/SearchPage.tsx:334:39)\n    at div\n    at div\n    at div\n    at SearchPage (webpack-internal:///./src/SearchPage.tsx:448:72)\n    at UserPreferencesProvider (webpack-internal:///./src/useUserPreferences.tsx:26:26)\n    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)\n    at QueryParamProviderInner (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:28:3)\n    at NextAdapter (webpack-internal:///./node_modules/next-query-params/dist/next-query-params.esm.js:15:23)\n    at QueryParamProvider (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:47:3)\n    at QueryParamProvider (webpack-internal:///./src/useQueryParam.tsx:29:26)\n    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/import.mjs:45:65)\n    at MyApp (webpack-internal:///./pages/_app.tsx:62:27)\n    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)\n    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)\n    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)\n    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)\n    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:403:27)',
+      ],
+      logger: 'console',
+    },
+    level: 'error',
+    message:
+      'Root nodes did not cover all events 0 \n    at TraceChart (webpack-internal:///./src/LogSidePanel.tsx:260:25)\n    at TraceSubpanel (webpack-internal:///./src/LogSidePanel.tsx:488:25)\n    at div\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at div\n    at nav\n    at div\n    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)\n    at LogSidePanel (webpack-internal:///./src/LogSidePanel.tsx:2333:23)\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at LogViewerContainer (webpack-internal:///./src/SearchPage.tsx:334:39)\n    at div\n    at div\n    at div\n    at SearchPage (webpack-internal:///./src/SearchPage.tsx:448:72)\n    at UserPreferencesProvider (webpack-internal:///./src/useUserPreferences.tsx:26:26)\n    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)\n    at QueryParamProviderInner (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:28:3)\n    at NextAdapter (webpack-internal:///./node_modules/next-query-params/dist/next-query-params.esm.js:15:23)\n    at QueryParamProvider (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:47:3)\n    at QueryParamProvider (webpack-internal:///./src/useQueryParam.tsx:29:26)\n    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/import.mjs:45:65)\n    at MyApp (webpack-internal:///./pages/_app.tsx:62:27)\n    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)\n    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)\n    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)\n    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)\n    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:403:27)',
+    timestamp: 1700614403.246,
+  },
+  {
+    category: 'ui.click',
+    message:
+      'div.d-flex.align-items-center.mb-1.text-white-hover > div.fs-7.text-slate-200',
+    timestamp: 1700614403.289,
+  },
+  {
+    category: 'ui.click',
+    message:
+      'label#EZDrawer__overlaylog-side-panel-d52ca7d5-d849-476c-a05c-73c2a3adfe83.EZDrawer__overlay',
+    timestamp: 1700614404.577,
+  },
+  {
+    category: 'ui.click',
+    message:
+      'input#EZDrawer__checkboxlog-side-panel-d52ca7d5-d849-476c-a05c-73c2a3adfe83.EZDrawer__checkbox[type="checkbox"]',
+    timestamp: 1700614404.578,
+  },
+  {
+    category: 'navigation',
+    data: {
+      from: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05&lid=d52ca7d5-d849-476c-a05c-73c2a3adfe83&sk=1700614380392000000',
+      to: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05',
+    },
+    timestamp: 1700614404.58,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8080/api/config',
+    },
+    timestamp: 1700614404.646,
+    type: 'http',
+  },
+  {
+    category: 'xhr',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:4318/v1/traces',
+    },
+    timestamp: 1700614405.048,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:4318/v1/logs',
+    },
+    timestamp: 1700614406.081,
+    type: 'http',
+  },
+  {
+    category: 'xhr',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:4318/v1/traces',
+    },
+    timestamp: 1700614410.095,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/log-views',
+    },
+    timestamp: 1700614429.716,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/dashboards',
+    },
+    timestamp: 1700614429.718,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/me',
+    },
+    timestamp: 1700614429.718,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/team',
+    },
+    timestamp: 1700614429.718,
+    type: 'http',
+  },
+  {
+    category: 'xhr',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:4318/v1/traces',
+    },
+    timestamp: 1700614433.734,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:4318/v1/logs',
+    },
+    timestamp: 1700614434.196,
+    type: 'http',
+  },
+  {
+    category: 'console',
+    data: {
+      arguments: ['[Fast Refresh] rebuilding'],
+      logger: 'console',
+    },
+    level: 'log',
+    message: '[Fast Refresh] rebuilding',
+    timestamp: 1700614457.825,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8080/_next/static/webpack/ab04658d24484bcd.webpack.hot-update.json',
+    },
+    timestamp: 1700614458.993,
+    type: 'http',
+  },
+  {
+    category: 'console',
+    data: {
+      arguments: ['[Fast Refresh] done in 1196ms'],
+      logger: 'console',
+    },
+    level: 'log',
+    message: '[Fast Refresh] done in 1196ms',
+    timestamp: 1700614459.02,
+  },
+  {
+    category: 'xhr',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:4318/v1/traces',
+    },
+    timestamp: 1700614461.837,
+    type: 'http',
+  },
+  {
+    category: 'console',
+    data: {
+      arguments: ['[Fast Refresh] rebuilding'],
+      logger: 'console',
+    },
+    level: 'log',
+    message: '[Fast Refresh] rebuilding',
+    timestamp: 1700614462.73,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://localhost:4318/v1/logs',
+    },
+    timestamp: 1700614462.832,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8080/_next/static/webpack/df34ac0440b36ae9.webpack.hot-update.json',
+    },
+    timestamp: 1700614463.063,
+    type: 'http',
+  },
+  {
+    category: 'console',
+    data: {
+      arguments: ['[Fast Refresh] done in 360ms'],
+      logger: 'console',
+    },
+    level: 'log',
+    message: '[Fast Refresh] done in 360ms',
+    timestamp: 1700614463.09,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/log-views',
+    },
+    timestamp: 1700614463.486,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/dashboards',
+    },
+    timestamp: 1700614463.488,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/me',
+    },
+    timestamp: 1700614463.488,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/team',
+    },
+    timestamp: 1700614463.488,
+    type: 'http',
+  },
+  {
+    category: 'ui.click',
+    message:
+      'tr.LogTable_tableRow__Sil_V > td.align-top.overflow-hidden.text-truncate',
+    timestamp: 1700614463.712,
+  },
+  {
+    category: 'navigation',
+    data: {
+      from: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05',
+      to: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05&lid=f8ded9a7-9b1c-402c-a34d-64c36ea89bc3&sk=1700614372868000000',
+    },
+    timestamp: 1700614463.713,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs/f8ded9a7-9b1c-402c-a34d-64c36ea89bc3?sortKey=1700614372868000000',
+    },
+    timestamp: 1700614463.828,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8080/api/config',
+    },
+    timestamp: 1700614463.868,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs?endTime=1700628772868&offset=0&q=trace_id%3A%225487f9962524b736d1cf582e7e7bf47b%22+&startTime=1700614372868&order=asc&limit=1500&extraFields%5B%5D=end_timestamp&extraFields%5B%5D=parent_span_id&extraFields%5B%5D=rum_session_id&extraFields%5B%5D=span_id&extraFields%5B%5D=teamName&extraFields%5B%5D=trace_id&extraFields%5B%5D=userEmail&extraFields%5B%5D=userName',
+    },
+    timestamp: 1700614463.911,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs?endTime=1700614372868&offset=0&q=trace_id%3A%225487f9962524b736d1cf582e7e7bf47b%22+&startTime=1700599972868&order=desc&limit=1500&extraFields%5B%5D=end_timestamp&extraFields%5B%5D=parent_span_id&extraFields%5B%5D=rum_session_id&extraFields%5B%5D=span_id&extraFields%5B%5D=teamName&extraFields%5B%5D=trace_id&extraFields%5B%5D=userEmail&extraFields%5B%5D=userName',
+    },
+    timestamp: 1700614463.929,
+    type: 'http',
+  },
+  {
+    category: 'ui.click',
+    message:
+      'label#EZDrawer__overlaylog-side-panel-f8ded9a7-9b1c-402c-a34d-64c36ea89bc3.EZDrawer__overlay',
+    timestamp: 1700614464.587,
+  },
+  {
+    category: 'ui.click',
+    message:
+      'input#EZDrawer__checkboxlog-side-panel-f8ded9a7-9b1c-402c-a34d-64c36ea89bc3.EZDrawer__checkbox[type="checkbox"]',
+    timestamp: 1700614464.587,
+  },
+  {
+    category: 'navigation',
+    data: {
+      from: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05&lid=f8ded9a7-9b1c-402c-a34d-64c36ea89bc3&sk=1700614372868000000',
+      to: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05',
+    },
+    timestamp: 1700614464.591,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8080/api/config',
+    },
+    timestamp: 1700614464.673,
+    type: 'http',
+  },
+  {
+    category: 'ui.click',
+    message:
+      'tr.LogTable_tableRow__Sil_V > td.align-top.overflow-hidden.text-truncate',
+    timestamp: 1700614464.998,
+  },
+  {
+    category: 'navigation',
+    data: {
+      from: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05',
+      to: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05&lid=8f15b86b-5a16-4f4f-9fc5-175d758ac015&sk=1700614373937000000',
+    },
+    timestamp: 1700614465,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8080/api/config',
+    },
+    timestamp: 1700614465.077,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs/8f15b86b-5a16-4f4f-9fc5-175d758ac015?sortKey=1700614373937000000',
+    },
+    timestamp: 1700614465.101,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs?endTime=1700614373937&offset=0&q=trace_id%3A%224879cd4c130096dcb5338f29a323f517%22+&startTime=1700599973937&order=desc&limit=1500&extraFields%5B%5D=end_timestamp&extraFields%5B%5D=parent_span_id&extraFields%5B%5D=rum_session_id&extraFields%5B%5D=span_id&extraFields%5B%5D=teamName&extraFields%5B%5D=trace_id&extraFields%5B%5D=userEmail&extraFields%5B%5D=userName',
+    },
+    timestamp: 1700614465.151,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs?endTime=1700628773937&offset=0&q=trace_id%3A%224879cd4c130096dcb5338f29a323f517%22+&startTime=1700614373937&order=asc&limit=1500&extraFields%5B%5D=end_timestamp&extraFields%5B%5D=parent_span_id&extraFields%5B%5D=rum_session_id&extraFields%5B%5D=span_id&extraFields%5B%5D=teamName&extraFields%5B%5D=trace_id&extraFields%5B%5D=userEmail&extraFields%5B%5D=userName',
+    },
+    timestamp: 1700614465.161,
+    type: 'http',
+  },
+  {
+    category: 'ui.click',
+    message:
+      'label#EZDrawer__overlaylog-side-panel-8f15b86b-5a16-4f4f-9fc5-175d758ac015.EZDrawer__overlay',
+    timestamp: 1700614465.404,
+  },
+  {
+    category: 'ui.click',
+    message:
+      'input#EZDrawer__checkboxlog-side-panel-8f15b86b-5a16-4f4f-9fc5-175d758ac015.EZDrawer__checkbox[type="checkbox"]',
+    timestamp: 1700614465.405,
+  },
+  {
+    category: 'navigation',
+    data: {
+      from: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05&lid=8f15b86b-5a16-4f4f-9fc5-175d758ac015&sk=1700614373937000000',
+      to: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05',
+    },
+    timestamp: 1700614465.406,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8080/api/config',
+    },
+    timestamp: 1700614465.483,
+    type: 'http',
+  },
+  {
+    category: 'ui.click',
+    message:
+      'tr.LogTable_tableRow__Sil_V > td.align-top.overflow-hidden.text-truncate',
+    timestamp: 1700614465.639,
+  },
+  {
+    category: 'navigation',
+    data: {
+      from: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05',
+      to: '/search?from=1700613485000&to=1700614385000&tq=Nov+21+17%3A38%3A05+-+Nov+21+17%3A53%3A05&lid=ac72e41d-d841-49a6-ae43-c47e52ae2c94&sk=1700614374831000000',
+    },
+    timestamp: 1700614465.64,
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8080/api/config',
+    },
+    timestamp: 1700614465.721,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs/ac72e41d-d841-49a6-ae43-c47e52ae2c94?sortKey=1700614374831000000',
+    },
+    timestamp: 1700614465.735,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs?endTime=1700628774831&offset=0&q=trace_id%3A%223c8646b2b3c34db5971a729185d1a3c0%22+&startTime=1700614374831&order=asc&limit=1500&extraFields%5B%5D=end_timestamp&extraFields%5B%5D=parent_span_id&extraFields%5B%5D=rum_session_id&extraFields%5B%5D=span_id&extraFields%5B%5D=teamName&extraFields%5B%5D=trace_id&extraFields%5B%5D=userEmail&extraFields%5B%5D=userName',
+    },
+    timestamp: 1700614465.77,
+    type: 'http',
+  },
+  {
+    category: 'fetch',
+    data: {
+      method: 'GET',
+      status_code: 200,
+      url: 'http://localhost:8000/logs?endTime=1700614374831&offset=0&q=trace_id%3A%223c8646b2b3c34db5971a729185d1a3c0%22+&startTime=1700599974831&order=desc&limit=1500&extraFields%5B%5D=end_timestamp&extraFields%5B%5D=parent_span_id&extraFields%5B%5D=rum_session_id&extraFields%5B%5D=span_id&extraFields%5B%5D=teamName&extraFields%5B%5D=trace_id&extraFields%5B%5D=userEmail&extraFields%5B%5D=userName',
+    },
+    timestamp: 1700614465.775,
+    type: 'http',
+  },
+  {
+    category: 'console',
+    data: {
+      arguments: [
+        'Root nodes did not cover all events',
+        0,
+        '\n    at TraceChart (webpack-internal:///./src/LogSidePanel.tsx:260:25)\n    at TraceSubpanel (webpack-internal:///./src/LogSidePanel.tsx:488:25)\n    at div\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at div\n    at nav\n    at div\n    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)\n    at LogSidePanel (webpack-internal:///./src/LogSidePanel.tsx:2333:23)\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at LogViewerContainer (webpack-internal:///./src/SearchPage.tsx:334:39)\n    at div\n    at div\n    at div\n    at SearchPage (webpack-internal:///./src/SearchPage.tsx:448:72)\n    at UserPreferencesProvider (webpack-internal:///./src/useUserPreferences.tsx:26:26)\n    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)\n    at QueryParamProviderInner (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:28:3)\n    at NextAdapter (webpack-internal:///./node_modules/next-query-params/dist/next-query-params.esm.js:15:23)\n    at QueryParamProvider (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:47:3)\n    at QueryParamProvider (webpack-internal:///./src/useQueryParam.tsx:29:26)\n    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/import.mjs:45:65)\n    at MyApp (webpack-internal:///./pages/_app.tsx:62:27)\n    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)\n    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)\n    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)\n    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)\n    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:403:27)',
+      ],
+      logger: 'console',
+    },
+    level: 'error',
+    message:
+      'Root nodes did not cover all events 0 \n    at TraceChart (webpack-internal:///./src/LogSidePanel.tsx:260:25)\n    at TraceSubpanel (webpack-internal:///./src/LogSidePanel.tsx:488:25)\n    at div\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at div\n    at nav\n    at div\n    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)\n    at LogSidePanel (webpack-internal:///./src/LogSidePanel.tsx:2333:23)\n    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)\n    at LogViewerContainer (webpack-internal:///./src/SearchPage.tsx:334:39)\n    at div\n    at div\n    at div\n    at SearchPage (webpack-internal:///./src/SearchPage.tsx:448:72)\n    at UserPreferencesProvider (webpack-internal:///./src/useUserPreferences.tsx:26:26)\n    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)\n    at QueryParamProviderInner (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:28:3)\n    at NextAdapter (webpack-internal:///./node_modules/next-query-params/dist/next-query-params.esm.js:15:23)\n    at QueryParamProvider (webpack-internal:///./node_modules/use-query-params/dist/QueryParamProvider.js:47:3)\n    at QueryParamProvider (webpack-internal:///./src/useQueryParam.tsx:29:26)\n    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/import.mjs:45:65)\n    at MyApp (webpack-internal:///./pages/_app.tsx:62:27)\n    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)\n    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)\n    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)\n    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)\n    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:403:27)',
+    timestamp: 1700614465.779,
+  },
+  {
+    category: 'ui.click',
+    message:
+      'div.text-center.cursor-pointer.text-muted-hover > span > span.mx-4.text-nowrap',
+    timestamp: 1700614466.654,
+  },
+];

packages/app/src/stories/LogSidePanelElements.stories.tsx

@@ -0,0 +1,19 @@
+import { Table } from '../components/Table';
+import { MOCK_BREADCRUMBS } from './LogSidePanelElements.mocks';
+import { SectionWrapper, breadcrumbColumns } from '../LogSidePanelElements';
+
+export const Breadcrumbs = () => {
+  return (
+    <SectionWrapper>
+      <Table
+        columns={breadcrumbColumns}
+        data={MOCK_BREADCRUMBS}
+        emptyMessage="No breadcrumbs found"
+      />
+    </SectionWrapper>
+  );
+};
+
+export default {
+  title: 'LogSidePanelElements',
+};

packages/app/src/stories/Logo.stories.tsx

@@ -0,0 +1,8 @@
+import Logo from '../Logo';
+
+export const Default = () => <Logo />;
+
+export default {
+  title: 'Logo',
+  component: Logo,
+};

packages/app/src/stories/components/Table.stories.tsx

@@ -0,0 +1,71 @@
+import { Table } from '../../components/Table';
+import { ColumnDef } from '@tanstack/react-table';
+import { UNDEFINED_WIDTH } from '../../tableUtils';
+const MOCK_COLUMNS: ColumnDef<any>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    size: UNDEFINED_WIDTH,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Age',
+    size: 120,
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+  },
+  {
+    size: 300,
+    accessorKey: 'company',
+    header: 'Company',
+  },
+];
+
+const MOCK_DATA = [
+  {
+    id: 1,
+    name: 'John Doe',
+    age: 30,
+    email: 'super@test.com',
+    company: 'Acme Inc.',
+  },
+  {
+    id: 2,
+    name: 'Jane Doe',
+    age: 25,
+    email: 'jane@test.com',
+    company: 'Acme Inc.',
+  },
+  {
+    id: 3,
+    name: 'John Smith',
+    age: 35,
+    email: 'john@test.com',
+    company: 'Acme Canada Research Inc.',
+  },
+];
+
+export const Default = (props: any) => (
+  <Table
+    data={MOCK_DATA}
+    columns={MOCK_COLUMNS}
+    emptyMessage="No data available"
+    {...props}
+  />
+);
+
+export const Empty = (props: any) => (
+  <Table
+    data={[]}
+    columns={MOCK_COLUMNS}
+    emptyMessage="No data available"
+    {...props}
+  />
+);
+
+export default {
+  title: 'Table',
+  component: Table,
+};

packages/app/src/types.ts

@@ -117,11 +117,19 @@ export type StacktraceFrame = {
   post_context?: string[];
 };
 
+export type StacktraceBreadcrumbCategory =
+  | 'ui.click'
+  | 'fetch'
+  | 'xhr'
+  | 'console'
+  | 'navigation'
+  | string;
+
 export type StacktraceBreadcrumb = {
   type?: string;
   level?: string;
   event_id?: string;
-  category?: string;
+  category?: StacktraceBreadcrumbCategory;
   message?: string;
   data?: { [key: string]: any };
   timestamp: number;

packages/app/styles/app.scss

@@ -1,5 +1,7 @@
 @import './variables';
 @import '~bootstrap/scss/bootstrap';
+@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;700&display=swap');
 

packages/app/tsconfig.json

@@ -19,5 +19,16 @@
     "types": ["@types/intercom-web", "jest"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.storybook.json"
+    }
+  ]
 }

packages/app/tsconfig.storybook.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": ""
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.js"
+  ],
+  "include": [
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+    ".storybook/*.js",
+    ".storybook/*.ts"
+  ]
+}