feat(rum): disable beacon compression when flag is set

[devcorpio]

Context

In the past it has been common to find the situation where we needed a HAR file to investigate issues of a support case.

Most of the time the HAR files provided were not showing the payload of the events sent by the RUM agent. That was happening because they were generated in Chrome. That browser supports Compression Streams API which it is being used by the agent to compress events payload. Although it would be possible to generate them with a browser such as Firefox, we have found that in particular cases that wasn't a viable option for support.

Because of that, in a conversation with @vigneshshanmugam we agreed to provide a way of disabling payload compression for such scenarios.

What the PR is doing

Disables the payload compression:

1. if an item with the key _elastic_inspect_beacon_ exists in sessionStorage.
2. If the page is loaded including the url param _elastic_inspect_beacon_. E.g. https://elastic.co?_elastic_inspect_beacon_ (this creates the item in sessionStorage automatically)

The scenario 2 covers the case where support is not directly creating the HAR and instead explaining to a customer how to do it. The way I see it, to add ?_elastic_inspect_beacon_ to a URL is much simpler than creating a sessionStorage item manually.

demo

• creating the sessionStorage item manually

disable_compression_creating_item.mov

• accessing a website with the query param included

disable_compression_with_query_param.mov

Pending task:

• Update the troubleshooting section so as to add this

[ghost]

📦 Bundlesize report

Filename	Size(bundled)	Size(gzip)	Diff(gzip)
elastic-apm-opentracing.umd.min.js	66.8 KiB	21.3 KiB	⚠️ 194 Bytes
elastic-apm-rum.umd.min.js	60.7 KiB	19.7 KiB	⚠️ 188 Bytes

[ghost]

💚 Build Succeeded

the below badges are clickable and redirect to their specific view in the CI or DOCS

Expand to view the summary

Build stats

• Start Time: 2022-05-09T08:21:41.338+0000

• Duration: 84 min 8 sec

Test stats 🧪

Test	Results
Failed	0
Passed	18
Skipped	0
Total	18

🤖 GitHub comments

To re-run your PR in the CI, just comment with:

• /test : Re-trigger the build.

• run benchmark tests : Run the benchmark test.

• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[ghost]

🌐 Coverage report

Name	Metrics % (covered/total)	Diff
Packages	100.0% (7/7)	💚
Files	98.039% (50/51)	👎 -0.109
Classes	98.039% (50/51)	👎 -0.109
Methods	97.393% (411/422)	👎 -0.043
Lines	95.348% (2111/2214)	👍 0.027
Conditionals	86.284% (1038/1203)	👍 0.253

[vigneshshanmugam]

LGTM with pending comments.

[devcorpio]

Hi @bmorelli25,

The change made in this PR will require changes in the RUM documentation. Discussing this with @vigneshshanmugam yesterday we agreed that making the change in the troubleshooting section it might be the best choice.

What are your thoughts of this proposal?

 [float] [[disable-events-payload-compression]] === Disable events payload compression In browsers such as Chrome the payload of the events sent by the RUM JS agent is being compressed with gzip. Because of that, you will not see a readable content when inspecting the event with the Network panel of your browser developer tools. There are situations where that can be an issue. For instance, HAR files will not show a readable information. Therefore, inspecting events for debugging purposes will not be possible. There are two ways to disable the payload compression: 1. Creating an item named `_elastic_inspect_beacon_` using the sessionStorage browser API. 2. Loading the webpage including the query param `_elastic_inspect_beacon_` in the URL. E.g. `https://elastic.co?_elastic_inspect_beacon_` The effect of this will remain until the tab or browser is closed. 

Thank you!

[vigneshshanmugam]

I would reword this a bit differently, I will leave it to @bmorelli25 to comment.

[bmorelli25]

Thanks for the ping! Here are a few comments.

[devcorpio]

Thanks for all the suggestions @bmorelli25. Changes applied! :elasticheart:

[bmorelli25]

Docs LGTM