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 3 commits
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:

- First Paint: `fp`
- First Contentful Paint: `fcp`
- Largest Contentful Paint: `lcp`
- First Input Delay: `fid`
- 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,85 @@
---
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."
---

Sentry's SDKs support sending performance metrics data to Sentry. These are numeric values attached to transactions that are aggregated and displayed in Sentry.

<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, you need to supply the following:
- name (`string`)
- value (any numeric type - `float`, `integer`, etc.)
- unit (`string`, can be empty or the string `'none'`).

Sentry supports adding arbitrary custom units, but we recommend using one of the [supported units listed below](./#supported-performance-metric-units).

<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 meaning to what otherwise might be abstract numbers. Adding units also allows Sentry to offer controls - unit conversions, filters, etc. - based on those units. For values that are unitless, you can supply an empty string or `none`.

### Duration Units

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

### Information Units

- `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`

If you want to explore further, you can find details about supported units in our [event ingestion documentation](https://getsentry.github.io/relay/relay_metrics/enum.MetricUnit.html).