渲染看门狗定时器

如前几节所述，捕获渲染时间报告是一个分为两个部分的过程

通过 useStartProfiler、useResetFlow 钩子或 onAppStarted 原生调用启动计时器，以及
通过 PerformanceMeasureView 组件结束计时器。

此外，还需要通过 interactive 和 renderPassName 属性来传递不同渲染过程之间的转换。

开发人员可能会使用 useStartProfiler 钩子，但忘记用 PerformanceMeasureView 包裹目标屏幕。开发人员也可能在编写逻辑来评估 interactive 属性的值时犯错，导致其永远不会转换为 true。这两种开发人员的错误都可能导致交互式 RenderPassReports 无法生成，因为库将永远无法确定屏幕是否变为可交互状态。

库可以通过使用渲染看门狗定时器来帮助您捕获这些类型的错误。这是一个默认启用的功能，建议至少在应用程序的开发版本中使用。默认的渲染超时时间为 5000ms，但可以为特定流程或整个应用程序覆盖此值。

tsx
const App = () => {
  const onReportPrepared = useCallback((report: RenderPassReport) => {
    monorail.produce(convertReportToMonorailObject(report));
  }, []);
  return (
    // renderTimeoutMillis defaults to 5000ms
    <PerformanceProfiler renderTimeoutMillis={7000} useRenderTimeouts onReportPrepared={onReportPrepared}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
        </Stack.Navigator>
      </NavigationContainer>
    </PerformanceProfiler>
  );
};

tsx
const App = () => {
  const onReportPrepared = useCallback((report: RenderPassReport) => {
    monorail.produce(convertReportToMonorailObject(report));
  }, []);
  return (
    // renderTimeoutMillis defaults to 5000ms
    <PerformanceProfiler renderTimeoutMillis={7000} useRenderTimeouts onReportPrepared={onReportPrepared}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
        </Stack.Navigator>
      </NavigationContainer>
    </PerformanceProfiler>
  );
};

启用后，如果屏幕的渲染计时器已实例化，但该屏幕未在指定时间内达到可交互状态，库将抛出 RenderTimeoutError。

renderTimeoutMillisOverride

useStartProfiler 可以选择性地接收一个 renderTimeoutMillisOverride: number 属性。当为特定流程提供此属性时，将使用此超时值，而不是通过 renderTimeoutMillis 属性提供给 <PerformanceProfiler> 组件的默认超时值。

tsx
onPress={uiEvent => {
  navigate(
    {
      source: NavigationKeys.EXAMPLES,
      uiEvent,
      renderTimeoutMillisOverride: 3000,
    },
    item.destination,
  );
}}

tsx
onPress={uiEvent => {
  navigate(
    {
      source: NavigationKeys.EXAMPLES,
      uiEvent,
      renderTimeoutMillisOverride: 3000,
    },
    item.destination,
  );
}}

请注意：如果 <PerformanceProfiler> 组件的 useRenderTimeouts 属性设置为 false，则提供 renderTimeoutMillisOverride 不起任何作用。在这种情况下，不会使用看门狗定时器，就像以前一样。

renderTimeoutMillisOverride​

renderTimeoutMillisOverride