feat(js): Document new performance APIs - #7707

Merged
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis
Aug 31, 2023
Merged

feat(js): Document new performance APIs#7707
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis

Conversation

@AbhiPrasad

Copy link
Copy Markdown
Contributor

resolvesgetsentry/sentry-javascript#8724

Motivation

Documents the new performance APIs under the custom instrumentation section.

In the future we'll want to revamp both the automatic and custom instrumentation sections, but for now this is a good starting point.

The APIs are detailed in the RFC about the new performance API, and were introduced in getsentry/sentry-javascript#8803

Details

Sentry.startActiveSpan automatically wraps a callback with a span and makes that span the active span for the execution context of the callback. The callback can be async or sync, and can return arbitrary values.

Sentry.startSpan just creates a span, but does not wrap it in a callback. It needs to be explicitly set on the scope just like Sentry.startTransaction.

constresult=Sentry.startActiveSpan({name: importantThing},async()=>{awaitsomeWork();returnSentry.startActiveSpan({op: 'db',name: 'query-stuff'},()=>expensiveQuery());});// result === expensiveQuery() 

Under the hood these methods will create a transaction or span depending on if there is already an active span on the scope.

@AbhiPrasad
AbhiPrasad requested review from a team, Lms24 and ale-cota and removed request for a teamAugust 29, 2023 16:19
@vercel

vercelBot commented Aug 29, 2023

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
sentry-docs✅ Ready (Inspect)Visit Preview💬 Add feedbackAug 31, 2023 7:37pm

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM generally, just had some minor comments.

Side note/no action required as too late: I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback. Super sorry for not bringing this up earlier! But it's also not the end of the world.

});

const result = await Sentry.startActiveSpan(
{ name: "Important Function" },

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: should we shop op as well here or do we consider this not necessary for custom instrumentation?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

op is optional so I didn't include it. We need to go back and expand documentation on it, but that can happen later on.


<PlatformContent includePath="performance/add-independent-span" />

## Start Transaction

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

WDYT about

Suggested change
## Start Transaction
## [Deprecated]Start Transaction

or something similar that discourages folks from usingstartTransaction?

We probably need to make this JS-specific though so maybe throwing in a note/alert might also work

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I don't necessarily want to deprecate this method for now, but once we're more comfortable with the API we can come back and adjust.

@@ -0,0 +1,5 @@
<Note>

The span APIs require SDK version `7.65.0` or higher. If you are using an older version of the SDK, you can use the [explicit transaction APIs](#start-transaction) for custom instrumentation.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: Is there a reason why this note is different to the Node version? I'd prefer the Node version as it explicitly names the APIs.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

nope, I just forgot lol

good call!

@AbhiPrasad

Copy link
Copy Markdown
ContributorAuthor

I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback

Yeah I thought about this too, but the UX of just not having to think about span finish meant that it kinda just got included with the name. We can alias the name to something else in a future version if users get confused, we have room to move here.

{ name: "Important Function" },
(span) => {
// Can access the span to add data or set specific status
span?.setData("foo", "bar");

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

m: Should we mention/explain when/why span is undefined? May not be entirely clear from the outside why this may be unset and why I need to guard here.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

yup, ill add a note

@AbhiPrasad
AbhiPrasad enabled auto-merge (squash) August 31, 2023 19:29
@AbhiPrasad
AbhiPrasad merged commit dba65dc into masterAug 31, 2023
@AbhiPrasad
AbhiPrasad deleted the abhi-js-new-span-apis branch August 31, 2023 19:41
@shanamatthewsshanamatthews mentioned this pull request Sep 5, 2023
3 tasks
@github-actionsgithub-actionsBot locked and limited conversation to collaborators Sep 16, 2023
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

JS SDK Simplified Performance API

3 participants

@AbhiPrasad@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks"); } } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); } })(); (function(){ try { var __m = "github.com"; var __re = new RegExp('^' + "github\\.com" + '
Skip to content

feat(js): Document new performance APIs - #7707

Merged
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis
Aug 31, 2023
Merged

feat(js): Document new performance APIs#7707
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis

Conversation

@AbhiPrasad

Copy link
Copy Markdown
Contributor

resolvesgetsentry/sentry-javascript#8724

Motivation

Documents the new performance APIs under the custom instrumentation section.

In the future we'll want to revamp both the automatic and custom instrumentation sections, but for now this is a good starting point.

The APIs are detailed in the RFC about the new performance API, and were introduced in getsentry/sentry-javascript#8803

Details

Sentry.startActiveSpan automatically wraps a callback with a span and makes that span the active span for the execution context of the callback. The callback can be async or sync, and can return arbitrary values.

Sentry.startSpan just creates a span, but does not wrap it in a callback. It needs to be explicitly set on the scope just like Sentry.startTransaction.

constresult=Sentry.startActiveSpan({name: importantThing},async()=>{awaitsomeWork();returnSentry.startActiveSpan({op: 'db',name: 'query-stuff'},()=>expensiveQuery());});// result === expensiveQuery() 

Under the hood these methods will create a transaction or span depending on if there is already an active span on the scope.

@AbhiPrasad
AbhiPrasad requested review from a team, Lms24 and ale-cota and removed request for a teamAugust 29, 2023 16:19
@vercel

vercelBot commented Aug 29, 2023

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
sentry-docs✅ Ready (Inspect)Visit Preview💬 Add feedbackAug 31, 2023 7:37pm

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM generally, just had some minor comments.

Side note/no action required as too late: I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback. Super sorry for not bringing this up earlier! But it's also not the end of the world.

});

const result = await Sentry.startActiveSpan(
{ name: "Important Function" },

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: should we shop op as well here or do we consider this not necessary for custom instrumentation?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

op is optional so I didn't include it. We need to go back and expand documentation on it, but that can happen later on.


<PlatformContent includePath="performance/add-independent-span" />

## Start Transaction

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

WDYT about

Suggested change
## Start Transaction
## [Deprecated]Start Transaction

or something similar that discourages folks from usingstartTransaction?

We probably need to make this JS-specific though so maybe throwing in a note/alert might also work

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I don't necessarily want to deprecate this method for now, but once we're more comfortable with the API we can come back and adjust.

@@ -0,0 +1,5 @@
<Note>

The span APIs require SDK version `7.65.0` or higher. If you are using an older version of the SDK, you can use the [explicit transaction APIs](#start-transaction) for custom instrumentation.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: Is there a reason why this note is different to the Node version? I'd prefer the Node version as it explicitly names the APIs.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

nope, I just forgot lol

good call!

@AbhiPrasad

Copy link
Copy Markdown
ContributorAuthor

I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback

Yeah I thought about this too, but the UX of just not having to think about span finish meant that it kinda just got included with the name. We can alias the name to something else in a future version if users get confused, we have room to move here.

{ name: "Important Function" },
(span) => {
// Can access the span to add data or set specific status
span?.setData("foo", "bar");

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

m: Should we mention/explain when/why span is undefined? May not be entirely clear from the outside why this may be unset and why I need to guard here.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

yup, ill add a note

@AbhiPrasad
AbhiPrasad enabled auto-merge (squash) August 31, 2023 19:29
@AbhiPrasad
AbhiPrasad merged commit dba65dc into masterAug 31, 2023
@AbhiPrasad
AbhiPrasad deleted the abhi-js-new-span-apis branch August 31, 2023 19:41
@shanamatthewsshanamatthews mentioned this pull request Sep 5, 2023
3 tasks
@github-actionsgithub-actionsBot locked and limited conversation to collaborators Sep 16, 2023
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

JS SDK Simplified Performance API

3 participants

@AbhiPrasad@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(js): Document new performance APIs - #7707

Merged
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis
Aug 31, 2023
Merged

feat(js): Document new performance APIs#7707
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis

Conversation

@AbhiPrasad

Copy link
Copy Markdown
Contributor

resolvesgetsentry/sentry-javascript#8724

Motivation

Documents the new performance APIs under the custom instrumentation section.

In the future we'll want to revamp both the automatic and custom instrumentation sections, but for now this is a good starting point.

The APIs are detailed in the RFC about the new performance API, and were introduced in getsentry/sentry-javascript#8803

Details

Sentry.startActiveSpan automatically wraps a callback with a span and makes that span the active span for the execution context of the callback. The callback can be async or sync, and can return arbitrary values.

Sentry.startSpan just creates a span, but does not wrap it in a callback. It needs to be explicitly set on the scope just like Sentry.startTransaction.

constresult=Sentry.startActiveSpan({name: importantThing},async()=>{awaitsomeWork();returnSentry.startActiveSpan({op: 'db',name: 'query-stuff'},()=>expensiveQuery());});// result === expensiveQuery() 

Under the hood these methods will create a transaction or span depending on if there is already an active span on the scope.

@AbhiPrasad
AbhiPrasad requested review from a team, Lms24 and ale-cota and removed request for a teamAugust 29, 2023 16:19
@vercel

vercelBot commented Aug 29, 2023

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
sentry-docs✅ Ready (Inspect)Visit Preview💬 Add feedbackAug 31, 2023 7:37pm

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM generally, just had some minor comments.

Side note/no action required as too late: I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback. Super sorry for not bringing this up earlier! But it's also not the end of the world.

});

const result = await Sentry.startActiveSpan(
{ name: "Important Function" },

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: should we shop op as well here or do we consider this not necessary for custom instrumentation?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

op is optional so I didn't include it. We need to go back and expand documentation on it, but that can happen later on.


<PlatformContent includePath="performance/add-independent-span" />

## Start Transaction

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

WDYT about

Suggested change
## Start Transaction
## [Deprecated]Start Transaction

or something similar that discourages folks from usingstartTransaction?

We probably need to make this JS-specific though so maybe throwing in a note/alert might also work

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I don't necessarily want to deprecate this method for now, but once we're more comfortable with the API we can come back and adjust.

@@ -0,0 +1,5 @@
<Note>

The span APIs require SDK version `7.65.0` or higher. If you are using an older version of the SDK, you can use the [explicit transaction APIs](#start-transaction) for custom instrumentation.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: Is there a reason why this note is different to the Node version? I'd prefer the Node version as it explicitly names the APIs.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

nope, I just forgot lol

good call!

@AbhiPrasad

Copy link
Copy Markdown
ContributorAuthor

I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback

Yeah I thought about this too, but the UX of just not having to think about span finish meant that it kinda just got included with the name. We can alias the name to something else in a future version if users get confused, we have room to move here.

{ name: "Important Function" },
(span) => {
// Can access the span to add data or set specific status
span?.setData("foo", "bar");

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

m: Should we mention/explain when/why span is undefined? May not be entirely clear from the outside why this may be unset and why I need to guard here.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

yup, ill add a note

@AbhiPrasad
AbhiPrasad enabled auto-merge (squash) August 31, 2023 19:29
@AbhiPrasad
AbhiPrasad merged commit dba65dc into masterAug 31, 2023
@AbhiPrasad
AbhiPrasad deleted the abhi-js-new-span-apis branch August 31, 2023 19:41
@shanamatthewsshanamatthews mentioned this pull request Sep 5, 2023
3 tasks
@github-actionsgithub-actionsBot locked and limited conversation to collaborators Sep 16, 2023
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

JS SDK Simplified Performance API

3 participants

@AbhiPrasad@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length \u003e 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(js): Document new performance APIs - #7707

Merged
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis
Aug 31, 2023
Merged

feat(js): Document new performance APIs#7707
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis

Conversation

@AbhiPrasad

Copy link
Copy Markdown
Contributor

resolvesgetsentry/sentry-javascript#8724

Motivation

Documents the new performance APIs under the custom instrumentation section.

In the future we'll want to revamp both the automatic and custom instrumentation sections, but for now this is a good starting point.

The APIs are detailed in the RFC about the new performance API, and were introduced in getsentry/sentry-javascript#8803

Details

Sentry.startActiveSpan automatically wraps a callback with a span and makes that span the active span for the execution context of the callback. The callback can be async or sync, and can return arbitrary values.

Sentry.startSpan just creates a span, but does not wrap it in a callback. It needs to be explicitly set on the scope just like Sentry.startTransaction.

constresult=Sentry.startActiveSpan({name: importantThing},async()=>{awaitsomeWork();returnSentry.startActiveSpan({op: 'db',name: 'query-stuff'},()=>expensiveQuery());});// result === expensiveQuery() 

Under the hood these methods will create a transaction or span depending on if there is already an active span on the scope.

@AbhiPrasad
AbhiPrasad requested review from a team, Lms24 and ale-cota and removed request for a teamAugust 29, 2023 16:19
@vercel

vercelBot commented Aug 29, 2023

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
sentry-docs✅ Ready (Inspect)Visit Preview💬 Add feedbackAug 31, 2023 7:37pm

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM generally, just had some minor comments.

Side note/no action required as too late: I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback. Super sorry for not bringing this up earlier! But it's also not the end of the world.

});

const result = await Sentry.startActiveSpan(
{ name: "Important Function" },

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: should we shop op as well here or do we consider this not necessary for custom instrumentation?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

op is optional so I didn't include it. We need to go back and expand documentation on it, but that can happen later on.


<PlatformContent includePath="performance/add-independent-span" />

## Start Transaction

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

WDYT about

Suggested change
## Start Transaction
## [Deprecated]Start Transaction

or something similar that discourages folks from usingstartTransaction?

We probably need to make this JS-specific though so maybe throwing in a note/alert might also work

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I don't necessarily want to deprecate this method for now, but once we're more comfortable with the API we can come back and adjust.

@@ -0,0 +1,5 @@
<Note>

The span APIs require SDK version `7.65.0` or higher. If you are using an older version of the SDK, you can use the [explicit transaction APIs](#start-transaction) for custom instrumentation.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: Is there a reason why this note is different to the Node version? I'd prefer the Node version as it explicitly names the APIs.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

nope, I just forgot lol

good call!

@AbhiPrasad

Copy link
Copy Markdown
ContributorAuthor

I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback

Yeah I thought about this too, but the UX of just not having to think about span finish meant that it kinda just got included with the name. We can alias the name to something else in a future version if users get confused, we have room to move here.

{ name: "Important Function" },
(span) => {
// Can access the span to add data or set specific status
span?.setData("foo", "bar");

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

m: Should we mention/explain when/why span is undefined? May not be entirely clear from the outside why this may be unset and why I need to guard here.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

yup, ill add a note

@AbhiPrasad
AbhiPrasad enabled auto-merge (squash) August 31, 2023 19:29
@AbhiPrasad
AbhiPrasad merged commit dba65dc into masterAug 31, 2023
@AbhiPrasad
AbhiPrasad deleted the abhi-js-new-span-apis branch August 31, 2023 19:41
@shanamatthewsshanamatthews mentioned this pull request Sep 5, 2023
3 tasks
@github-actionsgithub-actionsBot locked and limited conversation to collaborators Sep 16, 2023
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

JS SDK Simplified Performance API

3 participants

@AbhiPrasad@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

feat(js): Document new performance APIs - #7707

Merged
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis
Aug 31, 2023
Merged

feat(js): Document new performance APIs#7707
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis

Conversation

@AbhiPrasad

Copy link
Copy Markdown
Contributor

resolvesgetsentry/sentry-javascript#8724

Motivation

Documents the new performance APIs under the custom instrumentation section.

In the future we'll want to revamp both the automatic and custom instrumentation sections, but for now this is a good starting point.

The APIs are detailed in the RFC about the new performance API, and were introduced in getsentry/sentry-javascript#8803

Details

Sentry.startActiveSpan automatically wraps a callback with a span and makes that span the active span for the execution context of the callback. The callback can be async or sync, and can return arbitrary values.

Sentry.startSpan just creates a span, but does not wrap it in a callback. It needs to be explicitly set on the scope just like Sentry.startTransaction.

constresult=Sentry.startActiveSpan({name: importantThing},async()=>{awaitsomeWork();returnSentry.startActiveSpan({op: 'db',name: 'query-stuff'},()=>expensiveQuery());});// result === expensiveQuery() 

Under the hood these methods will create a transaction or span depending on if there is already an active span on the scope.

@AbhiPrasad
AbhiPrasad requested review from a team, Lms24 and ale-cota and removed request for a teamAugust 29, 2023 16:19
@vercel

vercelBot commented Aug 29, 2023

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
sentry-docs✅ Ready (Inspect)Visit Preview💬 Add feedbackAug 31, 2023 7:37pm

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM generally, just had some minor comments.

Side note/no action required as too late: I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback. Super sorry for not bringing this up earlier! But it's also not the end of the world.

});

const result = await Sentry.startActiveSpan(
{ name: "Important Function" },

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: should we shop op as well here or do we consider this not necessary for custom instrumentation?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

op is optional so I didn't include it. We need to go back and expand documentation on it, but that can happen later on.


<PlatformContent includePath="performance/add-independent-span" />

## Start Transaction

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

WDYT about

Suggested change
## Start Transaction
## [Deprecated]Start Transaction

or something similar that discourages folks from usingstartTransaction?

We probably need to make this JS-specific though so maybe throwing in a note/alert might also work

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I don't necessarily want to deprecate this method for now, but once we're more comfortable with the API we can come back and adjust.

@@ -0,0 +1,5 @@
<Note>

The span APIs require SDK version `7.65.0` or higher. If you are using an older version of the SDK, you can use the [explicit transaction APIs](#start-transaction) for custom instrumentation.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: Is there a reason why this note is different to the Node version? I'd prefer the Node version as it explicitly names the APIs.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

nope, I just forgot lol

good call!

@AbhiPrasad

Copy link
Copy Markdown
ContributorAuthor

I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback

Yeah I thought about this too, but the UX of just not having to think about span finish meant that it kinda just got included with the name. We can alias the name to something else in a future version if users get confused, we have room to move here.

{ name: "Important Function" },
(span) => {
// Can access the span to add data or set specific status
span?.setData("foo", "bar");

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

m: Should we mention/explain when/why span is undefined? May not be entirely clear from the outside why this may be unset and why I need to guard here.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

yup, ill add a note

@AbhiPrasad
AbhiPrasad enabled auto-merge (squash) August 31, 2023 19:29
@AbhiPrasad
AbhiPrasad merged commit dba65dc into masterAug 31, 2023
@AbhiPrasad
AbhiPrasad deleted the abhi-js-new-span-apis branch August 31, 2023 19:41
@shanamatthewsshanamatthews mentioned this pull request Sep 5, 2023
3 tasks
@github-actionsgithub-actionsBot locked and limited conversation to collaborators Sep 16, 2023
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

JS SDK Simplified Performance API

3 participants

@AbhiPrasad@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(js): Document new performance APIs - #7707

Merged
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis
Aug 31, 2023
Merged

feat(js): Document new performance APIs#7707
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis

Conversation

@AbhiPrasad

Copy link
Copy Markdown
Contributor

resolvesgetsentry/sentry-javascript#8724

Motivation

Documents the new performance APIs under the custom instrumentation section.

In the future we'll want to revamp both the automatic and custom instrumentation sections, but for now this is a good starting point.

The APIs are detailed in the RFC about the new performance API, and were introduced in getsentry/sentry-javascript#8803

Details

Sentry.startActiveSpan automatically wraps a callback with a span and makes that span the active span for the execution context of the callback. The callback can be async or sync, and can return arbitrary values.

Sentry.startSpan just creates a span, but does not wrap it in a callback. It needs to be explicitly set on the scope just like Sentry.startTransaction.

constresult=Sentry.startActiveSpan({name: importantThing},async()=>{awaitsomeWork();returnSentry.startActiveSpan({op: 'db',name: 'query-stuff'},()=>expensiveQuery());});// result === expensiveQuery() 

Under the hood these methods will create a transaction or span depending on if there is already an active span on the scope.

@AbhiPrasad
AbhiPrasad requested review from a team, Lms24 and ale-cota and removed request for a teamAugust 29, 2023 16:19
@vercel

vercelBot commented Aug 29, 2023

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
sentry-docs✅ Ready (Inspect)Visit Preview💬 Add feedbackAug 31, 2023 7:37pm

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM generally, just had some minor comments.

Side note/no action required as too late: I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback. Super sorry for not bringing this up earlier! But it's also not the end of the world.

});

const result = await Sentry.startActiveSpan(
{ name: "Important Function" },

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: should we shop op as well here or do we consider this not necessary for custom instrumentation?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

op is optional so I didn't include it. We need to go back and expand documentation on it, but that can happen later on.


<PlatformContent includePath="performance/add-independent-span" />

## Start Transaction

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

WDYT about

Suggested change
## Start Transaction
## [Deprecated]Start Transaction

or something similar that discourages folks from usingstartTransaction?

We probably need to make this JS-specific though so maybe throwing in a note/alert might also work

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I don't necessarily want to deprecate this method for now, but once we're more comfortable with the API we can come back and adjust.

@@ -0,0 +1,5 @@
<Note>

The span APIs require SDK version `7.65.0` or higher. If you are using an older version of the SDK, you can use the [explicit transaction APIs](#start-transaction) for custom instrumentation.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: Is there a reason why this note is different to the Node version? I'd prefer the Node version as it explicitly names the APIs.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

nope, I just forgot lol

good call!

@AbhiPrasad

Copy link
Copy Markdown
ContributorAuthor

I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback

Yeah I thought about this too, but the UX of just not having to think about span finish meant that it kinda just got included with the name. We can alias the name to something else in a future version if users get confused, we have room to move here.

{ name: "Important Function" },
(span) => {
// Can access the span to add data or set specific status
span?.setData("foo", "bar");

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

m: Should we mention/explain when/why span is undefined? May not be entirely clear from the outside why this may be unset and why I need to guard here.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

yup, ill add a note

@AbhiPrasad
AbhiPrasad enabled auto-merge (squash) August 31, 2023 19:29
@AbhiPrasad
AbhiPrasad merged commit dba65dc into masterAug 31, 2023
@AbhiPrasad
AbhiPrasad deleted the abhi-js-new-span-apis branch August 31, 2023 19:41
@shanamatthewsshanamatthews mentioned this pull request Sep 5, 2023
3 tasks
@github-actionsgithub-actionsBot locked and limited conversation to collaborators Sep 16, 2023
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

JS SDK Simplified Performance API

3 participants

@AbhiPrasad@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(js): Document new performance APIs - #7707

Merged
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis
Aug 31, 2023
Merged

feat(js): Document new performance APIs#7707
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis

Conversation

@AbhiPrasad

Copy link
Copy Markdown
Contributor

resolvesgetsentry/sentry-javascript#8724

Motivation

Documents the new performance APIs under the custom instrumentation section.

In the future we'll want to revamp both the automatic and custom instrumentation sections, but for now this is a good starting point.

The APIs are detailed in the RFC about the new performance API, and were introduced in getsentry/sentry-javascript#8803

Details

Sentry.startActiveSpan automatically wraps a callback with a span and makes that span the active span for the execution context of the callback. The callback can be async or sync, and can return arbitrary values.

Sentry.startSpan just creates a span, but does not wrap it in a callback. It needs to be explicitly set on the scope just like Sentry.startTransaction.

constresult=Sentry.startActiveSpan({name: importantThing},async()=>{awaitsomeWork();returnSentry.startActiveSpan({op: 'db',name: 'query-stuff'},()=>expensiveQuery());});// result === expensiveQuery() 

Under the hood these methods will create a transaction or span depending on if there is already an active span on the scope.

@AbhiPrasad
AbhiPrasad requested review from a team, Lms24 and ale-cota and removed request for a teamAugust 29, 2023 16:19
@vercel

vercelBot commented Aug 29, 2023

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
sentry-docs✅ Ready (Inspect)Visit Preview💬 Add feedbackAug 31, 2023 7:37pm

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM generally, just had some minor comments.

Side note/no action required as too late: I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback. Super sorry for not bringing this up earlier! But it's also not the end of the world.

});

const result = await Sentry.startActiveSpan(
{ name: "Important Function" },

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: should we shop op as well here or do we consider this not necessary for custom instrumentation?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

op is optional so I didn't include it. We need to go back and expand documentation on it, but that can happen later on.


<PlatformContent includePath="performance/add-independent-span" />

## Start Transaction

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

WDYT about

Suggested change
## Start Transaction
## [Deprecated]Start Transaction

or something similar that discourages folks from usingstartTransaction?

We probably need to make this JS-specific though so maybe throwing in a note/alert might also work

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I don't necessarily want to deprecate this method for now, but once we're more comfortable with the API we can come back and adjust.

@@ -0,0 +1,5 @@
<Note>

The span APIs require SDK version `7.65.0` or higher. If you are using an older version of the SDK, you can use the [explicit transaction APIs](#start-transaction) for custom instrumentation.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: Is there a reason why this note is different to the Node version? I'd prefer the Node version as it explicitly names the APIs.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

nope, I just forgot lol

good call!

@AbhiPrasad

Copy link
Copy Markdown
ContributorAuthor

I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback

Yeah I thought about this too, but the UX of just not having to think about span finish meant that it kinda just got included with the name. We can alias the name to something else in a future version if users get confused, we have room to move here.

{ name: "Important Function" },
(span) => {
// Can access the span to add data or set specific status
span?.setData("foo", "bar");

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

m: Should we mention/explain when/why span is undefined? May not be entirely clear from the outside why this may be unset and why I need to guard here.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

yup, ill add a note

@AbhiPrasad
AbhiPrasad enabled auto-merge (squash) August 31, 2023 19:29
@AbhiPrasad
AbhiPrasad merged commit dba65dc into masterAug 31, 2023
@AbhiPrasad
AbhiPrasad deleted the abhi-js-new-span-apis branch August 31, 2023 19:41
@shanamatthewsshanamatthews mentioned this pull request Sep 5, 2023
3 tasks
@github-actionsgithub-actionsBot locked and limited conversation to collaborators Sep 16, 2023
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

JS SDK Simplified Performance API

3 participants

@AbhiPrasad@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

feat(js): Document new performance APIs - #7707

Merged
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis
Aug 31, 2023
Merged

feat(js): Document new performance APIs#7707
AbhiPrasad merged 5 commits into
masterfrom
abhi-js-new-span-apis

Conversation

@AbhiPrasad

Copy link
Copy Markdown
Contributor

resolvesgetsentry/sentry-javascript#8724

Motivation

Documents the new performance APIs under the custom instrumentation section.

In the future we'll want to revamp both the automatic and custom instrumentation sections, but for now this is a good starting point.

The APIs are detailed in the RFC about the new performance API, and were introduced in getsentry/sentry-javascript#8803

Details

Sentry.startActiveSpan automatically wraps a callback with a span and makes that span the active span for the execution context of the callback. The callback can be async or sync, and can return arbitrary values.

Sentry.startSpan just creates a span, but does not wrap it in a callback. It needs to be explicitly set on the scope just like Sentry.startTransaction.

constresult=Sentry.startActiveSpan({name: importantThing},async()=>{awaitsomeWork();returnSentry.startActiveSpan({op: 'db',name: 'query-stuff'},()=>expensiveQuery());});// result === expensiveQuery() 

Under the hood these methods will create a transaction or span depending on if there is already an active span on the scope.

@AbhiPrasad
AbhiPrasad requested review from a team, Lms24 and ale-cota and removed request for a teamAugust 29, 2023 16:19
@vercel

vercelBot commented Aug 29, 2023

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
sentry-docs✅ Ready (Inspect)Visit Preview💬 Add feedbackAug 31, 2023 7:37pm

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM generally, just had some minor comments.

Side note/no action required as too late: I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback. Super sorry for not bringing this up earlier! But it's also not the end of the world.

});

const result = await Sentry.startActiveSpan(
{ name: "Important Function" },

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: should we shop op as well here or do we consider this not necessary for custom instrumentation?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

op is optional so I didn't include it. We need to go back and expand documentation on it, but that can happen later on.


<PlatformContent includePath="performance/add-independent-span" />

## Start Transaction

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

WDYT about

Suggested change
## Start Transaction
## [Deprecated]Start Transaction

or something similar that discourages folks from usingstartTransaction?

We probably need to make this JS-specific though so maybe throwing in a note/alert might also work

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I don't necessarily want to deprecate this method for now, but once we're more comfortable with the API we can come back and adjust.

@@ -0,0 +1,5 @@
<Note>

The span APIs require SDK version `7.65.0` or higher. If you are using an older version of the SDK, you can use the [explicit transaction APIs](#start-transaction) for custom instrumentation.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

l: Is there a reason why this note is different to the Node version? I'd prefer the Node version as it explicitly names the APIs.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

nope, I just forgot lol

good call!

@AbhiPrasad

Copy link
Copy Markdown
ContributorAuthor

I'm only now realizing that startActiveSpan to me conveys that we only start a span but don't finish it after running the callback

Yeah I thought about this too, but the UX of just not having to think about span finish meant that it kinda just got included with the name. We can alias the name to something else in a future version if users get confused, we have room to move here.

{ name: "Important Function" },
(span) => {
// Can access the span to add data or set specific status
span?.setData("foo", "bar");

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

m: Should we mention/explain when/why span is undefined? May not be entirely clear from the outside why this may be unset and why I need to guard here.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

yup, ill add a note

@AbhiPrasad
AbhiPrasad enabled auto-merge (squash) August 31, 2023 19:29
@AbhiPrasad
AbhiPrasad merged commit dba65dc into masterAug 31, 2023
@AbhiPrasad
AbhiPrasad deleted the abhi-js-new-span-apis branch August 31, 2023 19:41
@shanamatthewsshanamatthews mentioned this pull request Sep 5, 2023
3 tasks
@github-actionsgithub-actionsBot locked and limited conversation to collaborators Sep 16, 2023
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

JS SDK Simplified Performance API

3 participants

@AbhiPrasad@mydea@Lms24