') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); Include clerkTraceId for backend api errors by Nikpolik · Pull Request #1894 · clerk/javascript · GitHub
Skip to content

Include clerkTraceId for backend api errors - #1894

Merged
Nikpolik merged 1 commit into
main-v4from
plt-155-add-traceid-to-backend-errors
Oct 30, 2023
Merged

Include clerkTraceId for backend api errors#1894
Nikpolik merged 1 commit into
main-v4from
plt-155-add-traceid-to-backend-errors

Conversation

@Nikpolik

@NikpolikNikpolik commented Oct 16, 2023•
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This PR adds clerkTraceId in ClerkBackendApiResponse. This can help debug issues with API responses especially when errors happen server side or transiently and they can't be viewed in the console.

Changes

  1. Use ClerkAPIResponseError from @clerk/shared.
  2. Updated ClerkBackendApiResponse interface to include clerkTraceId when available.
  3. Extract clerkTraceId either from backend error response or headers in buildRequest.
  4. Pass the new clerkTraceId value to withLegacyReturn and then to the constructor of ClerkAPIResponseError.
  5. Update toString for ClerkAPIResponseError so it can also log the clerkTraceId.

Now callining .toString() on an error should show the trace id

Screenshot 2023-10-17 at 12 45 50 PM

The same is true for simply calling console.log on the error

Screenshot 2023-10-16 at 4 49 20 PM

Notes

DX is a bit weird here since fields that are different between success and error cannot be accessed by default in typescript and they do not appear in code completion(intelisense/language server). They can be accessed however by
checking if they exist in the object.

if("clerkTraceId"inclerkBackendApiResponse){console.log(`Error Trace: ${response.clerkTraceId}`);}

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

@changeset-bot

changeset-botBot commented Oct 16, 2023•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 1c04f6c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages
NameType
@clerk/backendPatch
@clerk/sharedPatch
@clerk/fastifyPatch
gatsby-plugin-clerkPatch
@clerk/nextjsPatch
@clerk/remixPatch
@clerk/clerk-sdk-nodePatch
@clerk/clerk-jsPatch
@clerk/clerk-expoPatch
@clerk/clerk-reactPatch
@clerk/chrome-extensionPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@Nikpolik
Nikpolikforce-pushed the plt-155-add-traceid-to-backend-errors branch 2 times, most recently from c1305f8 to 5f4fadeCompareOctober 17, 2023 08:54
@Nikpolik
Nikpolik marked this pull request as ready for review October 17, 2023 09:34
@Nikpolik
Nikpolik requested a review from a team as a code ownerOctober 17, 2023 09:34
@NikpolikNikpolik self-assigned this Oct 17, 2023
SokratisVidros
SokratisVidros suggested changes Oct 17, 2023
View reviewed changes
Comment threadpackages/backend/src/api/request.ts Outdated
Comment threadpackages/backend/src/api/request.ts Outdated
georgepsarakis
georgepsarakis reviewed Oct 18, 2023
View reviewed changes

@georgepsarakisgeorgepsarakis left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Nice work @Nikpolik 👏 !

Comment threadpackages/backend/src/api/request.ts Outdated
Comment thread.changeset/sour-comics-stare.md Outdated
Comment thread.changeset/sour-comics-stare.md Outdated
Comment threadpackages/backend/src/api/request.ts
Comment threadpackages/shared/src/errors/Error.ts Outdated
Comment threadpackages/backend/src/api/request.ts Outdated
@Nikpolik
Nikpolikforce-pushed the plt-155-add-traceid-to-backend-errors branch 3 times, most recently from c5d6fc0 to 83f200aCompareOctober 20, 2023 11:58
@Nikpolik
Nikpolikforce-pushed the plt-155-add-traceid-to-backend-errors branch from 83f200a to 99d6b0eCompareOctober 26, 2023 11:21
@Nikpolik
Nikpolik changed the base branch from main to main-v4October 26, 2023 11:23
SokratisVidros
SokratisVidros approved these changes Oct 27, 2023
View reviewed changes
Comment threadpackages/backend/src/api/request.ts
Comment threadpackages/backend/src/api/request.ts Outdated
Comment threadpackages/backend/src/api/request.ts Outdated
@Nikpolik
Nikpolikforce-pushed the plt-155-add-traceid-to-backend-errors branch 2 times, most recently from 7dfdf84 to 16b44aaCompareOctober 27, 2023 13:44
Nikos Polykandriotis
chore(backend,shared): Include clerkTraceId for backend api errors
1c04f6c
clerkTraceId is used when available and defaults to cloudflares CF Ray id
when its missing.
@Nikpolik
Nikpolikforce-pushed the plt-155-add-traceid-to-backend-errors branch from 16b44aa to 1c04f6cCompareOctober 30, 2023 11:40
@Nikpolik
Nikpolik added this pull request to the merge queue Oct 30, 2023
Merged via the queue into main-v4 with commit bc19fe0Oct 30, 2023
@Nikpolik
Nikpolik deleted the plt-155-add-traceid-to-backend-errors branch October 30, 2023 13:26
@clerk-cookieclerk-cookie mentioned this pull request Oct 30, 2023
Closed
@dimkl

dimkl commented Oct 30, 2023

Copy link
Copy Markdown
Contributor

@Nikpolik Could you also cherry-pick this change into main?

octoper pushed a commit that referenced this pull request Oct 31, 2023
Nikos Polykandriotis@octoper
chore(backend,shared): Include clerkTraceId for backend api errors (#…
093123b
…1894)
clerkTraceId is used when available and defaults to cloudflares CF Ray id
when its missing.
@Nikpolik
Nikpolik restored the plt-155-add-traceid-to-backend-errors branch October 31, 2023 13:50
@dimkl
dimkl deleted the plt-155-add-traceid-to-backend-errors branch October 31, 2023 13:55
@Nikpolik
Nikpolik restored the plt-155-add-traceid-to-backend-errors branch October 31, 2023 14:14
@NikpolikNikpolik mentioned this pull request Oct 31, 2023
Merged
24 tasks
@dimkl
dimkl deleted the plt-155-add-traceid-to-backend-errors branch October 31, 2023 14:47
@clerk-cookieclerk-cookie mentioned this pull request Oct 31, 2023
Merged
@LekoArtsLekoArts mentioned this pull request Mar 13, 2024
Merged
@LekoArtsLekoArts mentioned this pull request Aug 2, 2024
Merged
@coderabbitaicoderabbitaiBot mentioned this pull request Jul 31, 2026
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

3 more reviewers
@georgepsarakisgeorgepsarakisgeorgepsarakis left review comments
@dimkldimkldimkl left review comments
@SokratisVidrosSokratisVidrosSokratisVidros approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@NikpolikNikpolik

Labels

backend

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@Nikpolik@dimkl@georgepsarakis@SokratisVidros@clerk-cookie