Skip to content
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

feat(perf): Add Performance Metrics Docs for JavaScript #5285

Merged
merged 4 commits into from
Jul 20, 2022
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
The JavaScript Browser SDKs automatically collect the following performance metrics
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved

- First Paint: `fp`
- First Contentful Paint: `fcp`
- Larget Contentful Paint: `lcp`
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved
- First Input Delay: `fcp`
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved
- Cumulative Layout Shift: `cls`
- Time to First Byte: `ttfb`
- Time to First Byte Request Time: `ttfb.requesttime`
14 changes: 14 additions & 0 deletions src/includes/performance/custom-performance-metrics/javascript.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
Supported in Sentry's JavaScript SDK version `7.0.0` and above.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't make this change without the back ticks for the code snippet interfering with the back ticks of the suggestion, but I would put the sentence above (on line 1) in a note after that code snippet.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ugh, I wish they would fix that. Just for convenience, can we do that in a separate PR?


```javascript
const transaction = Sentry.getCurrentHub().getScope().getTransaction();

// Record amount of memory used
transaction.setMeasurement('memoryUsed', 123, 'byte');

// Record time when Footer component renders on page
transaction.setMeasurement('ui.footerComponent.render', 1.3, 'second');

// Record amount of times localStorage was read
transaction.setMeasurement('localStorageRead', 4);
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
---
title: Performance Metrics
sidebar_order: 20
supported:
- javascript
notSupported:
- javascript.cordova
- javascript.electron
- react-native
- dotnet
- python
- go
- java
- android
- ruby
- java.spring-boot
- apple
- unity
- dart
- flutter
- rust
- native
- php
- native.breakpad
- native.crashpad
- native.minidumps
- unreal
- native.wasm
description: "Learn how to attach performance metrics to your transactions."
---

The Sentry SDK supports sending performance metrics data to Sentry. These are numeric values attached to transactions that are aggregated and displayed in Sentry.
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved

<PlatformContent includePath="performance/automatic-performance-metrics" />

In addition to automatic performance metrics, the SDK supports setting custom performance metrics on transactions. This allows you to define metrics that are important to your application and send them to Sentry.

To set a performance metric, supply a name (string), value (numeric - float, integer, etc.), and unit (string). Sentry supports adding arbitrary custom units, but we recommend using one of the [supported units listed below](./#supported-performance-metric-units).
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved

<PlatformContent includePath="performance/custom-performance-metrics" />

## Supported Performance Metric Units
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved

Units augment metric values by giving them a magnitude and semantics. Sentry leverages units associated with performance metrics to apply built-in unit conversions and controls in the product. For values that are unitless, you can supply an empty string or `none`.
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved

### Duration Units

A time duration.
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved

- `nanosecond`
- `microsecond`
- `millisecond`
- `second`
- `minute`
- `hour`
- `day`
- `week`

### Information Units

Size of information derived from bytes.
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved

- `bit`
- `byte`
- `kilobyte`
- `kibibyte`
- `megabyte`
- `mebibyte`
- `gigabyte`
- `gibibyte`
- `terabyte`
- `tebibyte`
- `petabyte`
- `petabyte`
- `pebibyte`
- `exabyte`
- `exbibyte`

## Fraction Units

lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved
- `ratio`
- `percent`

For those looking to explore further, details about the supported list of units can be found in our [event ingestion documentation](https://getsentry.github.io/relay/relay_metrics/enum.MetricUnit.html).
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved
lobsterkatie marked this conversation as resolved.
Show resolved Hide resolved