test/dify
1
0
Fork 0
mirror of https://gitee.com/dify_ai/dify.git synced 2024-12-02 19:27:48 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix: crash when ECharts accesses undefined objects (#7853)

Browse Source
This commit is contained in:
zhujinle 2024-09-01 14:52:27 +08:00 committed by GitHub
parent 1f56a20b62
commit ef82a29e23
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/app/components/base/markdown.tsx
View File

@ -8,7 +8,7 @@ import RemarkGfm from 'remark-gfm'
import SyntaxHighlighter from 'react-syntax-highlighter' import SyntaxHighlighter from 'react-syntax-highlighter'
import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs' import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'
import type { RefObject } from 'react' import type { RefObject } from 'react'
import { memo, useEffect, useMemo, useRef, useState } from 'react' import { Component, memo, useEffect, useMemo, useRef, useState } from 'react'
import type { CodeComponent } from 'react-markdown/lib/ast-to-react' import type { CodeComponent } from 'react-markdown/lib/ast-to-react'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import CopyBtn from '@/app/components/base/copy-btn' import CopyBtn from '@/app/components/base/copy-btn'
@ -104,7 +104,7 @@ const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }
const match = /language-(\w+)/.exec(className || '') const match = /language-(\w+)/.exec(className || '')
const language = match?.[1] const language = match?.[1]
const languageShowName = getCorrectCapitalizationLanguageName(language || '') const languageShowName = getCorrectCapitalizationLanguageName(language || '')
let chartData = JSON.parse(String('{"title":{"text":"Something went wrong."}}').replace(/\n$/, '')) let chartData = JSON.parse(String('{"title":{"text":"ECharts error - Wrong JSON format."}}').replace(/\n$/, ''))
if (language === 'echarts') { if (language === 'echarts') {
try { try {
chartData = JSON.parse(String(children).replace(/\n$/, '')) chartData = JSON.parse(String(children).replace(/\n$/, ''))
@ -143,10 +143,10 @@ const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }
? (<Flowchart PrimitiveCode={String(children).replace(/\n$/, '')} />) ? (<Flowchart PrimitiveCode={String(children).replace(/\n$/, '')} />)
: ( : (
(language === 'echarts') (language === 'echarts')
? (<div style={{ minHeight: '250px', minWidth: '250px' }}><ReactEcharts ? (<div style={{ minHeight: '250px', minWidth: '250px' }}><ErrorBoundary><ReactEcharts
option={chartData} option={chartData}
> >
</ReactEcharts></div>) </ReactEcharts></ErrorBoundary></div>)
: (<SyntaxHighlighter : (<SyntaxHighlighter
{...props} {...props}
style={atelierHeathLight} style={atelierHeathLight}
@ -211,3 +211,25 @@ export function Markdown(props: { content: string; className?: string }) {
</div> </div>
) )
} }
// **Add an ECharts runtime error handler
// Avoid error #7832 (Crash when ECharts accesses undefined objects)
// This can happen when a component attempts to access an undefined object that references an unregistered map, causing the program to crash.
export default class ErrorBoundary extends Component {
constructor(props) {
super(props)
this.state = { hasError: false }
}
componentDidCatch(error, errorInfo) {
this.setState({ hasError: true })
console.error(error, errorInfo)
}
render() {
if (this.state.hasError)
return <div>Oops! ECharts reported a runtime error. <br />(see the browser console for more information)</div>
return this.props.children
}
}