@contember/react-devbar 1.3.0-alpha.14

package/src/ui/DevError/StackTrace.tsx

@@ -0,0 +1,49 @@
+import { useClassNameFactory } from '@contember/react-utils'
+import { ParsedStackFrame, ParsedStackTrace } from './types'
+
+export const StackTrace = ({ stackTrace }: { stackTrace: ParsedStackTrace }) => {
+	const componentClassName = useClassNameFactory('devError')
+
+	return (
+		<div className={componentClassName('stack')}>
+			{stackTrace.map((it, index) => (
+				<StackFrame stackFrame={it} key={index} />
+			))}
+		</div>
+	)
+}
+
+const StackFrame = ({ stackFrame }: { stackFrame: ParsedStackFrame }) => {
+	const componentClassName = useClassNameFactory('devError')
+	const line = stackFrame.line
+
+	return (
+		<div className={componentClassName('stackFrame')}>
+			<div className={componentClassName('stackFrameHeader')}>
+				<div className={componentClassName('stackFrameSource')}>
+					{stackFrame.filename}:{line}
+				</div>
+				{stackFrame.callee && <div className={componentClassName('stackFrameCallee')}>{stackFrame.callee}</div>}
+			</div>
+			{line !== undefined && stackFrame.sourceCodeLines && (
+				<div className={componentClassName('stackFrameCode')}>
+					{stackFrame.sourceCodeLines.map((it, index) => {
+						const lineNumber = index + 1
+						if (lineNumber + 5 < line || lineNumber - 3 > line) {
+							return null
+						}
+						return (
+							<div
+								className={componentClassName('stackFrameLine', lineNumber === line && 'is-active')}
+								key={lineNumber}
+							>
+								<div className={componentClassName('stackFrameLineNumber')}>{lineNumber}</div>
+								<div className={componentClassName('stackFrameLineCode')}>{it}</div>
+							</div>
+						)
+					})}
+				</div>
+			)}
+		</div>
+	)
+}

package/src/ui/DevError/index.css

@@ -0,0 +1,2 @@
+@import "./DevError.css";
+@import "./DevErrorBadge.css";

package/src/ui/DevError/index.ts

@@ -0,0 +1,4 @@
+export * from './DevError'
+export * from './DevErrorList'
+export * from './DevErrorBadge'
+export * from './types'

package/src/ui/DevError/types.ts

@@ -0,0 +1,17 @@
+export type ParsedStackTrace = ParsedStackFrame[]
+
+export interface ParsedStackFrame {
+	filename: string
+	thirdParty: boolean
+	line?: number
+	callee?: string
+	sourceCodeLines?: string[]
+}
+
+export type ErrorType = Error | unknown
+
+export interface ProcessedError {
+	error: ErrorType
+	parsedStackStrace?: ParsedStackTrace
+	cause?: ProcessedError
+}