sourcemaps
This commit is contained in:
mats committed
1 parent
97743ea21c
commit
1aa264675e
11 files changed
+538
-17
No files matched your search
Generated
+137
@@ -8,6 +8,11 @@
|
||||
"name": "otel-ui",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@codemirror/lang-javascript": "^6.2.5",
|
||||
"@codemirror/language": "^6.12.4",
|
||||
"@codemirror/state": "^6.7.5",
|
||||
"@codemirror/view": "^6.43.12",
|
||||
"@lezer/highlight": "^1.2.3",
|
||||
"@radix-ui/react-accordion": "1.2.2",
|
||||
"@radix-ui/react-alert-dialog": "1.1.4",
|
||||
"@radix-ui/react-aspect-ratio": "1.1.1",
|
||||
@@ -355,6 +360,79 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/autocomplete": {
|
||||
"version": "6.20.3",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.3.tgz",
|
||||
"integrity": "sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.17.0",
|
||||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-javascript": {
|
||||
"version": "6.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
|
||||
"integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.6.0",
|
||||
"@codemirror/lint": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.17.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/javascript": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/language": {
|
||||
"version": "6.12.4",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.4.tgz",
|
||||
"integrity": "sha512-1q4PaT+o6PbgpkJt4Q8Fv5XJxTy4FUZ4MWETtyiDw3J0Pyr9E2vqcKL+k9wcvjNTIsauxvE7OfmWj3FRPHQ76A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.23.0",
|
||||
"@lezer/common": "^1.5.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0",
|
||||
"style-mod": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lint": {
|
||||
"version": "6.9.7",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.7.tgz",
|
||||
"integrity": "sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.42.0",
|
||||
"crelt": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/state": {
|
||||
"version": "6.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.7.5.tgz",
|
||||
"integrity": "sha512-QjLbZmY1Au3JiRrDVYFLRD0BZ3SOKS9pR3yjIkd7u27YY8TFD9/Q9fhPnLV5l1mHFSo3hHU/N31vpwEJOx4owQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@marijn/find-cluster-break": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/view": {
|
||||
"version": "6.43.12",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.43.12.tgz",
|
||||
"integrity": "sha512-Nv0vxQ19NAqvB/c2pFzjIzFlzzJl7jmdtNkwOwGbn0Ks9mFAzibvumz7cQem5cRsFA2cEw2fg+uHZGbcHupLQQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^6.7.0",
|
||||
"crelt": "^1.0.6",
|
||||
"style-mod": "^4.1.0",
|
||||
"w3c-keyname": "^2.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
|
||||
@@ -867,6 +945,47 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/common": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.2.tgz",
|
||||
"integrity": "sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@lezer/highlight": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
|
||||
"integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/javascript": {
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz",
|
||||
"integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.1.3",
|
||||
"@lezer/lr": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/lr": {
|
||||
"version": "1.4.10",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.10.tgz",
|
||||
"integrity": "sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@marijn/find-cluster-break": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.4.tgz",
|
||||
"integrity": "sha512-Wy0V7+SGUjnF9/TkiM1hKVDPj7jKXduPNboMVtHTA8dySMURWqfg/JZ9E2Sq8JgSJmkl7k7Qe9FLeMSrSraWmQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@radix-ui/number": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
|
||||
@@ -3611,6 +3730,12 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/crelt": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.7.tgz",
|
||||
"integrity": "sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
@@ -5425,6 +5550,12 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/style-mod": {
|
||||
"version": "4.1.4",
|
||||
"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.4.tgz",
|
||||
"integrity": "sha512-XXWIQt633/EpAFx8aZDOTjBzrCaGmhvEQlQo6MVPfa2OzO2cWo+4hV9h+6UkHYlXGfy+ODXKUdP7Pthmcu5ATw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/swr": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/swr/-/swr-2.5.1.tgz",
|
||||
@@ -5886,6 +6017,12 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-keyname": {
|
||||
"version": "2.2.8",
|
||||
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
|
||||
"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/wouter": {
|
||||
"version": "3.11.0",
|
||||
"resolved": "https://registry.npmjs.org/wouter/-/wouter-3.11.0.tgz",
|
||||
|
||||
@@ -10,6 +10,11 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/lang-javascript": "^6.2.5",
|
||||
"@codemirror/language": "^6.12.4",
|
||||
"@codemirror/state": "^6.7.5",
|
||||
"@codemirror/view": "^6.43.12",
|
||||
"@lezer/highlight": "^1.2.3",
|
||||
"@radix-ui/react-accordion": "1.2.2",
|
||||
"@radix-ui/react-alert-dialog": "1.1.4",
|
||||
"@radix-ui/react-aspect-ratio": "1.1.1",
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { Bug, ChevronDown, ChevronUp } from "lucide-react"
|
||||
import { triggerTestError } from "../lib/test-error"
|
||||
import { authFetch } from "../lib/auth"
|
||||
import { formatRelativeTime } from "../lib/timeUtils"
|
||||
import { SourceFrameViewer, type StackFrame } from "./SourceFrameViewer"
|
||||
import type { RumErrorEvent, RumSession } from "../lib/rum-utils"
|
||||
|
||||
interface JsErrorGroup {
|
||||
@@ -38,6 +40,7 @@ const groupJsErrors = (sessions: RumSession[]): JsErrorGroup[] => {
|
||||
/** Maps each group's sample stacktrace through the server's source maps; falls back to the raw stack. */
|
||||
const useResolvedStacks = (groups: JsErrorGroup[]) => {
|
||||
const [resolved, setResolved] = useState<Record<string, string>>({})
|
||||
const [frames, setFrames] = useState<Record<string, StackFrame[]>>({})
|
||||
const items = useMemo(
|
||||
() => groups.filter((g) => g.sample?.stacktrace).map((g) => ({ key: g.key, release: g.sample!.release ?? "", stacktrace: g.sample!.stacktrace! })),
|
||||
[groups],
|
||||
@@ -55,9 +58,10 @@ const useResolvedStacks = (groups: JsErrorGroup[]) => {
|
||||
body: JSON.stringify({ items: items.map(({ release, stacktrace }) => ({ release, stacktrace })) }),
|
||||
})
|
||||
if (!response.ok) return
|
||||
const body = (await response.json()) as { resolved: string[] }
|
||||
const body = (await response.json()) as { resolved: string[]; frames?: StackFrame[][] }
|
||||
if (cancelled) return
|
||||
setResolved(Object.fromEntries(items.map((item, i) => [item.key, body.resolved[i] ?? item.stacktrace])))
|
||||
setFrames(Object.fromEntries(items.map((item, i) => [item.key, body.frames?.[i] ?? []])))
|
||||
} catch {
|
||||
/* raw stacks still render */
|
||||
}
|
||||
@@ -66,15 +70,16 @@ const useResolvedStacks = (groups: JsErrorGroup[]) => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [signature])
|
||||
|
||||
return resolved
|
||||
return { resolved, frames }
|
||||
}
|
||||
|
||||
const JsErrorCard = ({ group, resolvedStack }: { group: JsErrorGroup; resolvedStack?: string }) => {
|
||||
const JsErrorCard = ({ group, resolvedStack, frames }: { group: JsErrorGroup; resolvedStack?: string; frames: StackFrame[] }) => {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
const [showRaw, setShowRaw] = useState(false)
|
||||
const raw = group.sample?.stacktrace
|
||||
const mapped = Boolean(raw && resolvedStack && resolvedStack !== raw)
|
||||
const stack = showRaw || !mapped ? raw : resolvedStack
|
||||
const explorable = frames.length > 0 && frames.some((f) => f.status === "mapped")
|
||||
|
||||
return (
|
||||
<article className="flex flex-col gap-3 rounded-[14px] border border-ds-line border-l-[3px] border-l-ds-critical bg-ds-surface">
|
||||
@@ -106,13 +111,19 @@ const JsErrorCard = ({ group, resolvedStack }: { group: JsErrorGroup; resolvedSt
|
||||
<button type="button" onClick={() => setShowRaw((v) => !v)} className="text-[11.5px] text-ds-text-3 hover:text-ds-text-2">{showRaw ? "Show mapped" : "Show raw"}</button>
|
||||
)}
|
||||
</div>
|
||||
{stack ? (
|
||||
{explorable && !showRaw ? (
|
||||
<SourceFrameViewer frames={frames} />
|
||||
) : stack ? (
|
||||
<pre className="max-h-72 overflow-auto whitespace-pre-wrap break-all rounded-[10px] border border-ds-line bg-ds-bg p-3 font-[family-name:var(--font-data)] text-[11px] leading-relaxed text-ds-text-2">{stack}</pre>
|
||||
) : (
|
||||
<p className="text-[12px] text-ds-text-3">No stacktrace was reported for this error.</p>
|
||||
)}
|
||||
{!mapped && raw && !group.sample?.release && (
|
||||
<p className="text-[11.5px] text-ds-text-3">No release on this event, so source maps can't be applied.</p>
|
||||
{!explorable && raw && (
|
||||
<p className="text-[11.5px] text-ds-text-3">
|
||||
{!group.sample?.release
|
||||
? "No release on this event, so source maps can't be applied."
|
||||
: "No source map matched this stack. Upload one for this release via POST /api/sourcemaps to see original source."}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -120,17 +131,29 @@ const JsErrorCard = ({ group, resolvedStack }: { group: JsErrorGroup; resolvedSt
|
||||
)
|
||||
}
|
||||
|
||||
const TestErrorButton = () => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={triggerTestError}
|
||||
title="Throws an uncaught error from this UI to verify RUM reporting and source maps end to end"
|
||||
className="inline-flex h-8 items-center gap-1.5 self-end rounded-[9px] border border-ds-line-strong px-2.5 text-[12px] font-medium text-ds-text-2 hover:text-ds-text"
|
||||
>
|
||||
<Bug className="h-3.5 w-3.5" aria-hidden="true" /> Generate test error
|
||||
</button>
|
||||
)
|
||||
|
||||
export const RumJsErrors = ({ sessions }: { sessions: RumSession[] }) => {
|
||||
const groups = useMemo(() => groupJsErrors(sessions), [sessions])
|
||||
const resolved = useResolvedStacks(groups)
|
||||
const { resolved, frames } = useResolvedStacks(groups)
|
||||
|
||||
if (groups.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-2 rounded-[14px] border border-dashed border-ds-line py-16 text-center">
|
||||
<Bug className="h-8 w-8 text-ds-ok/60" aria-hidden="true" />
|
||||
<p className="text-[14px] font-medium text-ds-text">No JavaScript errors</p>
|
||||
<TestErrorButton />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <div className="flex flex-col gap-3">{groups.map((g) => <JsErrorCard key={g.key} group={g} resolvedStack={resolved[g.key]} />)}</div>
|
||||
return <div className="flex flex-col gap-3"><TestErrorButton />{groups.map((g) => <JsErrorCard key={g.key} group={g} resolvedStack={resolved[g.key]} frames={frames[g.key] ?? []} />)}</div>
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react"
|
||||
import { EditorState, RangeSetBuilder } from "@codemirror/state"
|
||||
import { Decoration, EditorView, lineNumbers, type DecorationSet } from "@codemirror/view"
|
||||
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"
|
||||
import { javascript } from "@codemirror/lang-javascript"
|
||||
import { tags as t } from "@lezer/highlight"
|
||||
import { Info } from "lucide-react"
|
||||
|
||||
export interface StackFrame {
|
||||
raw: string
|
||||
function?: string
|
||||
file: string
|
||||
line: number
|
||||
column: number
|
||||
status: "mapped" | "no-release" | "no-map" | "unmapped"
|
||||
source?: string
|
||||
name?: string
|
||||
srcLine?: number
|
||||
srcColumn?: number
|
||||
context?: string[]
|
||||
contextTop?: number
|
||||
}
|
||||
|
||||
const statusHint: Record<StackFrame["status"], string> = {
|
||||
mapped: "Mapped to original source",
|
||||
"no-release": "This event has no release, so source maps can't be looked up.",
|
||||
"no-map": "No source map uploaded for this file and release. POST it to /api/sourcemaps to see original source.",
|
||||
unmapped: "A source map exists but has no mapping for this position.",
|
||||
}
|
||||
|
||||
const statusDot: Record<StackFrame["status"], string> = {
|
||||
mapped: "bg-ds-ok",
|
||||
"no-release": "bg-ds-text-3",
|
||||
"no-map": "bg-ds-warn",
|
||||
unmapped: "bg-ds-warn",
|
||||
}
|
||||
|
||||
const highlight = HighlightStyle.define([
|
||||
{ tag: [t.keyword, t.modifier, t.operatorKeyword], color: "var(--ds-accent)" },
|
||||
{ tag: [t.string, t.regexp], color: "var(--ds-ok)" },
|
||||
{ tag: [t.number, t.bool, t.null], color: "var(--ds-warn)" },
|
||||
{ tag: [t.comment], color: "var(--ds-text-3)", fontStyle: "italic" },
|
||||
{ tag: [t.function(t.variableName), t.definition(t.variableName)], color: "var(--ds-text)" },
|
||||
{ tag: [t.typeName, t.className], color: "var(--ds-accent)" },
|
||||
])
|
||||
|
||||
const theme = EditorView.theme({
|
||||
"&": { backgroundColor: "var(--ds-bg)", color: "var(--ds-text-2)", fontSize: "12px" },
|
||||
".cm-content": { fontFamily: "var(--font-data, ui-monospace, monospace)", padding: "6px 0" },
|
||||
".cm-gutters": { backgroundColor: "var(--ds-bg)", color: "var(--ds-text-3)", border: "none" },
|
||||
".cm-scroller": { overflow: "auto" },
|
||||
".cm-error-line": { backgroundColor: "var(--ds-critical-bg)", boxShadow: "inset 3px 0 0 var(--ds-critical)" },
|
||||
".cm-error-col": { backgroundColor: "color-mix(in srgb, var(--ds-critical) 35%, transparent)", borderBottom: "2px solid var(--ds-critical)", borderRadius: "2px" },
|
||||
})
|
||||
|
||||
/** Highlights the throwing line and the exact column the source map points at. */
|
||||
const errorDecorations = (state: EditorState, line: number, col: number, len: number): DecorationSet => {
|
||||
const b = new RangeSetBuilder<Decoration>()
|
||||
if (line < 1 || line > state.doc.lines) return b.finish()
|
||||
const l = state.doc.line(line)
|
||||
b.add(l.from, l.from, Decoration.line({ class: "cm-error-line" }))
|
||||
const from = Math.min(l.from + Math.max(col, 0), l.to)
|
||||
const to = Math.min(from + Math.max(len, 1), l.to)
|
||||
if (to > from) b.add(from, to, Decoration.mark({ class: "cm-error-col" }))
|
||||
return b.finish()
|
||||
}
|
||||
|
||||
const Editor = ({ frame }: { frame: StackFrame }) => {
|
||||
const host = useRef<HTMLDivElement>(null)
|
||||
useEffect(() => {
|
||||
if (!host.current || !frame.context || !frame.srcLine) return
|
||||
const top = frame.contextTop ?? 1
|
||||
const relLine = frame.srcLine - top + 1
|
||||
const state = EditorState.create({
|
||||
doc: frame.context.join("\n"),
|
||||
extensions: [
|
||||
EditorState.readOnly.of(true),
|
||||
EditorView.editable.of(false),
|
||||
lineNumbers({ formatNumber: (n) => String(n + top - 1) }),
|
||||
javascript({ jsx: true, typescript: /\.tsx?$/.test(frame.source ?? "") }),
|
||||
syntaxHighlighting(highlight),
|
||||
theme,
|
||||
EditorView.decorations.compute([], (s) =>
|
||||
errorDecorations(s, relLine, (frame.srcColumn ?? 1) - 1, frame.name?.length || 1),
|
||||
),
|
||||
],
|
||||
})
|
||||
const view = new EditorView({ state, parent: host.current })
|
||||
return () => view.destroy()
|
||||
}, [frame])
|
||||
return <div ref={host} className="overflow-hidden rounded-[10px] border border-ds-line" />
|
||||
}
|
||||
|
||||
export const SourceFrameViewer = ({ frames }: { frames: StackFrame[] }) => {
|
||||
const firstMapped = useMemo(() => Math.max(frames.findIndex((f) => f.status === "mapped" && f.context), 0), [frames])
|
||||
const [picked, setPicked] = useState<number | null>(null)
|
||||
const index = picked ?? firstMapped
|
||||
const frame = frames[index]
|
||||
if (!frame) return null
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 lg:flex-row">
|
||||
<ol className="flex max-h-80 min-w-0 flex-col gap-1 overflow-auto lg:w-[42%] lg:shrink-0">
|
||||
{frames.map((f, i) => (
|
||||
<li key={i}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPicked(i)}
|
||||
aria-current={i === index ? "true" : undefined}
|
||||
className={`flex w-full items-start gap-2 rounded-[9px] border px-2.5 py-1.5 text-left hover:border-ds-accent/40 ${i === index ? "border-ds-accent/50 bg-ds-surface-2" : "border-ds-line bg-ds-surface"}`}
|
||||
>
|
||||
<span className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${statusDot[f.status]}`} aria-hidden="true" />
|
||||
<span className="flex min-w-0 flex-col">
|
||||
<span className="truncate font-[family-name:var(--font-data)] text-[12px] font-semibold text-ds-text">{f.name || f.function || "<anonymous>"}</span>
|
||||
<span className="break-all font-[family-name:var(--font-data)] text-[11px] text-ds-text-3">
|
||||
{f.status === "mapped" ? `${f.source}:${f.srcLine}:${f.srcColumn}` : `${f.file.replace(/^https?:\/\/[^/]+/, "")}:${f.line}:${f.column}`}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-2">
|
||||
{frame.status === "mapped" && frame.context ? (
|
||||
<>
|
||||
<p className="break-all font-[family-name:var(--font-data)] text-[11.5px] text-ds-text-2">{frame.source}</p>
|
||||
<Editor frame={frame} />
|
||||
</>
|
||||
) : null}
|
||||
<p className="flex items-start gap-1.5 text-[11.5px] text-ds-text-3">
|
||||
<Info className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" />
|
||||
<span>
|
||||
{frame.status === "mapped" && !frame.context
|
||||
? "Mapped, but the source map has no embedded sourcesContent. Rebuild with sourcesContent enabled to see the code here."
|
||||
: statusHint[frame.status]}
|
||||
{frame.status === "mapped" && (
|
||||
<span className="font-[family-name:var(--font-data)]"> · generated {frame.file.replace(/^https?:\/\/[^/]+/, "")}:{frame.line}:{frame.column}</span>
|
||||
)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* Deliberately throws an uncaught error from application code so the RUM
|
||||
* script reports it, letting a deploy verify the source-map pipeline end to
|
||||
* end: the resolved stack should point at this file, not the bundle.
|
||||
*/
|
||||
export function triggerTestError(): void {
|
||||
// Thrown from a timer so it surfaces as an uncaught window error, exactly
|
||||
// like a real bug, instead of being swallowed by a React event handler.
|
||||
setTimeout(() => throwTestError(new Date().toISOString()), 0)
|
||||
}
|
||||
|
||||
function throwTestError(at: string): never {
|
||||
throw new Error(`Test error from otel-ui (source-map check) ${at}`)
|
||||
}
|
||||
Reference in new issue
Block a user