- 
          
 - 
                Notifications
    
You must be signed in to change notification settings  - Fork 1.6k
 
docs(js): Add metrics page #15353
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
          
     Draft
      
      
            chargome
  wants to merge
  3
  commits into
  master
  
    
      
        
          
  
    
      Choose a base branch
      
     
    
      
        
      
      
        
          
          
        
        
          
            
              
              
              
  
           
        
        
          
            
              
              
           
        
       
     
  
        
          
            
          
            
          
        
       
    
      
from
cg-js-metrics
  
      
      
   
  
    
  
  
  
 
  
      
    base: master
Could not load branches
            
              
  
    Branch not found: {{ refName }}
  
            
                
      Loading
              
            Could not load tags
            
            
              Nothing to show
            
              
  
            
                
      Loading
              
            Are you sure you want to change the base?
            Some commits from the old base branch may be removed from the timeline,
            and old review comments may become outdated.
          
          
  
     Draft
                    docs(js): Add metrics page #15353
Changes from 2 commits
      Commits
    
    
            Show all changes
          
          
            3 commits
          
        
        Select commit
          Hold shift + click to select a range
      
      
    File filter
Filter by extension
Conversations
          Failed to load comments.   
        
        
          
      Loading
        
  Jump to
        
          Jump to file
        
      
      
          Failed to load files.   
        
        
          
      Loading
        
  Diff view
Diff view
There are no files selected for viewing
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              | Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| --- | ||
| title: Set Up Metrics | ||
| sidebar_title: Metrics | ||
| description: "Metrics allow you to send, view and query counters, gauges and measurements sent from your applications within Sentry." | ||
| sidebar_order: 5755 | ||
| --- | ||
| 
     | 
||
| With Sentry Metrics, you can send counters, gauges, distributions, and sets from your applications to Sentry. Once in Sentry, these metrics can be viewed alongside relevant errors, and searched using their individual attributes. | ||
| 
     | 
||
| <Alert> | ||
| This feature is currently in limited beta. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/discussions/18055) if you have feedback or questions. Features in beta are still in-progress and may have bugs. We recognize the irony. | ||
| </Alert> | ||
| 
     | 
||
| ## Requirements | ||
| 
     | 
||
| <PlatformContent includePath="metrics/requirements" /> | ||
| 
     | 
||
| ## Setup | ||
| 
     | 
||
| <PlatformContent includePath="metrics/setup" /> | ||
| 
     | 
||
| ## Usage | ||
| 
     | 
||
| <PlatformContent includePath="metrics/usage" /> | ||
| 
     | 
||
| ## Options | ||
| 
     | 
||
| <PlatformContent includePath="metrics/options" /> | ||
| 
     | 
||
| ## Default Attributes | ||
| 
     | 
||
| <PlatformContent includePath="metrics/default-attributes" /> | ||
| 
     | 
        
          
          
            23 changes: 23 additions & 0 deletions
          
          23 
        
  platform-includes/metrics/default-attributes/javascript.mdx
  
  
      
      
   
        
      
      
    
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              | Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| By default the SDK will attach the following attributes to a metric: | ||
| 
     | 
||
| 1. `sentry.environment`: The environment set in the SDK if defined. | ||
| 2. `sentry.release`: The release set in the SDK if defined. | ||
| 3. `sentry.sdk.name`: The name of the SDK that sent the metric | ||
| 4. `sentry.sdk.version`: The version of the SDK that sent the metric | ||
| 
     | 
||
| ### User Attributes | ||
| 
     | 
||
| The SDK will optionally attach user information as attributes (guarded by `sendDefaultPii`): | ||
| 
     | 
||
| 1. `user.id` | ||
| 2. `user.name` | ||
| 3. `user.email` | ||
| 
     | 
||
| 
     | 
||
| ### Browser Attributes | ||
| 
     | 
||
| The SDK will optionally attach browser information as attributes: | ||
| 
     | 
||
| 1. `browser.name` | ||
| 2. `browser.version` | ||
| 3. `sentry.replay_id`: The replay id of the replay that was active when the metric was collected. | 
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              | Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| The Sentry JavaScript SDK provides several options to configure how metrics are captured and sent to Sentry. | ||
| 
     | 
||
| ### Filtering and Modifying Metrics | ||
| 
     | 
||
| Use the `beforeSendMetric` callback to filter or modify metrics before they're sent to Sentry. This is useful for: | ||
| 
     | 
||
| - Removing sensitive data from metric attributes | ||
| - Dropping metrics you don't want to send | ||
| - Adding or modifying attributes | ||
| 
     | 
||
| The callback receives a metric object and must return either a modified metric or `null` to drop it. | ||
| 
     | 
||
| ```javascript | ||
| Sentry.init({ | ||
| // ... | ||
| beforeSendMetric: (metric) => { | ||
| // Drop metrics with specific attributes | ||
| if (metric.attributes?.dropMe === true) { | ||
| return null; | ||
| } | ||
| 
     | 
||
| // Modify metric attributes | ||
| metric.tags = { | ||
| ...metric.tags, | ||
| processed: true, | ||
| }; | ||
| 
     | 
||
| return metric; | ||
| }, | ||
| }); | ||
| ``` | ||
| 
     | 
||
| ### Disabling Metrics | ||
| 
     | 
||
| If you want to disable metrics collection entirely, you can do so by disabling the `_experimental.enableMetrics` flag: | ||
| 
     | 
||
| ```javascript | ||
| Sentry.init({ | ||
| dsn: "___PUBLIC_DSN___", | ||
| _experiments: { | ||
| enable_metrics: false, | ||
                
      
                  chargome marked this conversation as resolved.
               
              
                Outdated
          
            Show resolved
            Hide resolved
         | 
||
| } | ||
| }); | ||
| ``` | ||
| 
     | 
||
| 
     | 
||
| ### Flushing Metrics | ||
| 
     | 
||
| By default, metrics are buffered and flushed depending on buffer size and time. If you need to manually flush metrics before the automatic interval, you can use the `flush` method: | ||
| 
     | 
||
| ```javascript | ||
| await Sentry.flush(); | ||
| ``` | ||
| 
     | 
||
| This will flush all pending metrics and events to Sentry. | ||
| 
     | 
||
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              | Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -0,0 +1 @@ | ||
| Metrics are supported in all Sentry JavaScript SDKs version `10.22.0` and above. | 
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              | Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| Metrics are gated by an experimental option, `_experiments.enableMetrics` (will not be required in future versions of the SDK). | ||
| 
     | 
||
| ```javascript | ||
| Sentry.init({ | ||
| dsn: "___PUBLIC_DSN___", | ||
| _experiments: { | ||
| enableMetrics: true, | ||
| }, | ||
| }); | ||
| ``` | ||
| 
     | 
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              | Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| Once the feature is enabled and the SDK is initialized, you can send metrics using the `Sentry.metrics` APIs. | ||
| 
     | 
||
| The `metrics` namespace exposes three methods that you can use to capture different types of metric information: `count`, `gauge` and `distribution`. | ||
| 
     | 
||
| ### Counter | ||
| 
     | 
||
| Use `count` to track an incrementing value, such as the number of times a button was clicked or a function was called. | ||
| 
     | 
||
| ```javascript | ||
| Sentry.metrics.count("button_click", 1); | ||
| ``` | ||
| 
     | 
||
| ### Gauge | ||
| 
     | 
||
| Use `gauge` to track a value that can go up and down, such as the current memory usage or the number of items in a queue. | ||
| 
     | 
||
| ```javascript | ||
| Sentry.metrics.gauge("queue_depth", 42); | ||
| ``` | ||
| 
     | 
||
| ### Distribution | ||
| 
     | 
||
| Use `distribution` to track the distribution of a value, such as the response time of a request. | ||
| 
     | 
||
| ```javascript | ||
| Sentry.metrics.distribution("response_time", 187.5); | ||
| ``` | ||
| 
     | 
||
| ### Adding Attributes | ||
| 
     | 
||
| You can also pass additional attributes to any of the metric methods via the `attributes` option. Attributes allow you to filter and group metrics. | ||
| 
     | 
||
| ```javascript | ||
| Sentry.metrics.count( | ||
| "button_click", | ||
| 1, | ||
| { | ||
| tags: { | ||
| browser: "Firefox", | ||
| app_version: "1.0.0", | ||
| }, | ||
| } | ||
| ); | ||
| ``` | ||
| 
     | 
||
| ### Specifying Units | ||
| 
     | 
||
| For `gauge` and `distribution` metrics, you can specify a unit using the `unit` option. This helps Sentry display the metric value in a human-readable format. | ||
                
      
                  chargome marked this conversation as resolved.
               
          
            Show resolved
            Hide resolved
         | 
||
| 
     | 
||
| ```javascript | ||
| Sentry.metrics.distribution( | ||
| "response_time", | ||
| 187.5, | ||
| { | ||
| unit: "millisecond", | ||
| } | ||
| ); | ||
| 
     | 
||
| Sentry.metrics.gauge( | ||
| "memory_usage", | ||
| 1024, | ||
| { | ||
| unit: "byte", | ||
| } | ||
| ); | ||
| ``` | ||
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              
      
      Oops, something went wrong.
        
    
  
  Add this suggestion to a batch that can be applied as a single commit.
  This suggestion is invalid because no changes were made to the code.
  Suggestions cannot be applied while the pull request is closed.
  Suggestions cannot be applied while viewing a subset of changes.
  Only one suggestion per line can be applied in a batch.
  Add this suggestion to a batch that can be applied as a single commit.
  Applying suggestions on deleted lines is not supported.
  You must change the existing code in this line in order to create a valid suggestion.
  Outdated suggestions cannot be applied.
  This suggestion has been applied or marked resolved.
  Suggestions cannot be applied from pending reviews.
  Suggestions cannot be applied on multi-line comments.
  Suggestions cannot be applied while the pull request is queued to merge.
  Suggestion cannot be applied right now. Please check back later.
  
    
  
    
Uh oh!
There was an error while loading. Please reload this page.