feat(playground): ✨ Show call attributes in logs

playground/src/github/GitHubRepositoryFinder.ts

@@ -1,4 +1,4 @@
-import { Metrics } from '../../../src/index.js';
+import { measure } from '../../../src/index.js';
 import { GitHubRepositoryRequestError } from '../errors/GitHubRepositoryRequestError.js';
 import { InvalidGitHubRepositoryNameError } from '../errors/InvalidGitHubRepositoryNameError.js';
 import type { GitHubRepositorySummary } from './GitHubRepositorySummary.js';
@@ -14,9 +14,24 @@ interface GitHubRepositoryResponse {
 }
 
 export class GitHubRepositoryFinder {
-  @Metrics()
   public async find(repository: string): Promise<GitHubRepositorySummary> {
-    const segments = repository.trim().split('/');
+    const normalizedRepository = repository.trim();
+
+    return measure(
+      'GitHubRepositoryFinder.find',
+      async () => this.findRepository(normalizedRepository),
+      {
+        attributes: {
+          repository: normalizedRepository,
+        },
+      },
+    );
+  }
+
+  private async findRepository(
+    repository: string,
+  ): Promise<GitHubRepositorySummary> {
+    const segments = repository.split('/');
 
     if (segments.length !== 2 || segments.some((segment) => !segment)) {
       throw new InvalidGitHubRepositoryNameError(repository);

playground/src/main.ts

@@ -48,6 +48,20 @@ function emptyEvent(message: string): HTMLLIElement {
   return item;
 }
 
+function formatAttributes(attributes: Record<string, unknown>): string {
+  const entries = Object.entries(attributes).toSorted(([left], [right]) =>
+    left.localeCompare(right),
+  );
+
+  if (!entries.length) {
+    return 'attributes: none';
+  }
+
+  return `attributes: ${entries
+    .map(([key, value]) => `${key}=${String(value)}`)
+    .join(', ')}`;
+}
+
 function renderTelemetry(): void {
   const snapshot = metrics.snapshot();
   const calls = snapshot.metrics.filter(({ name }) => name.endsWith('.calls'));
@@ -115,6 +129,14 @@ function renderTelemetry(): void {
       heading.append(level, timestamp);
       item.append(heading, message);
 
+      if (entry.level === 'called') {
+        const attributes = document.createElement('span');
+
+        attributes.className = 'log-attributes';
+        attributes.textContent = formatAttributes(entry.attributes);
+        item.append(attributes);
+      }
+
       if (entry.stackTrace) {
         const details = document.createElement('details');
         const summary = document.createElement('summary');

playground/src/style.css

@@ -335,6 +335,20 @@ h2 {
     monospace;
 }
 
+.log-attributes {
+  display: block;
+  margin-top: 6px;
+  overflow: hidden;
+  color: #98a3ae;
+  font:
+    12px ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .log-level {
   color: #71e5a7;
   font: