zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introduce error boundary mechanism and exception capture with Baselime and Sentry

Browse Source 
Deleted the ErrorBoundary component from the makerkit package and introduced new exception capture mechanisms for Baselime and Sentry monitoring providers. The code now captures all exceptions thrown within components and sends them to the configured monitoring provider, which in turn logs the errors for debugging purposes. Updated packages and environment variables accordingly to support this feature.
This commit is contained in:
giancarlo
2024-04-15 14:14:08 +08:00
parent bb19d6d207
commit 07ff9a7f8e
31 changed files with 327 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/monitoring/baselime/package.json
View File

@@ -10,10 +10,13 @@
},
"prettier": "@kit/prettier-config",
"exports": {
".": "./src/index.ts"
".": "./src/index.ts",
"./instrumentation": "./src/instrumentation.ts",
"./provider": "./src/components/provider.tsx"
},
"dependencies": {
"@baselime/node-opentelemetry": "^0.5.8"
"@baselime/node-opentelemetry": "^0.5.8",
"@baselime/react-rum": "^0.2.9"
},
"devDependencies": {
"@kit/eslint-config": "workspace:*",

4
packages/monitoring/baselime/src/capture-exception.ts Normal file
View File

@@ -0,0 +1,4 @@
export function captureException(error: Error) {
console.info(`No yet defined...`);
return console.error(`Caught exception: ${JSON.stringify(error)}`);
}

22
packages/monitoring/baselime/src/components/provider.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { BaselimeRum } from '@baselime/react-rum';
export function BaselineProvider({
children,
apiKey,
enableWebVitals,
ErrorPage,
}: React.PropsWithChildren<{
apiKey: string;
enableWebVitals?: boolean;
ErrorPage?: React.ReactElement;
}>) {
return (
<BaselimeRum
apiKey={apiKey}
enableWebVitals={enableWebVitals}
fallback={ErrorPage ?? null}
>
{children}
</BaselimeRum>
);
}

12
packages/monitoring/baselime/src/hooks/use-capture-exception.ts Normal file
View File

@@ -0,0 +1,12 @@
import { useCallback } from 'react';
import { useBaselimeRum } from '@baselime/react-rum';
export function useCaptureException() {
const { captureException } = useBaselimeRum();
return useCallback(
(error: Error) => captureException(error),
[captureException],
);
}

32
packages/monitoring/baselime/src/index.ts
View File

@@ -1,31 +1 @@
const INSTRUMENTATION_SERVICE_NAME = process.env.INSTRUMENTATION_SERVICE_NAME;
if (!INSTRUMENTATION_SERVICE_NAME) {
throw new Error(`
You have set the Baselime instrumentation provider, but have not set the INSTRUMENTATION_SERVICE_NAME environment variable. Please set the INSTRUMENTATION_SERVICE_NAME environment variable.
`);
}
/**
* @name registerBaselimeInstrumentation
* @description This file is used to register Baselime instrumentation for your Next.js application.
*
* Please set the MONITORING_INSTRUMENTATION_PROVIDER environment variable to 'baselime' to register Baselime instrumentation.
*/
export async function registerBaselimeInstrumentation() {
const { BaselimeSDK, BetterHttpInstrumentation, VercelPlugin } = await import(
'@baselime/node-opentelemetry'
);
const sdk = new BaselimeSDK({
serverless: true,
service: INSTRUMENTATION_SERVICE_NAME,
instrumentations: [
new BetterHttpInstrumentation({
plugins: [new VercelPlugin()],
}),
],
});
sdk.start();
}
export * from './capture-exception';

31
packages/monitoring/baselime/src/instrumentation.ts Normal file
View File

@@ -0,0 +1,31 @@
const INSTRUMENTATION_SERVICE_NAME = process.env.INSTRUMENTATION_SERVICE_NAME;
if (!INSTRUMENTATION_SERVICE_NAME) {
throw new Error(`
You have set the Baselime instrumentation provider, but have not set the INSTRUMENTATION_SERVICE_NAME environment variable. Please set the INSTRUMENTATION_SERVICE_NAME environment variable.
`);
}
/**
* @name registerBaselimeInstrumentation
* @description This file is used to register Baselime instrumentation for your Next.js application.
*
* Please set the MONITORING_INSTRUMENTATION_PROVIDER environment variable to 'baselime' to register Baselime instrumentation.
*/
export async function registerBaselimeInstrumentation() {
const { BaselimeSDK, BetterHttpInstrumentation, VercelPlugin } = await import(
'@baselime/node-opentelemetry'
);
const sdk = new BaselimeSDK({
serverless: true,
service: INSTRUMENTATION_SERVICE_NAME,
instrumentations: [
new BetterHttpInstrumentation({
plugins: [new VercelPlugin()],
}),
],
});
sdk.start();
}

12
packages/monitoring/package.json
View File

@@ -11,7 +11,10 @@
},
"prettier": "@kit/prettier-config",
"exports": {
".": "./src/index.ts"
".": "./src/index.ts",
"./instrumentation": "./src/instrumentation.ts",
"./hooks": "./src/hooks/index.ts",
"./components": "./src/components/index.ts"
},
"devDependencies": {
"@kit/baselime": "workspace:*",
@@ -19,7 +22,12 @@
"@kit/prettier-config": "workspace:*",
"@kit/sentry": "workspace:*",
"@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*"
"@kit/tsconfig": "workspace:*",
"@types/react": "^18.2.77",
"react": "18.2.0"
},
"peerDependencies": {
"react": "^18.2.0"
},
"eslintConfig": {
"root": true,

1
packages/monitoring/sentry/package.json
View File

@@ -11,6 +11,7 @@
"prettier": "@kit/prettier-config",
"exports": {
".": "./src/index.ts",
"./instrumentation": "./src/instrumentation.ts",
"./config/client": "./src/config/sentry.client.config.ts",
"./config/server": "./src/config/sentry.server.config.ts",
"./config/edge": "./src/config/sentry.server.edge.ts"

5
packages/monitoring/sentry/src/capture-exception.ts Normal file
View File

@@ -0,0 +1,5 @@
import * as Sentry from '@sentry/nextjs';
export function captureException(error: Error & { digest?: string }) {
return Sentry.captureException(error);
}

37
packages/monitoring/sentry/src/index.ts
View File

@@ -1,36 +1 @@
const INSTRUMENTATION_SERVICE_NAME = process.env.INSTRUMENTATION_SERVICE_NAME;
if (!INSTRUMENTATION_SERVICE_NAME) {
throw new Error(`
You have set the Sentry instrumentation provider, but have not set the INSTRUMENTATION_SERVICE_NAME environment variable. Please set the INSTRUMENTATION_SERVICE_NAME environment variable.
`);
}
/**
* @name registerSentryInstrumentation
* @description This file is used to register Sentry instrumentation for your Next.js application.
*
* Please set the MONITORING_INSTRUMENTATION_PROVIDER environment variable to 'sentry' to register Sentry instrumentation.
*/
export async function registerSentryInstrumentation() {
const { Resource } = await import('@opentelemetry/resources');
const { NodeSDK } = await import('@opentelemetry/sdk-node');
const { SEMRESATTRS_SERVICE_NAME } = await import(
'@opentelemetry/semantic-conventions'
);
const { SentrySpanProcessor, SentryPropagator } = await import(
'@sentry/opentelemetry-node'
);
const sdk = new NodeSDK({
resource: new Resource({
[SEMRESATTRS_SERVICE_NAME]: INSTRUMENTATION_SERVICE_NAME,
}),
spanProcessor: new SentrySpanProcessor(),
textMapPropagator: new SentryPropagator(),
});
sdk.start();
}
export { captureException } from './capture-exception';

36
packages/monitoring/sentry/src/instrumentation.ts Normal file
View File

@@ -0,0 +1,36 @@
const INSTRUMENTATION_SERVICE_NAME = process.env.INSTRUMENTATION_SERVICE_NAME;
if (!INSTRUMENTATION_SERVICE_NAME) {
throw new Error(`
You have set the Sentry instrumentation provider, but have not set the INSTRUMENTATION_SERVICE_NAME environment variable. Please set the INSTRUMENTATION_SERVICE_NAME environment variable.
`);
}
/**
* @name registerSentryInstrumentation
* @description This file is used to register Sentry instrumentation for your Next.js application.
*
* Please set the MONITORING_INSTRUMENTATION_PROVIDER environment variable to 'sentry' to register Sentry instrumentation.
*/
export async function registerSentryInstrumentation() {
const { Resource } = await import('@opentelemetry/resources');
const { NodeSDK } = await import('@opentelemetry/sdk-node');
const { SEMRESATTRS_SERVICE_NAME } = await import(
'@opentelemetry/semantic-conventions'
);
const { SentrySpanProcessor, SentryPropagator } = await import(
'@sentry/opentelemetry-node'
);
const sdk = new NodeSDK({
resource: new Resource({
[SEMRESATTRS_SERVICE_NAME]: INSTRUMENTATION_SERVICE_NAME,
}),
spanProcessor: new SentrySpanProcessor(),
textMapPropagator: new SentryPropagator(),
});
sdk.start();
}

44
packages/monitoring/src/capture-exception.ts Normal file
View File

@@ -0,0 +1,44 @@
import { InstrumentationProvider } from './monitoring-providers.enum';
/**
* @name MONITORING_PROVIDER
* @description Register monitoring instrumentation based on the MONITORING_PROVIDER environment variable.
*/
const MONITORING_PROVIDER = process.env.MONITORING_PROVIDER as
| InstrumentationProvider
| undefined;
/**
* @name captureException
* @description Capture an exception and send it to the monitoring provider defined.
* @param error
*/
export async function captureException(error: Error) {
if (!MONITORING_PROVIDER) {
console.info(
`No instrumentation provider specified. Logging to console...`,
);
return console.error(`Caught exception: ${JSON.stringify(error)}`);
}
switch (MONITORING_PROVIDER) {
case InstrumentationProvider.Baselime: {
const { captureException } = await import('@kit/baselime');
return captureException(error);
}
case InstrumentationProvider.Sentry: {
const { captureException } = await import('@kit/sentry');
return captureException(error);
}
default: {
throw new Error(
`Please set the MONITORING_PROVIDER environment variable to register the monitoring instrumentation provider.`,
);
}
}
}

39
packages/monitoring/src/components/error-boundary.tsx Normal file
View File

@@ -0,0 +1,39 @@
import type { ErrorInfo, ReactNode } from 'react';
import { Component } from 'react';
import { captureException } from '../capture-exception';
interface Props {
onError?: (error: Error, info: ErrorInfo) => void;
fallback: ReactNode;
children: ReactNode;
}
export class ErrorBoundary extends Component<Props> {
readonly state = { hasError: false, error: null };
constructor(props: Props) {
super(props);
}
static getDerivedStateFromError(error: unknown) {
return {
hasError: true,
error,
};
}
async componentDidCatch(error: Error, info: ErrorInfo) {
this.props.onError?.(error, info);
await captureException(error);
}
render() {
if (this.state.hasError) {
return this.props.fallback;
}
return this.props.children;
}
}

1
packages/monitoring/src/components/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './error-boundary';

1
packages/monitoring/src/hooks/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './use-capture-exception';

11
packages/monitoring/src/hooks/use-capture-exception.ts Normal file
View File

@@ -0,0 +1,11 @@
import { useEffect } from 'react';
import { captureException } from '../capture-exception';
export function useCaptureException(error: Error) {
useEffect(() => {
void captureException(error);
}, [error]);
return null;
}

2
packages/monitoring/src/index.ts
View File

@@ -1 +1 @@
export * from './instrumentation';
export * from './capture-exception';

32
packages/monitoring/src/instrumentation.ts
View File

@@ -1,44 +1,46 @@
enum InstrumentationProvider {
Baselime = 'baselime',
Sentry = 'sentry',
}
import { InstrumentationProvider } from './monitoring-providers.enum';
/**
* @name DEFAULT_INSTRUMENTATION_PROVIDER
* @description Register monitoring instrumentation based on the MONITORING_INSTRUMENTATION_PROVIDER environment variable.
* @name MONITORING_PROVIDER
* @description Register monitoring instrumentation based on the MONITORING_PROVIDER environment variable.
*/
const DEFAULT_INSTRUMENTATION_PROVIDER = process.env
.MONITORING_INSTRUMENTATION_PROVIDER as InstrumentationProvider | undefined;
const MONITORING_PROVIDER = process.env.MONITORING_PROVIDER as
| InstrumentationProvider
| undefined;
/**
* @name registerMonitoringInstrumentation
* @description Register monitoring instrumentation based on the MONITORING_INSTRUMENTATION_PROVIDER environment variable.
* @description Register monitoring instrumentation based on the MONITORING_PROVIDER environment variable.
*
* Please set the MONITORING_INSTRUMENTATION_PROVIDER environment variable to register the monitoring instrumentation provider.
* Please set the MONITORING_PROVIDER environment variable to register the monitoring instrumentation provider.
*/
export async function registerMonitoringInstrumentation() {
if (!DEFAULT_INSTRUMENTATION_PROVIDER) {
if (!MONITORING_PROVIDER) {
console.info(`No instrumentation provider specified. Skipping...`);
return;
}
switch (DEFAULT_INSTRUMENTATION_PROVIDER) {
switch (MONITORING_PROVIDER) {
case InstrumentationProvider.Baselime: {
const { registerBaselimeInstrumentation } = await import('@kit/baselime');
const { registerBaselimeInstrumentation } = await import(
'@kit/baselime/instrumentation'
);
return registerBaselimeInstrumentation();
}
case InstrumentationProvider.Sentry: {
const { registerSentryInstrumentation } = await import('@kit/sentry');
const { registerSentryInstrumentation } = await import(
'@kit/sentry/instrumentation'
);
return registerSentryInstrumentation();
}
default:
throw new Error(
`Unknown instrumentation provider: ${DEFAULT_INSTRUMENTATION_PROVIDER as string}`,
`Unknown instrumentation provider: ${MONITORING_PROVIDER as string}`,
);
}
}

4
packages/monitoring/src/monitoring-providers.enum.ts Normal file
View File

@@ -0,0 +1,4 @@
export enum InstrumentationProvider {
Baselime = 'baselime',
Sentry = 'sentry',
}