Build broken against React 18

[tombruijn]

The CI build is broken again react@latest. We should see what's broken and fix it.

https://appsignal.semaphoreci.com/workflows/ea3369ec-cbd0-491f-a087-23ac1c6c4566?pipeline_id=3ec8f69d-5655-458e-bc10-ff11e168a8a5

Blocks #563

[tombruijn]

Not sure when this broke because there was no scheduled build set for the JavaScript repo. I've configured that now.

[tombruijn]

Looks like React version 18 is released and our package is locked at < 18

appsignal-javascript/packages/react/package.json

Line 29 in 5544713

"react": ">= 16.8.6 < 18.0.0"

warning " > @appsignal/[email protected]" has incorrect peer dependency "react@>= 16.8.6 < 18.0.0". 00:02

I don't think that's the issue directly, probably that we don't support React 18 yet.

[luismiramirez]

Tried to add it to the matrix after receiving the notification of the release of v18.1 here: 1fabeb3

I had to update the testing library to get rid of the first error described in this issue, and then it threw a new error:

https://appsignal.semaphoreci.com/jobs/95364096-c361-44ce-bbf2-c818301dbf7c

This requires further investigation cause how our ErrorBoundary works may need a change for v18

[maltesa]

While this is open, I'm using a "custom" ErrorBoundary as a replacement. I'm not passing in the appsignal client as a prop. Apart from that, the API should be the same.

Maybe _errorInfo: ErrorInfo contains useful information that could be added to the span?

import { config } from '@/lib/config'
import Appsignal from '@appsignal/javascript'
import { Component, ErrorInfo, ReactNode } from 'react'

export const appsignal = new Appsignal({
  key: config.appsignalFrontendKey,
  revision: config.revision,
})

interface Props {
  action?: string
  children: ReactNode
  fallback?: (error: Error) => JSX.Element
  tags?: { [key: string]: string }
}

interface State {
  error?: Error
}

export class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    error: undefined,
  }

  public static getDerivedStateFromError(error: Error): State {
    // Update state so the next render will show the fallback UI.
    return { error }
  }

  public componentDidCatch(error: Error, _errorInfo: ErrorInfo) {
    const { action, tags = {} } = this.props
    const span = appsignal.createSpan()

    span.setError(error).setTags({ framework: 'React', ...tags })

    if (action && action !== '') span.setAction(action)

    appsignal.send(span)
  }

  public render() {
    if (this.state.error) {
      return this.props.fallback ? this.props.fallback(this.state.error) : null
    }

    return this.props.children
  }
}

[tombruijn]

The broken build is very annoying. We can disable the react 18 build for now while it's broken. And then pick up this issue.

[luismiramirez]

Hi @maltesa!

Doesn't it work by default for you with React 18 unless you make that modification to componentDidCatch? It worked for us in our tests without changing anything.

With "that modification" I mean using the 2 arguments function.

[maltesa]

Just tried again with the ErrorBoundary from @appsignal/react and it works flawlessly as far as I can see. So no, “that modification” is not necessary.

[luismiramirez]

Thanks for answering @maltesa!

I created an issue to cover your suggestion: #568.

You can keep track of the request from there.