Compare commits

..

4 Commits

Author SHA1 Message Date
lebaudantoine f75adef69f 🐛(analytics) filter benign ResizeObserver loop error in Sentry/PostHog
Filter out harmless `ResizeObserver loop limit exceeded` and
`ResizeObserver loop completed with undelivered notifications`
errors via `beforeSend`.

Why this is safe:

* These are W3C spec-mandated browser guards that defer notification
  delivery to the next frame when callbacks alter layout during
  render. They do not cause JS runtime exceptions or break the UX.

Why we actually need to filter them:

* Telemetry platforms like PostHog do not stack/group these well,
  frequently generating distinct error events per browser engine
  and version.
* The unique variants flood reporting dashboards and trigger
  false-positive alerts that clutter real issue triage.
2026-08-13 12:24:18 +02:00
lebaudantoine 9392cd3e30 🐛(frontend) fix toolbar ResizeObserver loop and alignment drift
* Switch toolbar horizontal alignment from `marginRight` to
  `transform: translateX()`, so it no longer triggers layout reflows
  during ResizeObserver cycles and stops the "ResizeObserver loop"
  error.
* Replace the unstable `shift * 2` margin heuristic with a direct
  1:1 positional delta (`offsetX + shift`).
* Decouple CSS transitions: use the individual CSS `translate`
  property for the slide-up/down animations, leaving `transform`
  free for dynamic horizontal positioning.
2026-08-13 12:24:18 +02:00
lebaudantoine 4c0d89ef81 🐛(frontend) vendor formatChatMessageLinks and trim surrounding newlines
Copy the `formatChatMessageLinks` function locally so we can iterate
on it without patching the upstream dependency.

Use the local copy to trim `\n` characters at the beginning and end
of chat messages, which were leaking into the rendered output.
2026-08-13 12:24:18 +02:00
lebaudantoine c4335d2809 🐛(frontend) implement hysteresis band for the control bar layout
Introduce dual thresholds (1100px wide, 1050px narrow) for switching
the control bar between the expanded inline controls and the
collapsed menu.

The 50px deadband absorbs the width changes caused by rendering
5 buttons vs. 1 button, preventing an infinite layout oscillation
and the resulting `ResizeObserver loop` errors.
2026-08-13 12:24:17 +02:00
11 changed files with 40 additions and 105 deletions
-4
View File
@@ -12,7 +12,6 @@ and this project adheres to
- 🔥(frontend) drop unused vendored ConnectionObserver
- 🐛(frontend) vendor formatChatMessageLinks and trim surrounding newlines
- ✨(summary) add hostname to analytics properties
### Fixed
@@ -22,9 +21,6 @@ and this project adheres to
- 🐛(frontend) implement hysteresis band for the control bar layout
- 🐛(frontend) fix toolbar ResizeObserver loop and alignment drift
- 🐛(analytics) filter benign ResizeObserver loop error in Sentry/PostHog
- 🐛(frontend) stop reporting screen-share denials as errors
- 🐛(frontend) generalize screen-share error modal beyond macOS
- 📈(frontend) stop double-reporting media device failures
## [1.26.0] - 2026-08-12
@@ -23,7 +23,6 @@ export type LogCode =
| 'livekit_room_error'
| 'device_switch_failure'
| 'permission_poll_failure'
| 'media_devices_error_event'
// non-media families
| 'participant_mute_api_failure'
| 'permissions_api_failure'
@@ -138,7 +137,6 @@ export const captureMediaEvent = async (
| 'media-device-success'
| 'device-not-found'
| 'permissions-denied'
| 'screen-share-permission-denied'
| 'silent-mic-detected'
| 'silent-mic-analyser-unavailable'
| 'silent-mic-recovered'
@@ -225,10 +225,9 @@ export const Conference = ({
backgroundColor: 'primaryDark.50 !important',
})}
onError={(e) => {
const failure = MediaDeviceFailure.getFailure(e)
if (failure && failure !== MediaDeviceFailure.Other) return
reportError('livekit_room_error', e, {
path: 'connect_publish',
failure: MediaDeviceFailure.getFailure(e) ?? 'not-a-device-error',
})
}}
onConnected={async () => {
@@ -1,13 +1,6 @@
import { A, Button, Dialog, P } from '@/primitives'
import { useTranslation } from 'react-i18next'
import { css } from '@/styled-system/css'
import { getOS, type OS } from '@/utils/os'
const SCREEN_CAPTURE_SETTINGS_LINKS: Partial<Record<OS, string>> = {
macos:
'x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture',
windows: 'ms-settings:privacy-graphicscaptureprogrammatic',
}
// todo - refactor it into a generic system
export const ScreenShareErrorModal = ({
@@ -18,8 +11,7 @@ export const ScreenShareErrorModal = ({
onClose: () => void
}) => {
const { t } = useTranslation('rooms', { keyPrefix: 'error.screenShare' })
const os = getOS()
const settingsHref = SCREEN_CAPTURE_SETTINGS_LINKS[os]
const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1
return (
<Dialog
@@ -34,16 +26,15 @@ export const ScreenShareErrorModal = ({
<>
<P>
{t('message')}{' '}
{settingsHref && (
{isMac && (
<>
{t('settingsInstructions')}{' '}
{t('macInstructions')}{' '}
<A
href={settingsHref}
target="_blank"
href="x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture"
color="primary"
aria-label={t(`settingsLabel.${os}`) + '-' + t('newTab')}
aria-label={t('macSystemPreferences') + '-' + t('newTab')}
>
{t(`settingsLabel.${os}`)}
{t('macSystemPreferences')}
</A>
.{' '}
</>
@@ -50,16 +50,15 @@ export const useWatchMediaDeviceErrors = (): MediaDeviceAlert & {
useEffect(() => {
const onDeviceError = (error: Error, kind?: MediaDeviceKind) => {
const failure = MediaDeviceFailure.getFailure(error)
if (!failure) return
if (failure != MediaDeviceFailure.Other) {
void captureMediaEvent('media-device-error', {
log_code: 'media_devices_error_event',
path: 'connect_publish',
failure,
kind: kind ?? 'unknown',
})
}
if (!kind) return
if (!failure || !kind) return
void captureMediaEvent('media-device-error', {
log_code: 'media_devices_error_event',
path: 'connect_publish',
failure,
kind,
})
const permissionKind = PERMISSION_BY_DEVICE_KIND[kind]
switch (failure) {
case MediaDeviceFailure.DeviceInUse:
@@ -11,9 +11,7 @@ import { SidePanel } from '../components/SidePanel'
import { RecordingProvider } from '@/features/recording'
import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
import { ConnectionObserver } from '../components/ConnectionObserver'
import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
import { getOS } from '@/utils/os'
import { isFireFox } from '@/utils/livekit'
import { reportError } from '@/features/analytics/telemetry'
import { MediaStateObserver } from '../components/MediaStateObserver'
import { RoomMetadataSynchronizer } from '../components/RoomMetadataSynchronizer'
import { useNoiseReduction } from '../hooks/useNoiseReduction'
@@ -38,20 +36,6 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
SettingsComponent?: React.ComponentType
}
const getScreenSharePermissionDeniedScope = (
error: Error
): 'system' | 'user' | 'browser' | null => {
if (error.name === 'NotAllowedError') {
if (/by system/i.test(error.message)) return 'system'
if (/by user/i.test(error.message)) return 'user'
return 'browser'
}
if (error.name === 'NotFoundError' && isFireFox() && getOS() === 'macos') {
return 'system'
}
return null
}
/**
* The `VideoConference` ready-made component is your drop-in solution for a classic video conferencing application.
* It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers
@@ -77,34 +61,6 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
const [isShareErrorVisible, setIsShareErrorVisible] = useState(false)
const handleDeviceError = ({
source,
error,
}: {
source: Track.Source
error: Error
}) => {
if (source === Track.Source.ScreenShare) {
const scope = getScreenSharePermissionDeniedScope(error)
if (scope) {
if (scope === 'system') setIsShareErrorVisible(true)
void captureMediaEvent('screen-share-permission-denied', {
at: 'ControlBar.onDeviceError',
source,
error_name: error.name,
error_message: error.message,
denied_scope: scope,
os: getOS(),
})
return
}
}
reportError('device_switch_failure', error, {
at: 'ControlBar.onDeviceError',
source,
})
}
return (
<>
<RoomMetadataSynchronizer />
@@ -136,7 +92,21 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
<StageLayout />
)}
</RoomContentArea>
<ControlBar onDeviceError={handleDeviceError} />
<ControlBar
onDeviceError={(e) => {
reportError('device_switch_failure', e.error, {
at: 'ControlBar.onDeviceError',
source: e.source,
})
if (
e.source == Track.Source.ScreenShare &&
e.error.toString() ==
'NotAllowedError: Permission denied by system'
) {
setIsShareErrorVisible(true)
}
}}
/>
<SidePanel />
</>
)}
+2 -5
View File
@@ -214,11 +214,8 @@
"title": "Bildschirmfreigabe nicht möglich",
"ariaLabel": "Bildschirmfreigabe nicht möglich",
"message": "Deinem Browser fehlt möglicherweise die Berechtigung, den Bildschirm deines Geräts abzugreifen.",
"settingsInstructions": "Gehe zu den",
"settingsLabel": {
"macos": "Systemeinstellungen",
"windows": "Windows-Datenschutzeinstellungen"
},
"macInstructions": "Gehe zu den",
"macSystemPreferences": "Systemeinstellungen",
"helpLinkText": "Weitere Informationen findest du unter",
"helpLinkLabel": "Bildschirmfreigabeproblem",
"closeButton": "Schließen",
+2 -5
View File
@@ -214,11 +214,8 @@
"title": "Unable to share your screen",
"ariaLabel": "Unable to share your screen",
"message": "Your browser may not be allowed to record the screen on your computer.",
"settingsInstructions": "Go to your",
"settingsLabel": {
"macos": "System Preferences",
"windows": "Windows privacy settings"
},
"macInstructions": "Go to your",
"macSystemPreferences": "System Preferences",
"helpLinkText": "To learn more, see",
"helpLinkLabel": "Presentation issue",
"closeButton": "Dismiss",
+2 -5
View File
@@ -214,11 +214,8 @@
"title": "Impossible de partager votre écran",
"ariaLabel": "Impossible de partager votre écran",
"message": "Il se peut que votre navigateur ne soit pas autorisé à enregistrer l'écran sur votre ordinateur.",
"settingsInstructions": "Accédez à vos",
"settingsLabel": {
"macos": "Préférences système",
"windows": "paramètres de confidentialité Windows"
},
"macInstructions": "Accèdez à vos",
"macSystemPreferences": "Préférences système",
"helpLinkText": "Pour en savoir plus, consulter",
"helpLinkLabel": "Problème de présentation",
"closeButton": "Ignorer",
+2 -5
View File
@@ -214,11 +214,8 @@
"title": "Kan uw scherm niet delen",
"ariaLabel": "Kan uw scherm niet delen",
"message": "Het is mogelijk dat uw browser geen toestemming heeft om het scherm op uw computer op te nemen.",
"settingsInstructions": "Ga naar uw",
"settingsLabel": {
"macos": "Systeemvoorkeuren",
"windows": "Windows-privacyinstellingen"
},
"macInstructions": "Ga naar uw",
"macSystemPreferences": "Systeemvoorkeuren",
"helpLinkText": "Meer informatie, zie",
"helpLinkLabel": "Presentatieprobleem",
"closeButton": "Negeren",
-6
View File
@@ -1,7 +1,6 @@
"""Analytics classes."""
import json
import socket
import time
from collections import Counter
from functools import lru_cache
@@ -44,11 +43,6 @@ class Analytics:
if self.is_disabled:
return
# We add hostname to help track down the source of events
properties = properties or {}
if not properties.get("hostname"):
properties["hostname"] = socket.gethostname()
try:
self._client.capture(
event_name, distinct_id=distinct_id, properties=properties