[Android] gl::Context::makeCurrent Segfault error

[dawidzawada]

Description

Hello, two of our clients are encountering an issue, sometimes application just crash. This seems to be happening only on low end devices with Android 10 only. In our case:

Oppo A15S, Android 10
Blackview BV9900 Pro, Android 10

React Native Skia Version

1.12.4

React Native Version

0.76.7

Using New Architecture

• Enabled

Steps to Reproduce

We're using Skia for many things but most-likely users are having a crash when app renders charts with victory-native (version ^41.16.1) on initial route. I can see by the logs that, most likely app crashes right after opening. Let me know if I can provide somehow more informations that might help resolving this issue.

Snack, Code Example, Screenshot, or Link to Repository

[wcandillon]

yes please provide me with more information if possible. Is it possible/easy to reproduce? if it always/often happens on these specified devices, I could use BrowserStack to debug the issue.

[dawidzawada]

It is happening only on these 2 devices, by the logs I can see that this occurs on our dashboard tab route, we render there a bar charts with energy usage values, energy prices etc. for each hour at current day. After 2:00 PM we render also values for next day - client says that app crashes only after in the afternoon (and I confirm that by Sentry events too) - so that's probably somehow connected. There's no much difference between chart for only current day and current day & tomorrow, there's only more values to display(48 bars instead or 24).

Here's the raw stack trace, it is always the same, only differences between each trace are memory addresses.

OS Version: Android 10 (CPH2179_11_A.68)
Report Version: 104

Exception Type: Unknown (SIGSEGV)

Application Specific Information:
Segfault

Thread 0 Crashed:
0   split_config.arm64_v8a.apk      0x71885fab98        gl::Context::makeCurrent
1   split_config.arm64_v8a.apk      0x71886c5828        RNSkia::OpenGLWindowContext::getSurface
2   split_config.arm64_v8a.apk      0x71885fd8d4        RNSkia::RNSkOpenGLCanvasProvider::renderToCanvas
3   split_config.arm64_v8a.apk      0x71885f4e68        RNSkia::RNSkPictureRenderer::renderImmediate
4   split_config.arm64_v8a.apk      0x71885f3be0        RNSkia::RNSkAndroidView<T>::surfaceAvailable
5   split_config.arm64_v8a.apk      0x71885f5b28        facebook::jni::detail::MethodWrapper<T>::dispatch
6   split_config.arm64_v8a.apk      0x71885f5a40        facebook::jni::detail::FunctionWrapper<T>::call
7   base.odex                       0x7292be0d30        <unknown> + 492088200496





EOF

Also here's how we render our BarChart component:

    <>
      <YAxis
        chartHeight={
          chartRef.current?.chartHeight ?? chartHeight + TOP_PADDING_DOMAIN
        }
        gridlinesData={gridlinesData}
        unit={unit}
        font={font}
      />

      <ScrollView
        ref={scrollViewRef}
        horizontal
        style={{ width: Dimensions.get('window').width }}
        contentContainerStyle={{
          height: chartHeight,
          width: newChartWidth,
        }}
        showsHorizontalScrollIndicator={false}
        onLayout={() => handleScroll(tooltipIndex ?? highlightIndex)}
        bounces={false}
        scrollEventThrottle={16}
      >
        <Pressable onPress={handleTouchStart} style={styles.pressContainer}>
          <BarToolTip
            sharedX={tooltipConfig.sharedX}
            sharedY={tooltipConfig.sharedY}
            tooltipText={tooltipConfig.description}
            activeItem={tooltipConfig.activeItem}
            negative={
              tooltipConfig.indexValue <= 0 ? chartRef.current?.yScale(0) : null
            }
            defaultTooltip={defaultTooltip}
            offset={labelOffset}
          />

          <CartesianChart
            data={data}
            xKey='time'
            yKeys={['value', 'xPos', 'referenceValue']}
            padding={5}
            domainPadding={{
              left: CHART_PADDING_HORIZONTAL * (renderYAxis ? 2 : 4),
              right: labelWidth,
              bottom: 0,
              top: renderYAxis ? 0 : TOP_PADDING_DOMAIN,
            }}
            domain={{
              y: [
                gridlines[0],
                gridlines[gridlines.length - 1] * Y_SCALE_FACTOR,
              ],
            }}
            xAxis={{
              font,
              tickCount: data.length - 1,
              lineWidth: 0,
              labelPosition: 'outset',
              labelColor: chartXAxisColor,
              labelOffset: 6,
              formatXLabel: (label) => (label ? label : ''),
            }}
            yAxis={[
              {
                yKeys: ['value', 'referenceValue', 'xPos'],
                font,
                tickValues: gridlines,
                tickCount: gridlines.length,
                axisSide: 'right',
                labelPosition: 'outset',
                labelColor: chartYAxisColor,
              },
            ]}
            chartPressState={state}
            onChartBoundsChange={chartPropsHandle}
            actionsRef={chartActionsRef}
            customGestures={composed}
            chartPressConfig={{
              pan: { activateAfterLongPress: ACTIVATE_AFTER_LONG_PRESS },
            }}
          >
            {({ points, chartBounds, yScale, xScale }) => {
              chartRef.current = {
                chartHeight: chartBounds.bottom - chartBounds.top,
                yScale,
                xScale,
              }

              return points.value.map((point, index) => {
                const referenceValue = roundToDecimalPlaces(
                  points.referenceValue[index]?.yValue ?? 0,
                  2
                )
                const value = roundToDecimalPlaces(
                  points.value[index]?.yValue ?? 0,
                  2
                )

                const showDottedBar =
                  isBalance && referenceValue !== 0 && referenceValue !== value

                return (
                  <React.Fragment key={index}>
                    {((activeItemTooltip?.index !== null &&
                      activeItemTooltip?.index === index) ||
                      index === highlightIndex) && (
                      <>
                        {/* highlight bar */}
                        {showHighlight && index === highlightIndex && (
                          <>
                            <Rect
                              x={point.x - getPxSize(17)}
                              y={yScale(gridlines[gridlines.length - 1])}
                              height={chartBounds.bottom - chartBounds.top}
                              width={getPxSize(34)}
                              key={'h' + index.toString()}
                              color={
                                isHighlightGreen ? barCheapHighlight : barColor
                              }
                            />
                          </>
                        )}
                      </>
                    )}
                    {showDottedBar && (
                      <DottedBar
                        barWidth={17}
                        barHeight={
                          yScale(0) - Number(points.referenceValue[index].y)
                        }
                        xPoint={point.x - 8.5}
                        yPoint={Number(points.referenceValue[index].y)}
                        color={dottedBarColor}
                      />
                    )}

                    {/* default bar */}
                    <Bar
                      chartBounds={chartBounds} // 👈 chartBounds is needed to know how to draw the bars
                      points={[point]} // 👈 points is an object with a property for each yKey
                      roundedCorners={{
                        topLeft: cornerRadius,
                        topRight: cornerRadius,
                      }}
                      barWidth={16}
                      color={getBarColor(index)}
                    />
                  </React.Fragment>
                )
              })
            }}
          </CartesianChart>
        </Pressable>
      </ScrollView>
    </>