From 6b36604c8417879aacf0ae6a082b7dd30b34046d Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 20 Mar 2023 19:17:50 +0000 Subject: [PATCH] Update js-sdk --- package.json | 2 +- src/otel/OTelGroupCallMembership.ts | 43 ++++++++++++++++--- src/otel/otel.ts | 64 +---------------------------- src/room/useGroupCall.ts | 6 +++ yarn.lock | 16 ++++---- 5 files changed, 53 insertions(+), 78 deletions(-) diff --git a/package.json b/package.json index a8f6ff0d..a32fd8c9 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "i18next-browser-languagedetector": "^6.1.8", "i18next-http-backend": "^1.4.4", "lodash": "^4.17.21", - "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#64197bf4db6486d77708125d7fb2e8d7fe001f14", + "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#23837266fca5ee799b51a722f7b8eefb2f5ac140", "matrix-widget-api": "^1.0.0", "mermaid": "^8.13.8", "normalize.css": "^8.0.1", diff --git a/src/otel/OTelGroupCallMembership.ts b/src/otel/OTelGroupCallMembership.ts index a4e3bfb1..65e5d6ac 100644 --- a/src/otel/OTelGroupCallMembership.ts +++ b/src/otel/OTelGroupCallMembership.ts @@ -15,6 +15,7 @@ limitations under the License. */ import opentelemetry, { Span, Attributes } from "@opentelemetry/api"; +import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions"; import { GroupCall, MatrixClient, @@ -23,7 +24,7 @@ import { } from "matrix-js-sdk"; import { VoipEvent } from "matrix-js-sdk/src/webrtc/call"; -import { tracer } from "./otel"; +import { provider, tracer } from "./otel"; /** * Flattens out an object into a single layer with components @@ -78,15 +79,15 @@ export class OTelGroupCallMembership { constructor(private groupCall: GroupCall, client: MatrixClient) { this.myUserId = client.getUserId(); this.myMember = groupCall.room.getMember(client.getUserId()); + + provider.resource.attributes[ + SemanticResourceAttributes.SERVICE_NAME + ] = `element-call-${this.myUserId}-${client.getDeviceId()}`; } public onJoinCall() { - // Create a new call based on the callIdContext. This context also has a span assigned to it. - // Other spans can use this context to extract the parent span. - // (When passing this context to startSpan the started span will use the span set in the context (in this case the callSpan) as the parent) - // Create the main span that tracks the time we intend to be in the call - this.callMembershipSpan = tracer.startSpan("otel_groupCallMembershipSpan"); + this.callMembershipSpan = tracer.startSpan("matrix.groupCallMembership"); this.callMembershipSpan.setAttribute( "matrix.confId", this.groupCall.groupCallId @@ -143,4 +144,34 @@ export class OTelGroupCallMembership { ); } } + + public onToggleMicrophoneMuted(newValue: boolean) { + this.callMembershipSpan.addEvent("matrix.toggleMicMuted", { + "matrix.microphone.muted": newValue, + }); + } + + public onSetMicrophoneMuted(setMuted: boolean) { + this.callMembershipSpan.addEvent("matrix.setMicMuted", { + "matrix.microphone.muted": setMuted, + }); + } + + public onToggleLocalVideoMuted(newValue: boolean) { + this.callMembershipSpan.addEvent("matrix.toggleVidMuted", { + "matrix.video.muted": newValue, + }); + } + + public onSetLocalVideoMuted(setMuted: boolean) { + this.callMembershipSpan.addEvent("matrix.setVidMuted", { + "matrix.video.muted": setMuted, + }); + } + + public onToggleScreensharing(newValue: boolean) { + this.callMembershipSpan.addEvent("matrix.setVidMuted", { + "matrix.screensharing.enabled": newValue, + }); + } } diff --git a/src/otel/otel.ts b/src/otel/otel.ts index f7facbae..95e81970 100644 --- a/src/otel/otel.ts +++ b/src/otel/otel.ts @@ -38,7 +38,7 @@ const providerConfig = { [SemanticResourceAttributes.SERVICE_NAME]: SERVICE_NAME, }), }; -const provider = new WebTracerProvider(providerConfig); +export const provider = new WebTracerProvider(providerConfig); provider.addSpanProcessor(new SimpleSpanProcessor(otlpExporter)); provider.addSpanProcessor(new SimpleSpanProcessor(posthogExporter)); @@ -49,65 +49,3 @@ opentelemetry.trace.setGlobalTracerProvider(provider); export const tracer = opentelemetry.trace.getTracer( "my-element-call-otl-tracer" ); - -/* -class CallTracer { - // We create one tracer class for each main context. - // Even if differnt tracer classes overlap in time space, we might want to visulaize them seperately. - // The Call Tracer should only contain spans/events that are relevant to understand the procedure of the individual candidates. - // Another Tracer Class (for example a ConnectionTracer) can contain a very granular list of all steps to connect to a call. - - private callSpan; - private callContext; - private muteSpan?; - - public startGroupCall(groupCallId: string) {} - - public startCall(callId: string) { - // The main context will be set when initiating the main/parent span. - - // Create an initial context with the callId param - const callIdContext = opentelemetry.context - .active() - .setValue(Symbol("callId"), callId); - - // Create the main span that tracks the whole call - this.callSpan = tracer.startSpan("otel_callSpan", undefined, callIdContext); - - // Create a new call based on the callIdContext. This context also has a span assigned to it. - // Other spans can use this context to extract the parent span. - // (When passing this context to startSpan the started span will use the span set in the context (in this case the callSpan) as the parent) - this.callContext = opentelemetry.trace.setSpan( - opentelemetry.context.active(), - this.callSpan - ); - - // Here we start a very short span. This is a hack to trigger the posthog exporter. - // Only ended spans are processed by the exporter. - // We want the exporter to know that a call has started - const startCallSpan = tracer.startSpan( - "otel_startCallSpan", - undefined, - this.callContext - ); - startCallSpan.end(); - } - public muteMic(muteState: boolean) { - if (muteState) { - this.muteSpan = tracer.startSpan( - "otel_muteSpan", - undefined, - this.callContext - ); - } else if (this.muteSpan) { - this.muteSpan.end(); - this.muteSpan = null; - } - } - public endCall() { - this.callSpan?.end(); - } -} - -export const callTracer = new CallTracer(); -*/ diff --git a/src/room/useGroupCall.ts b/src/room/useGroupCall.ts index 0311ed97..44db2124 100644 --- a/src/room/useGroupCall.ts +++ b/src/room/useGroupCall.ts @@ -413,6 +413,8 @@ export function useGroupCall( const toggleLocalVideoMuted = useCallback(() => { const toggleToMute = !groupCall.isLocalVideoMuted(); groupCall.setLocalVideoMuted(toggleToMute); + groupCallOTelMembership.onToggleLocalVideoMuted(toggleToMute); + // TODO: These explict posthog calls should be unnecessary now with the posthog otel exporter? PosthogAnalytics.instance.eventMuteCamera.track( toggleToMute, groupCall.groupCallId @@ -422,6 +424,7 @@ export function useGroupCall( const setMicrophoneMuted = useCallback( (setMuted) => { groupCall.setMicrophoneMuted(setMuted); + groupCallOTelMembership.onSetMicrophoneMuted(setMuted); PosthogAnalytics.instance.eventMuteMicrophone.track( setMuted, groupCall.groupCallId @@ -432,10 +435,13 @@ export function useGroupCall( const toggleMicrophoneMuted = useCallback(() => { const toggleToMute = !groupCall.isMicrophoneMuted(); + groupCallOTelMembership.onToggleMicrophoneMuted(toggleToMute); setMicrophoneMuted(toggleToMute); }, [groupCall, setMicrophoneMuted]); const toggleScreensharing = useCallback(async () => { + groupCallOTelMembership.onToggleScreensharing(!groupCall.isScreensharing); + if (!groupCall.isScreensharing()) { // toggling on updateState({ requestingScreenshare: true }); diff --git a/yarn.lock b/yarn.lock index 2662e3df..ddb3fc68 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1821,10 +1821,10 @@ resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0" integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw== -"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.2": - version "0.1.0-alpha.2" - resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.2.tgz#a09d0fea858e817da971a3c9f904632ef7b49eb6" - integrity sha512-oVkBCh9YP7H9i4gAoQbZzswniczfo/aIptNa4dxRi4Ff9lSvUCFv6Hvzi7C+90c0/PWZLXjIDTIAWZYmwyd2fA== +"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.3": + version "0.1.0-alpha.5" + resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.5.tgz#60ede2c43b9d808ba8cf46085a3b347b290d9658" + integrity sha512-2KjAgWNGfuGLNjJwsrs6gGX157vmcTfNrA4u249utgnMPbJl7QwuUqh1bGxQ0PpK06yvZjgPlkna0lTbuwtuQw== "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz": version "3.2.14" @@ -10545,12 +10545,12 @@ matrix-events-sdk@0.0.1: resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd" integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA== -"matrix-js-sdk@github:matrix-org/matrix-js-sdk#64197bf4db6486d77708125d7fb2e8d7fe001f14": - version "23.1.1" - resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/64197bf4db6486d77708125d7fb2e8d7fe001f14" +"matrix-js-sdk@github:matrix-org/matrix-js-sdk#23837266fca5ee799b51a722f7b8eefb2f5ac140": + version "23.5.0" + resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/23837266fca5ee799b51a722f7b8eefb2f5ac140" dependencies: "@babel/runtime" "^7.12.5" - "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.2" + "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.3" another-json "^0.2.0" bs58 "^5.0.0" content-type "^1.0.4"