Star us on GitHub
Star
Menu

Salesforce Lightning Web Components (LWC)

Monitoring and Debugging Salesforce Lightning Web Components (LWC)

Highlight.io makes it easy to monitor and debug Salesforce Lightning Web Components (LWC) applications. With a few lines of code you can:

  • Capture and replay user sessions
  • Identify and reproduce bugs quickly
  • Monitor performance metrics
  • Gain insights into user behavior

This integration works seamlessly with Salesforce LWC, requiring minimal changes to your existing codebase. The following guide will walk you through setting up highlight.io for monitoring your Salesforce LWC application.

Salesforce Installation Instructions

To install highlight.io in a Salesforce application, follow the normal highlight HTML installation instructions while performing additional steps to set up the content security policy to allow execution of the highlight script.

Configure the Head Markup

  • Navigate to Setup -> Digital Experiences -> and select the Builder of your choice
  • Open the Head Markup editor in Builder | Settings | Advanced
  • Add the <script src="https://unpkg.com/highlight.run"></script> tag.
  • Add another <script></script> with the H.init contents as described on our normal highlight HTML installation instructions.
  • Save the contents of the Head Markup.

Add head markup initializing Highlight in Salesforce

Configure the CSP Policy

  • Open the Security and Privacy menu in Builder | Settings.
  • Set Security Level to Relaxed
  • Under Trusted Sites, click the +Add Trusted Site button, and as necessary.

Update security level in Salesforce Update Content Security Policy (CSP) in Salesforce

Configure Trusted URLs

  • Open the Trusted URLs menu in Builder | Settings | Setup.
  • Add a New Trusted URL

Access trusted URLs in Salesforce Update trusted URLs in Salesforce