API Reference
APIs

captureOwnerStack

captureOwnerStack development-இல் தற்போதைய Owner Stack-ஐ read செய்து, கிடைத்தால் string ஆக return செய்கிறது.

const stack = captureOwnerStack();

குறிப்பு

captureOwnerStack()

தற்போதைய Owner Stack-ஐ பெற captureOwnerStack-ஐ call செய்யுங்கள்.

import * as React from 'react';

function Component() {
  if (process.env.NODE_ENV !== 'production') {
    const ownerStack = React.captureOwnerStack();
    console.log(ownerStack);
  }
}

Parameters

captureOwnerStack parameters எதையும் ஏற்காது.

Returns

captureOwnerStack string | null return செய்கிறது.

Owner Stacks கிடைக்கும் இடங்கள்:

  • Component render
  • Effects (எ.கா. useEffect)
  • React-ன் event handlers (எ.கா. <button onClick={...} />)
  • React error handlers (React Root options onCaughtError, onRecoverableError, மற்றும் onUncaughtError)

Owner Stack கிடைக்கவில்லை என்றால், null return செய்யப்படும் (சிக்கல் தீர்வு: Owner Stack null ஆக உள்ளது-ஐப் பார்க்கவும்).

Caveats

  • Owner Stacks development-இல் மட்டுமே கிடைக்கும். Development-க்கு வெளியே captureOwnerStack எப்போதும் null return செய்யும்.
Deep Dive

Owner Stack vs Component Stack

Owner Stack, onUncaughtError-இல் உள்ள errorInfo.componentStack போன்ற React error handlers-இல் கிடைக்கும் Component Stack-இலிருந்து வேறுபட்டது.

உதாரணமாக, பின்வரும் code-ஐ எடுத்துக் கொள்ளுங்கள்:

import {captureOwnerStack} from 'react';
import {createRoot} from 'react-dom/client';
import App, {Component} from './App.js';
import './styles.css';

createRoot(document.createElement('div'), {
  onUncaughtError: (error, errorInfo) => {
    // The stacks are logged instead of showing them in the UI directly to
    // highlight that browsers will apply sourcemaps to the logged stacks.
    // Note that sourcemapping is only applied in the real browser console not
    // in the fake one displayed on this page.
    // Press "fork" to be able to view the sourcemapped stack in a real console.
    console.log(errorInfo.componentStack);
    console.log(captureOwnerStack());
  },
}).render(
  <App>
    <Component label="disabled" />
  </App>
);

SubComponent ஒரு error throw செய்யும். அந்த error-ன் Component Stack:

at SubComponent
at fieldset
at Component
at main
at React.Suspense
at App

ஆனால் Owner Stack இவ்வளவு மட்டுமே காட்டும்:

at Component

இந்த Stack-இல் App அல்லது DOM components (எ.கா. fieldset) Owners ஆக கருதப்படாது; ஏனெனில் SubComponent கொண்ட node-ஐ “உருவாக்குவதில்” அவை பங்களிக்கவில்லை. App மற்றும் DOM components node-ஐ forward செய்தவை மட்டுமே. App children node-ஐ render செய்தது மட்டும்; ஆனால் Component <SubComponent /> மூலம் SubComponent கொண்ட node-ஐ உருவாக்கியது.

Navigation அல்லது legend stack-இல் இல்லை; ஏனெனில் அது <SubComponent /> கொண்ட node-க்கு sibling மட்டுமே.

SubComponent ஏற்கனவே callstack-ன் பகுதியாக இருப்பதால் omit செய்யப்படுகிறது.

பயன்பாடு

Custom error overlay-ஐ மேம்படுத்துதல் 

import { captureOwnerStack } from "react";
import { instrumentedConsoleError } from "./errorOverlay";

const originalConsoleError = console.error;
console.error = function patchedConsoleError(...args) {
  originalConsoleError.apply(console, args);
  const ownerStack = captureOwnerStack();
  onConsoleError({
    // Keep in mind that in a real application, console.error can be
    // called with multiple arguments which you should account for.
    consoleMessage: args[0],
    ownerStack,
  });
};

Error overlay-இல் highlight செய்ய console.error calls-ஐ intercept செய்தால், Owner Stack சேர்க்க captureOwnerStack-ஐ call செய்யலாம்.

import { captureOwnerStack } from "react";
import { createRoot } from "react-dom/client";
import App from './App';
import { onConsoleError } from "./errorOverlay";
import './styles.css';

const originalConsoleError = console.error;
console.error = function patchedConsoleError(...args) {
  originalConsoleError.apply(console, args);
  const ownerStack = captureOwnerStack();
  onConsoleError({
    // Keep in mind that in a real application, console.error can be
    // called with multiple arguments which you should account for.
    consoleMessage: args[0],
    ownerStack,
  });
};

const container = document.getElementById("root");
createRoot(container).render(<App />);

சிக்கல் தீர்வு

Owner Stack null ஆக உள்ளது

captureOwnerStack call React controlled function-க்கு வெளியே நடந்துள்ளது; எ.கா. setTimeout callback-இல், fetch call-க்கு பிறகு, அல்லது custom DOM event handler-இல். Render, Effects, React event handlers, மற்றும் React error handlers (எ.கா. hydrateRoot#options.onCaughtError) நேரத்தில் Owner Stacks கிடைக்க வேண்டும்.

கீழே உள்ள உதாரணத்தில், button click செய்தால் empty Owner Stack log செய்யப்படும்; ஏனெனில் captureOwnerStack custom DOM event handler நேரத்தில் call செய்யப்பட்டது. Owner Stack முன்னதாக capture செய்யப்பட வேண்டும்; உதாரணமாக captureOwnerStack call-ஐ Effect body-க்குள் நகர்த்தலாம்.

import {captureOwnerStack, useEffect} from 'react';

export default function App() {
  useEffect(() => {
    // Should call `captureOwnerStack` here.
    function handleEvent() {
      // Calling it in a custom DOM event handler is too late.
      // The Owner Stack will be `null` at this point.
      console.log('Owner Stack: ', captureOwnerStack());
    }

    document.addEventListener('click', handleEvent);

    return () => {
      document.removeEventListener('click', handleEvent);
    }
  })

  return <button>Click me to see that Owner Stacks are not available in custom DOM event handlers</button>;
}

captureOwnerStack கிடைக்கவில்லை

captureOwnerStack development builds-இல் மட்டுமே export செய்யப்படும். Production builds-இல் இது undefined ஆக இருக்கும். Production மற்றும் development இரண்டிற்கும் bundled ஆகும் files-இல் captureOwnerStack பயன்படுத்தப்பட்டால், namespace import-இலிருந்து அதை conditionally access செய்ய வேண்டும்.

// Don't use named imports of `captureOwnerStack` in files that are bundled for development and production.
import {captureOwnerStack} from 'react';
// Use a namespace import instead and access `captureOwnerStack` conditionally.
import * as React from 'react';

if (process.env.NODE_ENV !== 'production') {
  const ownerStack = React.captureOwnerStack();
  console.log('Owner Stack', ownerStack);
}
PreviouscacheSignal
NextcreateContext