Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat: added error boundary#1602

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
Kira-Pilot merged 9 commits intomainfromadd-error-boundary/kira-pilot
May 20, 2022
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions.vscode/settings.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -52,6 +52,7 @@
"rpty",
"sdkproto",
"Signup",
"sourcemapped",
"stretchr",
"TCGETS",
"tcpip",
Expand Down
1 change: 1 addition & 0 deletionssite/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,6 +42,7 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "6.3.0",
"sourcemapped-stacktrace": "1.1.11",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

praise: Thanks for pinning this!

"swr": "1.2.2",
"uuid": "8.3.2",
"xstate": "4.32.1",
Expand Down
17 changes: 10 additions & 7 deletionssite/src/app.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,7 @@ import React from "react"
import { BrowserRouter as Router } from "react-router-dom"
import { SWRConfig } from "swr"
import { AppRouter } from "./AppRouter"
import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary"
import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
import { dark } from "./theme"
import "./theme/globalFonts"
Expand All@@ -30,13 +31,15 @@ export const App: React.FC = () => {
},
}}
>
<XServiceProvider>
<ThemeProvider theme={dark}>
<CssBaseline />
<AppRouter />
<GlobalSnackbar />
</ThemeProvider>
</XServiceProvider>
<ThemeProvider theme={dark}>
<CssBaseline />
<ErrorBoundary>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Praise: I love that theErrorBoundary doesn't have to care about theXServiceProvider, it's good to keep these non-reliant on each other!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Praise: I love that theErrorBoundary doesn't have to care about theXServiceProvider, it's good to keep these non-reliant on each other!

<XServiceProvider>
<AppRouter />
<GlobalSnackbar />
</XServiceProvider>
</ErrorBoundary>
</ThemeProvider>
</SWRConfig>
</Router>
)
Expand Down
30 changes: 23 additions & 7 deletionssite/src/components/CodeBlock/CodeBlock.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,26 +5,38 @@ import { combineClasses } from "../../util/combineClasses"

export interface CodeBlockProps {
lines: string[]
ctas?: React.ReactElement[]
className?: string
}

export const CodeBlock: React.FC<CodeBlockProps> = ({ lines, className = "" }) => {
export const CodeBlock: React.FC<CodeBlockProps> = ({ lines,ctas,className = "" }) => {
const styles = useStyles()

return (
<div className={combineClasses([styles.root, className])}>
{lines.map((line, idx) => (
<div className={styles.line} key={idx}>
{line}
<>
<div className={combineClasses([styles.root, className])}>
{lines.map((line, idx) => (
<div className={styles.line} key={idx}>
{line}
</div>
))}
</div>
{ctas && ctas.length && (
<div className={styles.ctaBar}>
{ctas.map((cta, i) => {
return <React.Fragment key={i}>{cta}</React.Fragment>
})}
</div>
))}
</div>
)}
</>
)
}

const useStyles = makeStyles((theme) => ({
root: {
minHeight: 156,
maxHeight: 240,
overflowY: "scroll",
background: theme.palette.background.default,
color: theme.palette.text.primary,
fontFamily: MONOSPACE_FONT_FAMILY,
Expand All@@ -36,4 +48,8 @@ const useStyles = makeStyles((theme) => ({
line: {
whiteSpace: "pre-wrap",
},
ctaBar: {
display: "flex",
justifyContent: "space-between",
},
}))
28 changes: 22 additions & 6 deletionssite/src/components/CopyButton/CopyButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
importButton from "@material-ui/core/Button"
importIconButton from "@material-ui/core/Button"
import { makeStyles } from "@material-ui/core/styles"
import Tooltip from "@material-ui/core/Tooltip"
import Check from "@material-ui/icons/Check"
import React, { useState } from "react"
import { combineClasses } from "../../util/combineClasses"
import { FileCopyIcon } from "../Icons/FileCopyIcon"

interface CopyButtonProps {
text: string
className?: string
ctaCopy?: string
wrapperClassName?: string
buttonClassName?: string
}

/**
* Copy button used inside the CodeBlock component internally
*/
export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text }) => {
export const CopyButton: React.FC<CopyButtonProps> = ({
text,
ctaCopy,
wrapperClassName = "",
buttonClassName = "",
}) => {
const styles = useStyles()
const [isCopied, setIsCopied] = useState<boolean>(false)

Expand All@@ -36,10 +44,15 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text })

return (
<Tooltip title="Copy to Clipboard" placement="top">
<div className={`${styles.copyButtonWrapper} ${className}`}>
<Button className={styles.copyButton} onClick={copyToClipboard} size="small">
<div className={combineClasses([styles.copyButtonWrapper, wrapperClassName])}>
<IconButton
className={combineClasses([styles.copyButton, buttonClassName])}
onClick={copyToClipboard}
size="small"
>
{isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopyIcon className={styles.fileCopyIcon} />}
</Button>
{ctaCopy && <div className={styles.buttonCopy}>{ctaCopy}</div>}
</IconButton>
</div>
</Tooltip>
)
Expand All@@ -65,4 +78,7 @@ const useStyles = makeStyles((theme) => ({
width: 20,
height: 20,
},
buttonCopy: {
marginLeft: theme.spacing(1),
},
}))
31 changes: 31 additions & 0 deletionssite/src/components/ErrorBoundary/ErrorBoundary.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
import React from "react"
import { RuntimeErrorState } from "../RuntimeErrorState/RuntimeErrorState"

type ErrorBoundaryProps = Record<string, unknown>

interface ErrorBoundaryState {
error: Error | null
}

/**
* Our app's Error Boundary
* Read more about React Error Boundaries: https://reactjs.org/docs/error-boundaries.html
*/
export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
constructor(props: ErrorBoundaryProps) {
super(props)
this.state = { error: null }
}

static getDerivedStateFromError(error: Error): { error: Error } {
return { error }
}

render(): React.ReactNode {
if (this.state.error) {
return <RuntimeErrorState error={this.state.error} />
}

return this.props.children
}
}
83 changes: 83 additions & 0 deletionssite/src/components/RuntimeErrorState/RuntimeErrorReport.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
import { makeStyles } from "@material-ui/core/styles"
import React from "react"
import { CodeBlock } from "../CodeBlock/CodeBlock"
import { createCtas } from "./createCtas"

const Language = {
reportLoading: "Generating crash report...",
}

interface ReportState {
error: Error
mappedStack: string[] | null
}

interface StackTraceAvailableMsg {
type: "stackTraceAvailable"
stackTrace: string[]
}

/**
* stackTraceUnavailable is a Msg describing a stack trace not being available
*/
export const stackTraceUnavailable = {
type: "stackTraceUnavailable",
} as const

type ReportMessage = StackTraceAvailableMsg | typeof stackTraceUnavailable

export const stackTraceAvailable = (stackTrace: string[]): StackTraceAvailableMsg => {
return {
type: "stackTraceAvailable",
stackTrace,
}
}

const setStackTrace = (model: ReportState, mappedStack: string[]): ReportState => {
return {
...model,
mappedStack,
}
}

export const reducer = (model: ReportState, msg: ReportMessage): ReportState => {
switch (msg.type) {
case "stackTraceAvailable":
return setStackTrace(model, msg.stackTrace)
case "stackTraceUnavailable":
return setStackTrace(model, ["Unable to get stack trace"])
}
}

export const createFormattedStackTrace = (error: Error, mappedStack: string[] | null): string[] => {
return [
"======================= STACK TRACE ========================",
"",
error.message,
...(mappedStack ? mappedStack : []),
"",
"============================================================",
]
}

/**
* A code block component that contains the error stack resulting from an error boundary trigger
*/
export const RuntimeErrorReport = ({ error, mappedStack }: ReportState): React.ReactElement => {
const styles = useStyles()

if (!mappedStack) {
return <CodeBlock lines={[Language.reportLoading]} className={styles.codeBlock} />
}

const formattedStackTrace = createFormattedStackTrace(error, mappedStack)
return <CodeBlock lines={formattedStackTrace} className={styles.codeBlock} ctas={createCtas(formattedStackTrace)} />
}

const useStyles = makeStyles(() => ({
codeBlock: {
minHeight: "auto",
userSelect: "all",
width: "100%",
},
}))
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
import { ComponentMeta, Story } from "@storybook/react"
import React from "react"
import { RuntimeErrorState, RuntimeErrorStateProps } from "./RuntimeErrorState"

const error = new Error("An error occurred")

export default {
title: "components/RuntimeErrorState",
component: RuntimeErrorState,
argTypes: {
error: {
defaultValue: error,
},
},
} as ComponentMeta<typeof RuntimeErrorState>

const Template: Story<RuntimeErrorStateProps> = (args) => <RuntimeErrorState {...args} />

export const Errored = Template.bind({})
Errored.parameters = {
// The RuntimeErrorState is noisy for chromatic, because it renders an actual error
// along with the stacktrace - and the stacktrace includes the full URL of
// scripts in the stack. This is problematic, because every deployment uses
// a different URL, causing the validation to fail.
chromatic: { disableSnapshot: true },
}

Errored.args = {
error,
}
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
import { screen } from "@testing-library/react"
import React from "react"
import { render } from "../../testHelpers/renderHelpers"
import { Language as ButtonLanguage } from "./createCtas"
import { Language as RuntimeErrorStateLanguage, RuntimeErrorState } from "./RuntimeErrorState"

describe("RuntimeErrorState", () => {
beforeEach(() => {
// Given
const errorText = "broken!"
const errorStateProps = {
error: new Error(errorText),
}

// When
render(<RuntimeErrorState {...errorStateProps} />)
})

it("should show stack when encountering runtime error", () => {
// Then
const reportError = screen.getByText("broken!")
expect(reportError).toBeDefined()

// Despite appearances, this is the stack trace
const stackTrace = screen.getByText("Unable to get stack trace")
expect(stackTrace).toBeDefined()
})

it("should have a button bar", () => {
// Then
const copyCta = screen.getByText(ButtonLanguage.copyReport)
expect(copyCta).toBeDefined()

const reloadCta = screen.getByText(ButtonLanguage.reloadApp)
expect(reloadCta).toBeDefined()
})

it("should have an email link", () => {
// Then
const emailLink = screen.getByText(RuntimeErrorStateLanguage.link)
expect(emailLink.closest("a")).toHaveAttribute("href", expect.stringContaining("mailto:support@coder.com"))
})
})
Loading
[8]ページ先頭
©2009-2025 Movatter.jp