Skip to content

Commit

Permalink
feat: Add s/m/l screen size resource attribute (#129)
Browse files Browse the repository at this point in the history
## Which problem is this PR solving?
Adds a resource attribute that classifies screen sizes into `small`,
`medium` and `large`.

## Short description of the changes
- Adds `screen.size`: `small` | `medium` | `large`
- `small` is less than 768px
- `medium` is between 768px and 1024px
- `large` is greater than 1024px

All of these were based on common media query sizes.

## How to verify that this has the expected result
Run the app and see the `screen.size` attribute added to every span.


---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1207174650502127

---------

Co-authored-by: Mustafa Haddara <mustafaayhaddara@yahoo.com>
  • Loading branch information
pkanal and MustafaHaddara authored Apr 25, 2024
1 parent e46248c commit e810125
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 1 deletion.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ The SDK adds these fields to all telemetry:
| `page.hostname` | custom | per-span | | `docs.honeycomb.io` |
| `screen.width` | custom | static | Total available screen width in pixels. | `780` |
| `screen.height` | custom | static | Total available screen height in pixels | `1000` |
| `screen.size` | custom | static | `small` (less than 768px), `medium` (769px - 1024px) or `large` (greater than 1024px), `unknown` if the size is missing. |
| `honeycomb.distro.version` | stable | static | package version | "1.2.3" |
| `honeycomb.distro.runtime_version` | stable | static | | "browser" |
| `entry_page.url` | custom | static | | `https://docs.honeycomb.io/getting-data-in/data-best-practices/#datasets-group-data-together?page=2` |
Expand Down
11 changes: 11 additions & 0 deletions src/browser-attributes-resource.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
import { Resource } from '@opentelemetry/resources';

type ScreenSize = 'small' | 'medium' | 'large' | 'unknown';

export const computeScreenSize = (screenWidth: number): ScreenSize => {
if (screenWidth <= 768) return 'small';
else if (screenWidth > 768 && screenWidth <= 1024) return 'medium';
else if (screenWidth > 1024) return 'large';

return 'unknown';
};

export function configureBrowserAttributesResource(): Resource {
return new Resource({
'user_agent.original': navigator.userAgent,
Expand All @@ -9,5 +19,6 @@ export function configureBrowserAttributesResource(): Resource {
'browser.language': navigator.language,
'screen.width': window.screen.width,
'screen.height': window.screen.height,
'screen.size': computeScreenSize(window.screen.width),
});
}
22 changes: 21 additions & 1 deletion test/browser-attributes-resource.test.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { configureBrowserAttributesResource } from '../src/browser-attributes-resource';
import {
computeScreenSize,
configureBrowserAttributesResource,
} from '../src/browser-attributes-resource';
import { Resource } from '@opentelemetry/resources';

test('it should return a Resource', () => {
Expand All @@ -17,5 +20,22 @@ test('it should have location attributes', () => {
// user agent will be different locally and on CI,
// we're really only testing to make sure it gets the value
'user_agent.original': navigator.userAgent,
'screen.size': 'small',
});
});

describe('compute screen size', () => {
test('it returns small for sizes less than or equal to 768', () => {
expect(computeScreenSize(600)).toBe('small');
expect(computeScreenSize(768)).toBe('small');
});

test('it returns medium for sizes greater than 768 and less than or equal to 1024', () => {
expect(computeScreenSize(769)).toBe('medium');
expect(computeScreenSize(1024)).toBe('medium');
});

test('it returns large for sizes larger than 1024', () => {
expect(computeScreenSize(1025)).toBe('large');
});
});

0 comments on commit e810125

Please sign in to comment.