ref(dashboards): Replace internal sqlish module with @sentry/sqlish (#112147)

Replaces the internal `sqlish` module with the `@sentry/sqlish` npm
package which we published recently. No fuss, no muss, it's all the same
code. Added a little wrapper around it, since that's good practice and a
good place to keep having telemetry. Took this moment to add a sprinkle
of tests to make sure things are working.

I waffled on whether to add a CJS export to `sqlish` but decided that
it's not worth it. You tell me though, it's easy to add.

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: gggritso

jest.config.ts

@@ -273,7 +273,14 @@ if (
  * node_modules, but some packages which use ES6 syntax only NEED to be
  * transformed.
  */
-const ESM_NODE_MODULES = ['screenfull', 'cbor2', 'nuqs', 'color', 'marked'];
+const ESM_NODE_MODULES = [
+  'screenfull',
+  'cbor2',
+  'nuqs',
+  'color',
+  'marked',
+  '@sentry\\+sqlish',
+];
 
 const config: Config.InitialOptions = {
   verbose: false,
@@ -301,6 +308,11 @@ const config: Config.InitialOptions = {
     '^echarts/(.*)': '<rootDir>/tests/js/sentry-test/mocks/echartsMock.js',
     '^zrender/(.*)': '<rootDir>/tests/js/sentry-test/mocks/echartsMock.js',
 
+    // @sentry/sqlish is ESM-only with `exports` that only define `import`
+    // conditions. Jest's CJS resolver can't follow them without explicit mapping.
+    '^@sentry/sqlish/react$': '<rootDir>/node_modules/@sentry/sqlish/dist/react.js',
+    '^@sentry/sqlish$': '<rootDir>/node_modules/@sentry/sqlish/dist/index.js',
+
     // Disabled @sentry/toolbar in tests. It depends on iframes and global
     // window/cookies state.
     '@sentry/toolbar': '<rootDir>/tests/js/sentry-test/mocks/sentryToolbarMock.js',

package.json

@@ -116,6 +116,7 @@
     "@sentry/node": "10.41.0-beta.0",
     "@sentry/react": "10.41.0-beta.0",
     "@sentry/release-parser": "^1.3.1",
+    "@sentry/sqlish": "1.0.1",
     "@sentry/status-page-list": "^0.6.1",
     "@sentry/toolbar": "1.0.0-beta.16",
     "@sentry/webpack-plugin": "4.6.1",

pnpm-lock.yaml

@@ -39,7 +39,7 @@ import type {Organization} from 'sentry/types/organization';
 import {formatBytesBase2} from 'sentry/utils/bytes/formatBytesBase2';
 import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
 import {toRoundedPercent} from 'sentry/utils/number/toRoundedPercent';
-import {SQLishFormatter} from 'sentry/utils/sqlish/SQLishFormatter';
+import {SQLishFormatter} from 'sentry/utils/sqlish';
 import {safeURL} from 'sentry/utils/url/safeURL';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';

static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.tsx

@@ -0,0 +1,69 @@
+/**
+ * Thin wrapper around @sentry/sqlish that adds Sentry observability
+ * (performance spans and error capture with fingerprinting on parse failures)
+ * and re-adds `toSimpleMarkup()` which the npm package doesn't include as a
+ * class method — it ships `simpleMarkup` as a standalone function from
+ * `@sentry/sqlish/react` instead.
+ */
+import * as Sentry from '@sentry/react';
+import {SQLishFormatter as BaseSQLishFormatter, SQLishParser} from '@sentry/sqlish';
+import {simpleMarkup} from '@sentry/sqlish/react';
+
+type StringFormatterOptions = Parameters<BaseSQLishFormatter['toString']>[1];
+
+export class SQLishFormatter {
+  private formatter: BaseSQLishFormatter;
+  private parser: SQLishParser;
+
+  constructor() {
+    this.formatter = new BaseSQLishFormatter();
+    this.parser = new SQLishParser();
+  }
+
+  toString(sql: string, options?: StringFormatterOptions): string {
+    return this._withSentry('string', () => this.formatter.toString(sql, options), sql);
+  }
+
+  toSimpleMarkup(sql: string): React.ReactElement[] {
+    return this._withSentry(
+      'simpleMarkup',
+      () => simpleMarkup(this.parser.parse(sql)),
+      sql
+    );
+  }
+
+  private _withSentry<T>(format: string, fn: () => T, sql: string): T {
+    const sentrySpan = Sentry.startInactiveSpan({
+      op: 'function',
+      name: 'SQLishFormatter.toFormat',
+      attributes: {format},
+      onlyIfParent: true,
+    });
+
+    try {
+      const result = fn();
+      return result;
+    } catch (error: any) {
+      Sentry.withScope(scope => {
+        const fingerprint = ['sqlish-parse-error'];
+
+        if (error?.message) {
+          scope.setExtra('message', error.message?.slice(-100));
+          scope.setExtra('found', error.found);
+
+          if (error.message.includes('Expected')) {
+            fingerprint.push(error.message.slice(-10));
+          }
+        }
+
+        scope.setFingerprint(fingerprint);
+        Sentry.captureException(error);
+      });
+
+      // If we fail to parse the SQL, return the original string
+      return sql as unknown as T;
+    } finally {
+      sentrySpan?.end();
+    }
+  }
+}