Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[REPLAY] Avoid casting & add proper check instead of relying on try/catch #2016

Merged
merged 6 commits into from Feb 27, 2023

Conversation

ThibautGeriz
Copy link
Contributor

@ThibautGeriz ThibautGeriz commented Feb 15, 2023

Motivation

Avoid relying on try catch when the object is undefined

image

Changes

  • remove casting
  • add proper check

Testing

  • Local
  • Staging
  • Unit
  • End to end

I have gone over the contributing documentation.

@ThibautGeriz ThibautGeriz marked this pull request as ready for review February 15, 2023 10:34
@ThibautGeriz ThibautGeriz requested review from a team as code owners February 15, 2023 10:34
@bcaudan
Copy link
Contributor

bcaudan commented Feb 15, 2023

Not sure to get the extra value of removing this case from the try catch since we don't do anything more with it 🤔
What motivated this change?

@ThibautGeriz
Copy link
Contributor Author

Not sure to get the extra value of removing this case from the try catch since we don't do anything more with it 🤔 What motivated this change?

To me handle a case with a if is more graceful than using a try/catch but it should not change much. Maybe it's simply a personal preference

@bcaudan
Copy link
Contributor

bcaudan commented Feb 15, 2023

oh ok, not super fan of using try/catch either when we can avoid it.
I'd say that it could be nice if we could remove the try/catch completely and use only conditional logic or maybe reduce the scope of the try/catch.
Otherwise, we are adding an extra code path without any behaviour difference so it raised the question what is special about this case for it to be handled separately.

@ThibautGeriz
Copy link
Contributor Author

ThibautGeriz commented Feb 15, 2023

I'd say that it could be nice if we could remove the try/catch completely and use only conditional logic or maybe reduce the scope of the try/catch.

I can remove the try catch as well and wrap the function into a monitor if something breaks we will know and the error would be contain. WDYT?

@bcaudan
Copy link
Contributor

bcaudan commented Feb 15, 2023

I don't have a lot of context on this specific code (@BenoitZugmeyer could know more), so I'd probably start by trying to understand a bit more what we were trying to achieve with this try/catch in the first place, if it is our implementation or if it comes from rrweb and depending on that see if we have a better strategy to than this try/catch.

Stepping a bit back, I would wonder if it is a fight worth picking and if it worth picking it now 🙂
Adding a task in the backlog to get to the bottom of this at some point could also be an option and we could decide to tackle it while working on a related topic.

Comment on lines 364 to 382
function _getCssRulesString(cssStyleSheet: CSSStyleSheet | undefined | null): string | null {
if (!cssStyleSheet) {
return null
} catch (error) {
return null
}
try {
const rules = cssStyleSheet.rules || cssStyleSheet.cssRules
if (!rules) {
return null
}
const styleSheetCssText = Array.from(rules, getCssRuleString).join('')
return switchToAbsoluteUrl(styleSheetCssText, cssStyleSheet.href)
} catch (err) {
if (err instanceof DOMException && err.name === 'SecurityError') {
// if css is protected by CORS we cannot access cssRules see: https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface
return null
}
throw err
}
}
Copy link
Member

Choose a reason for hiding this comment

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

💬 suggestion: ‏I would reduce the try/catch scope to be minimal, and remove the monitor() above

function _getCssRulesString(cssStyleSheet: CSSStyleSheet | undefined | null): string | null {
  if (!cssStyleSheet) {
    return null
  }
  let rules
  try {
    rules = cssStyleSheet.rules || cssStyleSheet.cssRules
  } catch {
    // if css is protected by CORS we cannot access cssRules see: https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface
  }
  if (!rules) {
    return null
  }
  const styleSheetCssText = Array.from(rules, getCssRuleString).join('')
  return switchToAbsoluteUrl(styleSheetCssText, cssStyleSheet.href)
}

Or, if we want to keep a trace of unexpected exceptions:

function _getCssRulesString(cssStyleSheet: CSSStyleSheet | undefined | null): string | null {
  if (!cssStyleSheet) {
    return null
  }
  let rules
  try {
    rules = cssStyleSheet.rules || cssStyleSheet.cssRules
  } catch (error) {
    // if css is protected by CORS we cannot access cssRules see: https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface
    if (!(error instanceof DOMException) || error.name !== 'SecurityError') {
      addTelemetryError(error)
    }
  }
  if (!rules) {
    return null
  }
  const styleSheetCssText = Array.from(rules, getCssRuleString).join('')
  return switchToAbsoluteUrl(styleSheetCssText, cssStyleSheet.href)
}

Copy link
Member

Choose a reason for hiding this comment

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

@bcaudan what do you think? Is it worth logging unexpected exceptions here to be aware of things that are failing?

Copy link
Contributor

Choose a reason for hiding this comment

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

Is it worth logging unexpected exceptions here to be aware of things that are failing?

ultimately, if accessing those rules or cssRules raises an exception, we would not be able to do much.
It could be interesting to see if there are other cases than the ones identified (for curiosity sake) but eventually we should probably just leave the catch clause empty.

@ThibautGeriz ThibautGeriz merged commit 707d36c into main Feb 27, 2023
@ThibautGeriz ThibautGeriz deleted the thibaut.gery/fix-check branch February 27, 2023 11:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants