feat(protocol-designer): introduce sentry

[koji]

Overview

introduce Sentry to PD for better error tracking.
the usage of Sentry is similar to Mixpanel.
Sentry init is called when a user allows pd to track data (getHasOptedIn: true)

sent an invitation of Sentry to each reviewers

Test Plan and Hands on Testing

Changelog

• add sentry.ts for configuration
• update ErrorBoundary to capture an error when PD shows the white-screen
• add one job to pd workflow for uploading pd source map to Sentry but they are commented out at this moment since it requires the account setup

Review requests

I add DEV_DNS as well as Mixpanel. Do we want to use Sentry for our dev environment (sandbox)

Risk assessment

low

[koji]

• update GitHub Actions

[codecov]

Codecov Report

Attention: Patch coverage is 15.21739% with 39 lines in your changes missing coverage. Please review.

Project coverage is 22.63%. Comparing base (a74a574) to head (1420384).
Report is 30 commits behind head on edge.

Files with missing lines	Patch %	Lines
protocol-designer/src/resources/sentry.ts	0.00%	37 Missing ⚠️
protocol-designer/src/index.tsx	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             edge   #18153      +/-   ##
==========================================
- Coverage   23.76%   22.63%   -1.14%     
==========================================
  Files        3038     3039       +1     
  Lines      253513   255892    +2379     
  Branches    23604    23798     +194     
==========================================
- Hits        60252    57922    -2330     
- Misses     193246   197961    +4715     
+ Partials       15        9       -6     

Flag	Coverage Δ
protocol-designer	19.00% <15.21%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...gner/src/resources/ProtocolDesignerAppFallback.tsx	94.33% <100.00%> (+9.72%)	⬆️
protocol-designer/src/index.tsx	0.00% <0.00%> (ø)
protocol-designer/src/resources/sentry.ts	0.00% <0.00%> (ø)

... and 1114 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[ddcc4]

Thanks Koji!

One more idea for part 2 of this: at my previous company, in our Python projects, we also added a hook that reported everything logged at level ERROR or higher to Sentry.

I wonder if the Sentry JavaScript API can do something similar. We have a lot of places in PD where we chose to console.error() instead of throwing an exception, but those are all cases where something went wrong and we should investigate if we're alerted about them.

[ddcc4]

I'm not so familiar with this part of the code. Can you tell me if error is a JavaScript exception here?

[koji]

yes, error is the captured JavaScript exception object provided by react-error-boundary

[koji]

• modify vite config to enable source map upload for only prod

[koji]

Thanks Koji!

One more idea for part 2 of this: at my previous company, in our Python projects, we also added a hook that reported everything logged at level ERROR or higher to Sentry.

I wonder if the Sentry JavaScript API can do something similar. We have a lot of places in PD where we chose to console.error() instead of throwing an exception, but those are all cases where something went wrong and we should investigate if we're alerted about them.

if what you mean is this, we can set error as a logging level.

[ddcc4]

Thanks for doing this!