Add comprehensive Sentry transaction logging for critical variable operations

[Copilot]

Overview

This PR enhances Sentry monitoring by adding detailed transaction tracking for critical variable operations in the Figma plugin. Previously, we had minimal Sentry transaction coverage for variable-related actions, making it difficult to debug production issues related to creating and importing variables.

What Changed

Added comprehensive Sentry transaction logging to six critical functions that handle variable operations:

Top-Level Operations (using wrapTransaction)

1. createLocalVariablesInPlugin - Create variables from themes

   • Tracks: total variables created, collection count, theme count, enabled variable type settings

2. createLocalVariablesWithoutModesInPlugin - Create variables from token sets without modes

   • Tracks: total variables created, collection count, set count, enabled variable type settings

3. pullVariables - Import variables from Figma into the plugin

   • Tracks: selected collection count, pro user status, rem/dimension conversion options

4. updateVariablesFromPlugin - Update existing variables with new token values

   • Tracks: token type, parent token set, whether value is a reference

Child Operations (using spanTransaction)

5. updateVariables - Update variables within a specific collection/mode

   • Provides granular timing for individual collection updates

6. setValuesOnVariable - Core operation that sets values on Figma variables

   • Provides granular timing for the value-setting operation

Technical Implementation

• Transactions vs Spans: Top-level operations use wrapTransaction to create new Sentry transactions, while child operations use spanTransaction to create spans within parent transactions for better hierarchical visibility
• Measurements: Captured metrics include variable counts, collection counts, and other numerical data
• Tags: Captured contextual information like settings, operation types, and user status
• Async StatExtractor: Properly awaits async results before extracting measurements

Example Transaction Hierarchy

When a user creates variables from themes, Sentry will now capture:

Transaction: createLocalVariablesInPlugin
├─ Span: updateVariables (for each theme)
│  └─ Span: setValuesOnVariable
└─ Measurements: totalVariables=150, totalCollections=3, themesCount=3

Testing

• ✅ All 28 existing tests pass without modification
• ✅ TypeScript compilation successful
• ✅ ESLint passes with no new warnings
• ✅ Changeset created

Impact

This change provides significantly better observability for variable operations in production, enabling the team to:

• Identify performance bottlenecks in variable creation/import flows
• Track success rates and failure modes for critical operations
• Monitor usage patterns (e.g., how many variables users typically create)
• Debug production issues with detailed timing and context data

Fixes the request for better Sentry monitoring of critical actions like creating and importing variables.

Original prompt

can you add some better logging for Sentry? we have a few starttransaction etc but we need much more monitoring there for those.. like the most critical actions such as creating variables ori mporting variables

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

🦋 Changeset detected

Latest commit: ac5c36d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tokens-studio/figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR