fix Sentry issues (evergreen for now)

[becky-gilbert]

Summary

A number of Sentry logs have come in recently. We need to investigate the sources of the errors and fix them. We may also need to filter some of the Sentry emails for specific errors that we can't fix (e.g. in Pipe files).

Frequency of errors

Although we've received a lot of Sentry emails in the past few days, the Sentry logs show that we're not receiving an unusually large number of error reports. Apparently we've been hitting the error limits on our plan, so errors are coming in but being dropped. And then when the monthly quota restarts, we see the errors again until we hit the limit.

Past 30 days (Dec-Jan):

30 days prior (Nov-Dec):

Another potential cause of the increased Sentry emails is that the error text may have changed so that our filters are no longer working. For instance, we have a filter in place to prevent emails about errors that contain the message 'Cannot set property 'innerHTML' of null`, but we're getting errors with the message 'Cannot set properties of null (setting 'innerHTML')'.

Errors in Pipe files

Some of the Sentry errors are coming from Pipe files. We can check the Pipe change log here: https://changelog.addpipe.com/ though this is just a summary of changes and doesn't contain the actual code changes. We can cross-reference our Sentry errors with these changes, but can't be sure that the dates of the change logs match up exactly with the actual code updates.

It's also not clear to me whether any of the errors that pop up in Pipe.js might actually be coming from upstream problems in our code. So it's probably worth looking into these errors quickly, to see if the problem can be directly linked to something in our code.

The following errors are generated by Pipe.js.

Error	Line or last function in call stack
TypeError: Cannot set properties of null (setting 'innerText')	?
TypeError: null is not an object (evaluating 'document.getElementById(pipeElement).innerHTML = ""')	document.getElementById(pipeElement).innerHTML = ""
TypeError: Cannot set properties of null (setting 'innerHTML')	?
TypeError: Cannot read properties of null (reading 'style')	document.getElementById("pipeCounter-" + pipeElement).style.top = "5px";
TypeError: document.getElementById(...) is null	if (!blockingError) document.getElementById('totalStreamSize-' + pipeElement).innerHTML = statsForNerdsRecordingSize();
TypeError: document.getElementById(...) is null	document.getElementById("totalStreamSize-" + pipeElement).appendChild(downloadLink);
TypeError: document.getElementById(...) is null	document.getElementById('pipePlay-' + pipeElement).innerHTML = playIcon;

These errors all seem to be caused by selectors that are failing to find elements on the page. For instance, for the error 'Cannot read properties of null (reading 'style'), the error occurs because there's no element on the page with the ID "pipeCounter-"+pipeElement. It's possible that this is Pipe's fault. But it's also possible that we're doing something to cause it, e.g. removing elements that are added by Pipe.

Errors in EFP app

Error	Line or last function in call stack
TypeError: Permissions check failed	showFullscreen
TypeError: this.get("recorder").get("recorder").pause is not a function.	this.get("recorder").get("recorder").pause() (in Safari)
TypeError: Cannot read properties of undefined (reading 'match')	Not sure if this is relevant, but preceded by console message: "pipe-log ... disconnect reason ping timeout"
TypeError: Cannot read properties of undefined (reading 'kind')	?
TypeError: Cannot read properties of undefined (reading 'forEach')	preceded by console errors/warnings: "Generator function does not evaluate to single function, or error upon calling function. Falling back to standard protocol definition." and "TypeError: video_order is not iterable"
TypeError: this.get(...).map is not a function	preceded by console message: "Invalid: data.images should be array"

Having looked at these issues briefly, I see a few possible causes of these errors:

• Browser's user action requirement for entering fullscreen
• Errors in protocol generator functions that aren't being caught by our validator
• Safari-specific errors with media recorder code

But I haven't spent a lot of time looking into any of these, and would need to spend more time on each error to be sure. I'm not sure yet why we're seeing the media recorder 'pause is not a function' error. So far we've seen 2 reports of this, both on Mac/Safari.

Developer actions

• Add email filters to reduce the number of email alerts, specifically those coming from the Pipe code (see below). NOTE: I'm not able to add more filters - I keep getting 'an error occurred' when I use the edit form This has been fixed - we should be able to edit the email filters now.
• Test whether 'permissions check' error is related to automatically entering fullscreen
• Test whether various 'Cannot read properties of undefined' errors are related to protocol generator errors
• Test whether 'this.get("recorder").get("recorder").pause is not a function' error is caused by Safari
• Test whether any of the errors related to finding Pipe elements on the page are causing functional/usability problems for the Pipe version of EFP
• Consider upgrading our Sentry plan to avoid hitting error limits

Email alert filters

There are already some filters applied to our Sentry email alerts, to prevent emails when the error contains the following in the message:

Existing filters: Error message contains
fullscreen error
Parse error: Cannot resolve the frame
Cannot set property 'innerHTML' of null
The play() request was interrupted by a call to pause().

Unfortunately some of the Pipe-generated errors are too generic to filter out. But there are a few common Pipe errors that are specific enough that we can filter. At this point I also think we don't need emails about the 'permissions check' error. So I'm adding the following filters to our email alerts:

New filters: Error message contains
Permissions check failed
document.getElementById(pipeElement).innerHTML
document.getElementById("pipeCounter-" + pipeElement)
this.sequence is undefined