[CON-385] Add tracer to web client #1878

jonaylor89 · 2022-09-08T13:43:37Z

Description

This PR adds OpenTelemetry sdk and W3C spec to the web client codebase, which provides a rich API for adding tracing into the application. This includes global requestIDs (traceID), parentIDs which tell you where a request came from, and spanIDs which refers to the current request on a specific node. OpenTelemetry docs go into much more detail.

Included in this PR is two extra env vars. One to turn tracing on and off and another to specify a url to export data to. If no exporter is specified but tracing is still enabled, not extra network calls with be made and tracing will just propagate the tracing data to downstream services using http headers. If exporting is enabled, batches of spans will be pushed to the Audius Collector which will in turn forward the data to CloudTrace

OpenTelemetry library size

Dragons

The only major dragon my be library size and if the telemetry causes CORS issues.

How Has This Been Tested?

I tested this by running the web client on my remote dev box and viewing the output in Chrome.

One major note, when testing on Brave, the browser blocked the span data from being exported. This doesn't cause any issues other than missing spans in our visualizer.

How will this change be monitored?

These changes will be monitored with Google's CloudTrace that we have set up in staging and prod

Feature Flags

n/a

sliptype · 2022-09-09T18:54:17Z

packages/web/src/tracer.ts

+import { registerInstrumentations } from '@opentelemetry/instrumentation'
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
+
+// import { AudiusInstrumention } from '@audius/instrumentation-audius'


Are we going to publish this package? Will need to add it to the automated libs publish in CI if it needs to be updated along with the sdk

Ideally yes, it'll be a separate published package that anyone can consume. To make things easier though, it might be better to just keep it in the same codebase for now

sliptype · 2022-09-09T18:55:47Z

packages/web/package.json

@@ -15,6 +15,14 @@
    "@hcaptcha/react-hcaptcha": "0.3.6",
    "@juggle/resize-observer": "^3.3.1",
    "@jup-ag/core": "2.0.0-beta.3",
+    "@opentelemetry/api": "^1.2.0",


We should check how much these dependencies (and the @audius/instrumentation) dependency adds to the bundle size. Can check with

npm run analyzeBundle && npm run analyze

I seem to get an error when I run this

specially on the npm run analyze part

sliptype · 2022-09-09T18:56:12Z

packages/web/src/index.tsx

@@ -1,3 +1,6 @@
+import { setupTracing } from './tracer'


We might want to add this for mobile too in the future

merge main

gitguardian · 2022-09-13T14:56:06Z

⚠️ GitGuardian has uncovered 4 secrets following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secrets in your pull request

GitGuardian id	Secret	Commit	Filename
2858198	Generic High Entropy Secret	`b9e4e41`	packages/web/.env/.env.prod	View secret
2858199	Generic High Entropy Secret	`b9e4e41`	packages/web/.env/.env.stage	View secret
2858198	Generic High Entropy Secret	`d06e2c1`	packages/web/.env/.env.prod	View secret
2858199	Generic High Entropy Secret	`d06e2c1`	packages/web/.env/.env.stage	View secret

🛠 Guidelines to remediate hardcoded secrets

Understand the implications of revoking this secret by investigating where it is used in your code.
Replace and store your secrets safely. Learn here the best practices.
Revoke and rotate these secrets.
If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

following these best practices for managing and storing secrets including API keys and other credentials
install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Our GitHub checks need improvements? Share your feedbacks!}

raymondjacobson

Looks like in total ~ 137.1kb gzipped for the package. Not horrific, but definitely sizable. Would an async import be possible here? e.g.

audius-client/packages/web/src/services/web3-modal/index.ts

Line 36 in 859df1f

const { Bitski } = await import('bitski')

raymondjacobson · 2022-09-13T20:20:12Z

packages/web/src/index.tsx

+/* eslint-disable import/order */
+/* eslint-disable import/first */
+import { setupTracing } from './utils/tracer'
+setupTracing()


why do this here first?

Because if there are any registered instrumentations, it needs to monkey-patch them before they get imported

packages/web/package.json

packages/web/src/utils/tracer.ts

audius-infra · 2022-09-14T15:07:57Z

Preview this change https://demo.audius.co/jn-con-385

[3394a06] Fix infinite lineup fetch (#1940) Sebastian Klingler [19381a3] [C-296] Persist stack history across bottom tabs (#1939) Dylan Jeffers [6705cb5] [C-1118] Send tip -> send audio (#1937) nicoback2 [9c63ab7] [C-1023] [C-1039] Sync account entropy from webview and improve splashscreen (#1938) Sebastian Klingler [e3d9cc4] [C-1064] Show "You're Offline" component on mobile (#1936) Andrew Mendelsohn [16a8b96] [C-1113] Improve native render performance (#1935) Dylan Jeffers [7f4ede3] Fix broken signup on web (#1934) Michael Piazza [2373ae0] fix rewards claim (#1933) nicoback2 [54dcd64] [C-1107] Fix push to sign in when identity is down (#1931) Raymond Jacobson [43222ee] [C-1091] Improve selector performance (#1932) Dylan Jeffers [eee12c7] Add request pagination for favorites for the new table (#1850) Kyle Shanks [5d43c12] upgrade sdk (#1929) nicoback2 [2fd28e4] [Reloaded] No more useDispatchWeb, messages C-1089 (#1927) nicoback2 [6fc8709] Merge pull request #1928 from AudiusProject/jn-exporter-default Johannes Naylor [24d9d3b] [C-838] Fix desktop update banner flow (#1719) Raymond Jacobson [aace104] remove console exporter and change default to undefined Johannes Naylor [81e9a4d] Detach mobile reachability state from non existent webview C-938 (#1913) nicoback2 [9c6c067] Merge pull request #1878 from AudiusProject/jn-con-385 Johannes Naylor [5f335bb] Update mobile readme install instructions (#1926) Dylan Jeffers [8469883] [C-907] Fix react native push notifications (#1922) Raymond Jacobson [543b013] Fix pull to refresh (#1925) Sebastian Klingler [370088e] Fix issue with using `accountUser` handle (#1924) Sebastian Klingler [5a496fa] fix more by artist lineup (#1921) nicoback2 [cab5181] downgrade node Johannes Naylor [5602eab] pin deps Johannes Naylor [7a95b3f] Fix infinite 404 (#1920) Sebastian Klingler [8cdc9b9] [C-1060] Fix /check page (#1919) Raymond Jacobson [375c5dd] [PAY-578] Fade in socials on mobile user screen (#1905) Reed [2b1cc7f] Wait for libs before signing data (#1918) Sebastian Klingler [d06e2c1] update env var Johannes Naylor [5efd985] [C-1031] Improve profile expand section touch target (#1911) Dylan Jeffers [f327636] [C-1053] Fix ios status color in dark/light modes (#1917) Dylan Jeffers [7a167b6] [C-1050] Fix profile search crash (#1916) Dylan Jeffers [32b8c82] [C-1057] Fix blank edit-profile screen (#1915) Dylan Jeffers [406e6c0] no more useselector web (#1914) nicoback2 [98ed3f6] [C-1029] Fix pull-to-refresh (#1912) Dylan Jeffers [7582351] Migrate useGetFirstOrTopSupporter (#1910) Sebastian Klingler [b9e4e41] add env vars Johannes Naylor [44060c1] remove telemetry Johannes Naylor [53483ef] remove telemetry Johannes Naylor [ae57626] remove telemetry Johannes Naylor [0515567] more telemetry Johannes Naylor [2da8c47] install Johannes Naylor [379af75] Merge branch 'main' into jn-con-385 merge main Johannes Naylor [d0deea6] changing things around Johannes Naylor [22288b1] [C-1012] Remove web build from mobile build (#1907) Raymond Jacobson [8572ee3] [C-1027] Improve bottom-bar perf (#1909) Dylan Jeffers [a41d536] the goods Johannes Naylor [128aa9b] move the instrumentation to the audiusBackend Johannes Naylor [a27c976] Fix profile clearing (#1908) Dylan Jeffers [75e6eec] Remove react-nil and NATIVE_NAVIGATION (#1906) Dylan Jeffers [ebbb561] Update social features to use entity manager (#1853) Isaac Solo [99952d1] [C-990] Nativefy oauth (#1885) Raymond Jacobson [c149204] Fix failing CI init (#1904) Sebastian Klingler [d436adb] [C-1009] Fix misaligned social icons (#1901) Dylan Jeffers [d21d5d4] [C-1020] Remove web pushes (#1902) Dylan Jeffers [600f673] [C-711] Change useSize to useMeasure in ProfileBio (#1903) Reed [497da98] stuff Johannes Naylor [7f4a144] try a bunch of things Johannes Naylor [66995fa] Clean up some more instances of useSelectorWeb/useDispatchWeb (#1900) Sebastian Klingler [3383135] Nativefy remixes screen (#1887) nicoback2 [8b0d1e5] Fix edit profile screen (#1899) Sebastian Klingler [fb3c189] [C-996] Remove NATIVE_MOBILE references (#1895) Dylan Jeffers [bb0a03e] Fix lineup state persisting across profile screens sliptype [5150a58] [PAY-626] Change playlist+tip challenges copy and emoji (#1897) Reed [e816c64] [PAY-625] Playlist challenge optimistic claiming (#1891) Reed [f3c02b6] [C-892] Fix multiple menus open at once (#1889) Andrew Mendelsohn [192c669] run setupTracing Johannes Naylor [00f3951] add tracer Johannes Naylor

add tracer

00f3951

pull-request-size bot added the size/M label Sep 8, 2022

run setupTracing

192c669

sliptype approved these changes Sep 9, 2022

View reviewed changes

try a bunch of things

7f4a144

pull-request-size bot added size/L and removed size/M labels Sep 12, 2022

jonaylor89 added 11 commits September 12, 2022 20:44

stuff

497da98

move the instrumentation to the audiusBackend

128aa9b

the goods

a41d536

changing things around

d0deea6

Merge branch 'main' into jn-con-385

379af75

merge main

install

2da8c47

more telemetry

0515567

remove telemetry

ae57626

remove telemetry

53483ef

remove telemetry

44060c1

add env vars

b9e4e41

jonaylor89 marked this pull request as ready for review September 13, 2022 14:58

raymondjacobson self-requested a review September 13, 2022 17:16

update env var

d06e2c1

raymondjacobson approved these changes Sep 14, 2022

View reviewed changes

jonaylor89 added 2 commits September 14, 2022 09:44

pin deps

5602eab

downgrade node

cab5181

jonaylor89 merged commit 9c6c067 into main Sep 14, 2022

jonaylor89 deleted the jn-con-385 branch September 14, 2022 17:43

AudiusProject deleted a comment from linear bot Sep 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[CON-385] Add tracer to web client #1878

[CON-385] Add tracer to web client #1878

jonaylor89 commented Sep 8, 2022 •

edited

sliptype Sep 9, 2022

jonaylor89 Sep 13, 2022

sliptype Sep 9, 2022

jonaylor89 Sep 13, 2022

jonaylor89 Sep 13, 2022

sliptype Sep 9, 2022

gitguardian bot commented Sep 13, 2022 •

edited

raymondjacobson left a comment

raymondjacobson Sep 13, 2022

jonaylor89 Sep 14, 2022

audius-infra commented Sep 14, 2022

[CON-385] Add tracer to web client #1878

[CON-385] Add tracer to web client #1878

Conversation

jonaylor89 commented Sep 8, 2022 • edited

Description

Dragons

How Has This Been Tested?

How will this change be monitored?

Feature Flags

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gitguardian bot commented Sep 13, 2022 • edited

⚠️ GitGuardian has uncovered 4 secrets following the scan of your pull request.

raymondjacobson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

audius-infra commented Sep 14, 2022

jonaylor89 commented Sep 8, 2022 •

edited

gitguardian bot commented Sep 13, 2022 •

edited