தமிழ்

உங்கள் பயன்பாட்டின் செயல்திறன் குறித்த ஆழமான நுண்ணறிவுகளைப் பெறவும், இடையூறுகளைக் கண்டறியவும், மற்றும் பயனர் அனுபவத்தை மேம்படுத்தவும் நெக்ஸ்ட்.js இன்ஸ்ட்ருமென்டேஷனின் ஆற்றலைப் பயன்படுத்துங்கள். பயன்பாட்டுக் கண்காணிப்பு ஹூக்குகளை திறம்பட செயல்படுத்துவது எப்படி என்பதை அறிக.

நெக்ஸ்ட்.js இன்ஸ்ட்ருமென்டேஷன்: உற்பத்தி நிலவர நுண்ணறிவிற்கான பயன்பாட்டுக் கண்காணிப்பு ஹூக்குகள்

நெக்ஸ்ட்.js இன்ஸ்ட்ருமென்டேஷன் உங்கள் பயன்பாட்டின் செயல்திறனை உற்பத்தியில் கண்காணிக்கவும் அளவிடவும் ஒரு சக்திவாய்ந்த வழிமுறையை வழங்குகிறது. பயன்பாட்டுக் கண்காணிப்பு ஹூக்குகளைப் பயன்படுத்துவதன் மூலம், கோரிக்கை கையாளுதல், சர்வர்-சைட் ரெண்டரிங், தரவுப் பெறுதல் மற்றும் உங்கள் பயன்பாட்டின் நடத்தையின் பிற முக்கிய அம்சங்கள் பற்றிய ஆழமான நுண்ணறிவுகளைப் பெறலாம். இது இடையூறுகளைக் கண்டறியவும், செயல்திறன் சிக்கல்களைக் கண்டறியவும், மற்றும் சிறந்த பயனர் அனுபவத்திற்காக உங்கள் பயன்பாட்டை மேம்படுத்தவும் உங்களை அனுமதிக்கிறது. குறிப்பாக நெக்ஸ்ட்.js பயன்பாடுகளை உலகளவில் triển khai செய்யும்போது இது மிகவும் முக்கியமானது, ஏனெனில் நெட்வொர்க் தாமதம் மற்றும் புவியியல் ரீதியாகப் பரவியுள்ள பயனர்கள் தனித்துவமான சவால்களை அறிமுகப்படுத்தலாம்.

நெக்ஸ்ட்.js இன்ஸ்ட்ருமென்டேஷனைப் புரிந்துகொள்ளுதல்

நெக்ஸ்ட்.js-ல் உள்ள இன்ஸ்ட்ருமென்டேஷன் அம்சம், பயன்பாட்டு வாழ்க்கைச் சுழற்சியின் பல்வேறு கட்டங்களில் செயல்படுத்தப்படும் ஹூக்குகளைப் பதிவு செய்ய உங்களை அனுமதிக்கிறது. இந்த ஹூக்குகள் மெட்ரிக்குகள், ட்ரேஸ்கள் மற்றும் லாக்குகளைச் சேகரிக்கப் பயன்படுத்தப்படலாம், பின்னர் அவை ஒரு பயன்பாட்டு செயல்திறன் கண்காணிப்பு (APM) அமைப்பு அல்லது பிற கவனிக்கத்தக்கதன்மை கருவிகளுக்கு அனுப்பப்படலாம். இது உங்கள் பயன்பாட்டின் செயல்திறன் குறித்த ஒரு விரிவான பார்வையை நிகழ்நேரத்தில் வழங்குகிறது.

பாரம்பரிய கிளையன்ட்-சைட் கண்காணிப்பைப் போலல்லாமல், இது உலாவி அனுபவத்தை மட்டுமே பிடிக்கிறது, நெக்ஸ்ட்.js இன்ஸ்ட்ருமென்டேஷன் கிளையன்ட்-சைட் மற்றும் சர்வர்-சைட் இரண்டின் கவனிக்கத்தக்கதன்மையை வழங்குகிறது, இது உங்கள் பயன்பாட்டின் செயல்திறன் குறித்த முழு-ஸ்டாக் பார்வையை செயல்படுத்துகிறது. சர்வர்-சைட் ரெண்டரிங், API வழிகள் மற்றும் தரவுப் பெறுதல் ஆகியவற்றின் ஒட்டுமொத்த பயனர் அனுபவத்தில் ஏற்படும் தாக்கத்தைப் புரிந்துகொள்ள இது மிகவும் முக்கியமானது.

இன்ஸ்ட்ருமென்டேஷனின் முக்கிய நன்மைகள்

நெக்ஸ்ட்.js-ல் இன்ஸ்ட்ருமென்டேஷனை அமைத்தல்

உங்கள் நெக்ஸ்ட்.js பயன்பாட்டில் இன்ஸ்ட்ருமென்டேஷனை இயக்க, உங்கள் திட்டத்தின் மூலக் கோப்பகத்தில் instrumentation.js (அல்லது instrumentation.ts) கோப்பை உருவாக்க வேண்டும். இந்தக் கோப்பில் நீங்கள் பதிவு செய்ய விரும்பும் ஹூக்குகள் இருக்கும்.

இதோ ஒரு instrumentation.ts கோப்பின் அடிப்படை உதாரணம்:

// instrumentation.ts

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { trace } = await import('./utils/tracing');

    trace('registering-tracing');
  }
}

இந்த எடுத்துக்காட்டில், நாம் ஒரு trace செயல்பாட்டை ./utils/tracing கோப்பிலிருந்து இறக்குமதி செய்து, அதை register செயல்பாட்டிற்குள் அழைக்கிறோம். பயன்பாடு தொடங்கும் போது நெக்ஸ்ட்.js ஆல் register செயல்பாடு தானாகவே அழைக்கப்படுகிறது.

ரன்டைம் அடிப்படையில் நிபந்தனைக்குட்பட்ட செயலாக்கம்

process.env.NEXT_RUNTIME மாறி செயலாக்கச் சூழலைத் தீர்மானிக்க மிகவும் முக்கியமானது. பயன்பாடு ஒரு Node.js சூழலில் (சர்வர்-சைட் ரெண்டரிங், API வழிகள் போன்றவற்றிற்கு) இயங்குகிறதா அல்லது ஒரு எட்ஜ் ரன்டைம் சூழலில் (எட்ஜ் செயல்பாடுகளுக்கு) இயங்குகிறதா என்பதைப் பொறுத்து குறியீட்டை நிபந்தனையுடன் செயல்படுத்த இது உங்களை அனுமதிக்கிறது. சில கண்காணிப்பு நூலகங்கள் அல்லது கருவிகள் ஒரு ரன்டைம் அல்லது மற்றொன்றுடன் மட்டுமே இணக்கமாக இருக்கலாம் என்பதால் இது முக்கியமானது.

எடுத்துக்காட்டாக, நீங்கள் Node.js சூழல்களுக்கு ஒரு குறிப்பிட்ட APM ஏஜெண்டையும், எட்ஜ் ரன்டைம் சூழல்களுக்கு வேறு ஒரு கருவியையும் பயன்படுத்த விரும்பலாம். process.env.NEXT_RUNTIME ஐப் பயன்படுத்துவது தேவையான போது மட்டுமே பொருத்தமான தொகுதிகளை ஏற்ற உங்களை அனுமதிக்கிறது.

பயன்பாட்டுக் கண்காணிப்பு ஹூக்குகளை செயல்படுத்துதல்

இப்போது, நெக்ஸ்ட்.js-ல் பயன்பாட்டுக் கண்காணிப்பு ஹூக்குகளை எப்படி செயல்படுத்துவது என்பதற்கான சில எடுத்துக்காட்டுகளைப் பார்ப்போம்.

1. கோரிக்கை கையாளுதல் நேரத்தை அளவிடுதல்

உள்வரும் கோரிக்கைகளைக் கையாள எடுக்கும் நேரத்தை அளவிடுவது இன்ஸ்ட்ருமென்டேஷனின் ஒரு பொதுவான பயன்பாடாகும். இது மெதுவான எண்ட்பாயிண்ட்களைக் கண்டறிந்து அவற்றின் செயல்திறனை மேம்படுத்த உதவும்.

performance API-ஐப் பயன்படுத்தி கோரிக்கை கையாளுதல் நேரத்தை எப்படி அளவிடுவது என்பதற்கான எடுத்துக்காட்டு இதோ:

// utils/tracing.ts

import { performance } from 'perf_hooks';

export function trace(eventName: string) {
  const start = performance.now();

  return () => {
    const end = performance.now();
    const duration = end - start;

    console.log(`[${eventName}] took ${duration}ms`);
    // ஒரு உண்மையான பயன்பாட்டில், நீங்கள் இந்தத் தரவை ஒரு APM அமைப்புக்கு அனுப்புவீர்கள்.
  };
}

instrumentation.ts-ல்:

// instrumentation.ts

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { trace } = await import('./utils/tracing');

    const endTrace = trace('request-handling');

    // கோரிக்கை கையாளுதலை சிமுலேட் செய்யவும்
    await new Promise((resolve) => setTimeout(resolve, 100));

    endTrace();
  }
}

இந்த எடுத்துக்காட்டு கோரிக்கையைக் கையாள எடுக்கும் நேரத்தை அளவிடுகிறது மற்றும் அதன் கால அளவை கன்சோலில் பதிவு செய்கிறது. ஒரு உண்மையான பயன்பாட்டில், நீங்கள் இந்தத் தரவை மேலதிக பகுப்பாய்விற்காக ஒரு APM அமைப்புக்கு அனுப்புவீர்கள்.

2. சர்வர்-சைட் ரெண்டரிங் நேரத்தைக் கண்காணித்தல்

சர்வர்-சைட் ரெண்டரிங் (SSR) நெக்ஸ்ட்.js-ன் ஒரு முக்கிய அம்சமாகும், ஆனால் அது ஒரு செயல்திறன் இடையூறாகவும் இருக்கலாம். சர்வரில் பக்கங்களை ரெண்டர் செய்ய எடுக்கும் நேரத்தைக் கண்காணிப்பது ஒரு வேகமான பயனர் அனுபவத்தை உறுதிப்படுத்த மிகவும் முக்கியமானது.

getServerSideProps அல்லது getStaticProps செயல்பாடுகளைச் செயல்படுத்த எடுக்கும் நேரத்தை அளவிட நீங்கள் இன்ஸ்ட்ருமென்டேஷனைப் பயன்படுத்தலாம். இந்தச் செயல்பாடுகள் தரவைப் பெறுவதற்கும் சர்வரில் ரெண்டரிங் செய்ய அதைத் தயாரிப்பதற்கும் பொறுப்பாகும்.

// pages/index.tsx

import { GetServerSideProps } from 'next';
import { trace } from '../utils/tracing';

interface Props {
  data: string;
}

export const getServerSideProps: GetServerSideProps = async () => {
  const endTrace = trace('getServerSideProps');
  const data = await fetchData();
  endTrace();

  return {
    props: { data },
  };
};

async function fetchData() {
  // ஒரு வெளிப்புற API-லிருந்து தரவைப் பெறுவதை சிமுலேட் செய்யவும்
  await new Promise((resolve) => setTimeout(resolve, 50));
  return 'Data from API';
}

export default function Home({ data }: Props) {
  return 

{data}

; }

இந்த எடுத்துக்காட்டில், getServerSideProps செயல்பாட்டைச் செயல்படுத்த எடுக்கும் நேரத்தை அளவிட நாம் trace செயல்பாட்டைப் பயன்படுத்துகிறோம். இது தரவுப் பெறும் செயல்பாட்டில் உள்ள செயல்திறன் சிக்கல்களைக் கண்டறிய உதவுகிறது.

3. API வழி செயல்திறனைக் கண்காணித்தல்

நெக்ஸ்ட்.js API வழிகள் API கோரிக்கைகளைக் கையாளும் சர்வர்லெஸ் செயல்பாடுகளை உருவாக்க உங்களை அனுமதிக்கின்றன. இந்த API வழிகளின் செயல்திறனைக் கண்காணிப்பது ஒரு பதிலளிக்கக்கூடிய பின்தளத்தை உறுதிப்படுத்துவதற்கு அவசியமானது.

உங்கள் API வழிகளில் API கோரிக்கைகளைக் கையாள எடுக்கும் நேரத்தை அளவிட நீங்கள் இன்ஸ்ட்ருமென்டேஷனைப் பயன்படுத்தலாம்.

// pages/api/hello.ts

import type { NextApiRequest, NextApiResponse } from 'next'
import { trace } from '../../utils/tracing';

type Data = {
  name: string
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const endTrace = trace('api-hello');
  // சில வேலைகளை சிமுலேட் செய்யவும்
  await new Promise((resolve) => setTimeout(resolve, 25));
  endTrace();
  res.status(200).json({ name: 'John Doe' })
}

இந்த எடுத்துக்காட்டு API கோரிக்கையைக் கையாள எடுக்கும் நேரத்தை அளவிடுகிறது மற்றும் ஒரு JSON பதிலை வழங்குகிறது. இது உங்கள் பின்தளத்தின் செயல்திறனைப் புரிந்துகொள்ளவும், மெதுவான API எண்ட்பாயிண்ட்களைக் கண்டறியவும் உதவுகிறது.

4. எட்ஜ் ரன்டைம் செயல்திறனைக் கண்காணித்தல்

நெக்ஸ்ட்.js எட்ஜ் ரன்டைம் உங்கள் பயன்பாட்டை உங்கள் பயனர்களுக்கு அருகில், எட்ஜில் triển khai செய்ய உங்களை அனுமதிக்கிறது. இது செயல்திறனை கணிசமாக மேம்படுத்தும், குறிப்பாக உலகளவில் பரவியுள்ள பயன்பாடுகளுக்கு. இருப்பினும், உங்கள் பயன்பாடு திறமையாக இயங்குவதை உறுதிசெய்ய, எட்ஜ் ரன்டைமில் அதன் செயல்திறனைக் கண்காணிப்பது முக்கியம்.

எட்ஜ் ரன்டைமில் உங்கள் பயன்பாட்டின் செயல்திறனைக் கண்காணிக்க இன்ஸ்ட்ருமென்டேஷன் பயன்படுத்தப்படலாம். இது எட்ஜ் ரன்டைம் சூழலுக்கு குறிப்பிட்ட செயல்திறன் சிக்கல்களைக் கண்டறிய உங்களை அனுமதிக்கிறது.

முக்கிய குறிப்பு: எல்லா கண்காணிப்புக் கருவிகளும் எட்ஜ் ரன்டைமை ஆதரிக்காது. நீங்கள் எட்ஜ் ரன்டைம் சூழலுக்காக வடிவமைக்கப்பட்ட சிறப்பு கருவிகள் அல்லது நூலகங்களைப் பயன்படுத்த வேண்டியிருக்கலாம்.

எடுத்துக்காட்டாக, Vercel எட்ஜ் ரன்டைமில் உங்கள் பயன்பாட்டின் செயல்திறனைக் கண்காணிக்கப் பயன்படும் உள்ளமைக்கப்பட்ட பகுப்பாய்வுகளை வழங்குகிறது. நீங்கள் Datadog அல்லது New Relic போன்ற எட்ஜ் ரன்டைமை ஆதரிக்கும் மூன்றாம் தரப்பு கண்காணிப்புக் கருவிகளையும் பயன்படுத்தலாம்.

APM அமைப்புகளுடன் ஒருங்கிணைத்தல்

உங்கள் இன்ஸ்ட்ருமென்டேஷன் ஹூக்குகளால் சேகரிக்கப்பட்ட தரவு ஒரு APM (Application Performance Monitoring) அமைப்புக்கு அனுப்பப்படும்போது மிகவும் மதிப்புமிக்கதாகிறது. APM அமைப்புகள் செயல்திறன் தரவைக் காட்சிப்படுத்த, பகுப்பாய்வு செய்ய மற்றும் எச்சரிக்கை செய்ய கருவிகளை வழங்குகின்றன. பிரபலமான APM அமைப்புகள் பின்வருமாறு:

ஒரு APM அமைப்புடன் ஒருங்கிணைப்பதற்கான குறிப்பிட்ட படிகள் நீங்கள் தேர்ந்தெடுக்கும் அமைப்பைப் பொறுத்து மாறுபடும். இருப்பினும், பொதுவான செயல்முறை பின்வரும் படிகளை உள்ளடக்கியது:

  1. உங்கள் நெக்ஸ்ட்.js பயன்பாட்டில் APM ஏஜென்ட் அல்லது SDK-ஐ நிறுவவும்.
  2. உங்கள் APM அமைப்பின் API விசை அல்லது சான்றுகளுடன் APM ஏஜெண்ட்டை உள்ளமைக்கவும்.
  3. உங்கள் இன்ஸ்ட்ருமென்டேஷன் ஹூக்குகளிலிருந்து மெட்ரிக்குகள், ட்ரேஸ்கள் மற்றும் லாக்குகளை அனுப்ப APM ஏஜெண்டின் API-ஐப் பயன்படுத்தவும்.

Datadog உடன் OpenTelemetry-ஐப் பயன்படுத்தி உதாரணம்:

OpenTelemetry என்பது ஒரு திறந்த மூல கவனிக்கத்தக்கதன்மை கட்டமைப்பு ஆகும், இது டெலிமெட்ரி தரவைச் சேகரிக்கவும் ஏற்றுமதி செய்யவும் ஒரு நிலையான வழியை வழங்குகிறது. இது Datadog உள்ளிட்ட பல்வேறு APM அமைப்புகளுடன் ஒருங்கிணைக்கப் பயன்படலாம்.

// utils/tracing.ts

import { trace, context } from '@opentelemetry/api';

const tracer = trace.getTracer('my-app-tracer');

export function traceFunction any>(
  operationName: string,
  fn: T
): T {
  return function tracedFunction(...args: Parameters): ReturnType {
    const span = tracer.startSpan(operationName);
    const ctx = trace.setSpan(context.active(), span);

    try {
      return context.with(ctx, () => fn(...args));
    } finally {
      span.end();
    }
  } as T;
}

getServerSideProps-க்குள் பயன்பாடு:

// pages/index.tsx

import { GetServerSideProps } from 'next';
import { traceFunction } from '../utils/tracing';

interface Props {
  data: string;
}

async function fetchData() {
  // ஒரு வெளிப்புற API-லிருந்து தரவைப் பெறுவதை சிமுலேட் செய்யவும்
  await new Promise((resolve) => setTimeout(resolve, 50));
  return 'Data from API';
}

export const getServerSideProps: GetServerSideProps = async () => {
  const tracedFetchData = traceFunction('fetchData', fetchData);
  const data = await tracedFetchData();

  return {
    props: { data },
  };
};

export default function Home({ data }: Props) {
  return 

{data}

; }

இந்த எளிமைப்படுத்தப்பட்ட ஓபன் டெலிமெட்ரி எடுத்துக்காட்டு, ஒரு செயல்பாட்டை ட்ரேசிங் ஸ்பானுடன் எப்படி இணைப்பது என்பதைக் காட்டுகிறது. ஓபன் டெலிமெட்ரி SDK மற்றும் Datadog ஏஜெண்டின் உண்மையான அமைப்பு மற்றும் உள்ளமைவு மேலும் விரிவானது மற்றும் சூழல் மாறிகளை அமைப்பது, ஏற்றுமதியாளரை உள்ளமைப்பது மற்றும் உங்கள் instrumentation.ts கோப்பில் SDK-ஐ தொடங்குவது உள்ளிட்ட கூடுதல் படிகள் தேவை. முழுமையான வழிமுறைகளுக்கு ஓபன் டெலிமெட்ரி மற்றும் Datadog ஆவணங்களைப் பார்க்கவும்.

நெக்ஸ்ட்.js இன்ஸ்ட்ருமென்டேஷனுக்கான சிறந்த நடைமுறைகள்

பொதுவான சிக்கல்களும் தீர்வுகளும்

முடிவுரை

நெக்ஸ்ட்.js இன்ஸ்ட்ருமென்டேஷன் உங்கள் பயன்பாட்டின் செயல்திறனை உற்பத்தியில் கண்காணிக்கவும் அளவிடவும் ஒரு சக்திவாய்ந்த வழிமுறையை வழங்குகிறது. பயன்பாட்டுக் கண்காணிப்பு ஹூக்குகளை செயல்படுத்துவதன் மூலம், கோரிக்கை கையாளுதல், சர்வர்-சைட் ரெண்டரிங், தரவுப் பெறுதல் மற்றும் உங்கள் பயன்பாட்டின் நடத்தையின் பிற முக்கிய அம்சங்கள் பற்றிய ஆழமான நுண்ணறிவுகளைப் பெறலாம். இது இடையூறுகளைக் கண்டறியவும், செயல்திறன் சிக்கல்களைக் கண்டறியவும், மற்றும் சிறந்த பயனர் அனுபவத்திற்காக உங்கள் பயன்பாட்டை மேம்படுத்தவும் உங்களை அனுமதிக்கிறது.

இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் பயனர்கள் எங்கிருந்தாலும், உங்கள் பயன்பாடுகளின் செயல்திறனையும் நம்பகத்தன்மையையும் மேம்படுத்த நெக்ஸ்ட்.js இன்ஸ்ட்ருமென்டேஷனை திறம்படப் பயன்படுத்தலாம். உங்கள் தேவைகளுக்கு சரியான APM அமைப்பைத் தேர்வுசெய்து, சிக்கல்களை முன்கூட்டியே கண்டறிந்து தீர்க்க உங்கள் பயன்பாட்டின் செயல்திறனைத் தொடர்ந்து கண்காணிக்க நினைவில் கொள்ளுங்கள்.

நெக்ஸ்ட்.js இன்ஸ்ட்ருமென்டேஷன்: உற்பத்தி நிலவர நுண்ணறிவிற்கான பயன்பாட்டுக் கண்காணிப்பு ஹூக்குகள் | MLOG