Files
compiler-explorer/static/sentry.ts
Matt Godbolt 65e4f302b7 URL serialization refactoring and Cypress test improvements (#8215)
## Summary
This PR makes URL serialization logic available to Node.js contexts
(like Cypress tests) and replaces a hard-coded 4812-character base64 URL
in tests with programmatically generated state. This builds on the
shared utilities refactoring from #8246.

### Changes

#### 1. Extract URL Serialization to Shared Module
**Problem:** URL serialization code depended on GoldenLayout's
browser-only ConfigMinifier, preventing Cypress spec files from
importing it (they load in Node.js before running in browser).

**Solution:** Created `shared/url-serialization.ts` with a
Node-compatible ConfigMinifier reimplementation.

**Technical Details:**
- Reimplemented GoldenLayout's ConfigMinifier without browser
dependencies
- Moved serialization functions (`serialiseState`, `deserialiseState`,
`risonify`, `unrisonify`) to shared module
- Moved minification functions (`minifyConfig`, `unminifyConfig`) to
shared module
- Updated `static/url.ts` to use shared module instead of GoldenLayout
- Added comprehensive test coverage in `test/url-serialization.ts`

**Files:**
- **New:** `shared/url-serialization.ts` (~279 lines)
- **Modified:** `static/url.ts` (removed ~30 lines, eliminated
GoldenLayout dependency)
- **New:** `test/url-serialization.ts` (~96 lines)

#### 2. Replace Hard-coded Cypress URL with Programmatic State
**Before:** A hard-coded 4812-character base64 URL containing state for
all panes
```typescript
cy.visit('http://localhost:10240/#z:OYLghAFBqd5TB8IAsQGMD2ATApgUWwEsAXTAJwBoiQIAzIgG...');
```

**After:** Programmatically generated state using
`buildKnownGoodState()` function
```typescript
const state = buildKnownGoodState();
const hash = serialiseState(state);
cy.visit(`http://localhost:10240/#${hash}`, {...});
```

**Benefits:**
- Human-readable, maintainable test state
- Programmatic generation from `PANE_DATA_MAP` keys
- Layout optimized with 8 panes per row
- Produces identical compressed URL format
- Much easier to add/modify panes in the future

#### 3. PANE_DATA_MAP Consistency Improvements
Updated `PANE_DATA_MAP` to use component names exactly as registered
with GoldenLayout:

**Key renames:**
- `preprocessor` → `pp`
- `llvmir` → `ir` 
- `pipeline` → `llvmOptPipelineView`
- `mir` → `rustmir`
- `hir` → `rusthir`
- `macro` → `rustmacroexp`
- `core` → `haskellCore`
- `stg` → `haskellStg`
- `cmm` → `haskellCmm`
- `dump` → `gccdump`
- `tree` → `gnatdebugtree`
- `debug` → `gnatdebug`

**Added panes:** `codeEditor`, `compiler`, `conformance`, `output` (were
missing from map)

**Re-enabled tests:**
- `yul` pane test (was commented out, now fixed)
- `clojuremacroexp` pane test (was commented out, now fixed)
- `cfg` pane test (had TODO, now removed)

**Why this matters:** The `buildKnownGoodState()` function uses
`Object.keys(PANE_DATA_MAP)` as the `componentName` property, so keys
must match the actual registered component names for GoldenLayout to
find them.

## Test Plan
- [x] All Cypress tests pass (confirmed by @mattgodbolt)
- [x] TypeScript compilation passes (`npm run ts-check`)
- [x] Linting passes (`npm run lint`)
- [x] URL serialization tests pass (3/3 tests)
- [x] Pre-commit hooks pass
- [x] Related vitest tests pass

## Dependencies
- Builds on #8246 (shared utilities refactoring - already merged)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-11-04 14:09:01 -06:00

172 lines
7.5 KiB
TypeScript

// Copyright (c) 2023, Compiler Explorer Authors
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright
// notice, this list of conditions and the following disclaimer in the
// documentation and/or other materials provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
import * as Sentry from '@sentry/browser';
import GoldenLayout from 'golden-layout';
import {parse} from '../shared/stacktrace.js';
import {serialiseState} from '../shared/url-serialization.js';
import {options} from './options.js';
import {SiteSettings} from './settings.js';
let layout: GoldenLayout;
let allowSendCode: boolean;
export function setSentryLayout(l: GoldenLayout) {
layout = l;
layout.eventHub.on('settingsChange', (newSettings: SiteSettings) => {
allowSendCode = newSettings.allowStoreCodeDebug;
});
Sentry.addEventProcessor(event => {
if (!allowSendCode) {
return event;
}
try {
const config = layout.toConfig();
if (event.extra === undefined) {
event.extra = {};
}
event.extra['full_url'] = window.location.origin + window.httpRoot + '#' + serialiseState(config);
} catch (e) {
console.log('Error adding full_url to Sentry event', e);
}
return event;
});
}
function isEventLike(value: unknown): value is Event {
return value instanceof Event || value?.constructor?.name === 'Event' || value?.constructor?.name === 'CustomEvent';
}
function formatEventRejection(evt: Event): string {
const targetName = evt.target?.constructor?.name ?? 'unknown';
let message = `Event rejection: type="${evt.type}", target="${targetName}"`;
if ('detail' in evt && evt.detail !== undefined) {
try {
message += `, detail=${JSON.stringify(evt.detail)}`;
} catch {
message += ', detail=[Unserializable]';
}
}
return message;
}
export function SetupSentry() {
if (options.statusTrackingEnabled && options.sentryDsn) {
Sentry.init({
dsn: options.sentryDsn,
release: options.release,
environment: options.sentryEnvironment,
ignoreErrors: [
// NOTE: Monaco Editor patterns may not work reliably due to code minification
// Source mapping happens AFTER beforeSend/ignoreErrors processing
/this.error\(new CancellationError\(\)/,
/new StandardMouseEvent\(monaco-editor/,
// CEFSharp bot errors - these come from automated scanners, particularly Microsoft Outlook's
// SafeLink feature that scans URLs in emails. The error format "Object Not Found Matching Id:X,
// MethodName:Y, ParamCount:Z" is specific to CEFSharp (.NET Chromium wrapper).
// Analysis of 76,000+ events shows 100% come from Windows + Chrome (CEFSharp's signature).
// This pattern was previously seen with Id:2 (PR #7103).
// See: https://github.com/DataDog/browser-sdk/issues/2715
/Object Not Found Matching Id:\d+/,
/Illegal value for lineNumber/,
'SlowRequest',
// Monaco Editor clipboard cancellation errors
'Canceled',
],
beforeSend(event, hint) {
// Filter Monaco Editor errors
//
// IMPORTANT: Frame-based filtering doesn't work reliably!
// In beforeSend hooks, frame.filename contains minified bundle paths like:
// "https://static.ce-cdn.net/vendor.v59.be68c0bf31258854d1b2.js"
//
// Source mapping happens AFTER beforeSend processing, which is why the
// final Sentry UI shows readable paths like:
// "./node_modules/monaco-editor/esm/vs/platform/clipboard/browser/clipboardService.js"
//
// For reliable filtering, use:
// 1. ignoreErrors patterns (processed before beforeSend)
// 2. Error message content (event.exception.values[0].value)
// 3. Error type (event.exception.values[0].type)
//
// DO NOT rely on frame.filename, frame.module, or frame.function for Monaco errors!
if (event.exception?.values?.[0]) {
// Filter hit testing errors
// See: https://github.com/microsoft/monaco-editor/issues/4527
// Uses error message content since frame data is minified
if (event.exception.values[0].value?.includes('_doHitTestWithCaretPositionFromPoint')) {
return null; // Don't send to Sentry
}
}
return event;
},
});
window.addEventListener('unhandledrejection', event => {
let reason = event.reason;
if (!(reason instanceof Error)) {
// Safari sometimes rejects promises with CustomEvent/Event objects.
// Extract useful properties instead of stringifying to empty object.
// See: https://github.com/compiler-explorer/compiler-explorer/issues/8172
// Related: https://github.com/getsentry/sentry-javascript/issues/2210
const errorMessage =
typeof reason === 'string'
? reason
: isEventLike(reason)
? formatEventRejection(reason)
: `Non-Error rejection: ${JSON.stringify(reason)}`;
reason = Object.assign(new Error(errorMessage), {originalReason: event.reason});
}
SentryCapture(reason, 'Unhandled Promise Rejection');
});
}
}
export function SentryCapture(value: unknown, context?: string) {
if (value instanceof Error) {
if (context) {
value.message += `\nSentryCapture Context: ${context}`;
}
Sentry.captureException(value);
} else {
const e = new Error();
const trace = parse(e);
Sentry.captureMessage(
'Non-Error capture:\n' +
(context ? `Context: ${context}\n` : '') +
`Data:\n${JSON.stringify(value)}\n` +
'Trace:\n' +
trace
.map(frame => `${frame.functionName} ${frame.fileName}:${frame.lineNumber}:${frame.columnNumber}`)
.join('\n'),
);
}
}