1- import * as SentryR from '@sentry/react' ;
2- import * as Sentry from 'sentry-expo' ;
3- import React , { createContext , useCallback , useContext , useEffect , useMemo } from 'react' ;
4- import { CaptureConsole } from '@sentry/integrations' ;
5- import { Integrations } from '@sentry/tracing' ;
1+ import * as Sentry from '@sentry/browser' ;
2+ import { BrowserTracing } from '@sentry/tracing' ;
3+ import React , { createContext , PropsWithChildren , useCallback , useContext , useEffect , useMemo } from 'react' ;
64import { Primitive } from '@sentry/types' ;
7- import { Platform } from 'react-native' ;
85
9- import { MonitoringConfigType , MonitoringContextType , SentryTransactionStatus } from './types' ;
6+ import { MonitoringContext , MonitoringProps , SentryTransactionStatus } from './types' ;
107
118export * from './types' ;
129
13- const platform = Platform . select ( {
14- web : Sentry . Browser ,
15- native : Sentry . Browser ,
16- } ) ;
17-
18- /**
19- * Set key:value that will be sent as tags data with the event.
20- *
21- * Can also be used to unset a tag, by passing `undefined`.
22- *
23- * @param key String key of tag
24- * @param value Value of tag
25- */
26- export function setTag ( key : string , value : Primitive ) : void {
27- SentryR . setTag ( key , value ) ;
28- }
29-
30- /**
31- * Updates user context information for future events.
32- *
33- * @param user User context object to be set in the current context. Pass `null` to unset the user.
34- */
35- export function setUser ( id : string ) : void {
36- SentryR . setUser ( { id } ) ;
37- }
38-
3910/**
4011 * Monitoring context which will create wrapper for monitoring functionality.
4112*/
42- export const MonitoringContext = createContext < MonitoringContextType | null > ( null ) ;
13+ export const Context = createContext < MonitoringContext | null > ( null ) ;
4314
4415/**
4516 * Monitoring wrapper used to abstract Sentry functionality.
4617 *
47- * @param {object } children - Provider children components that will be shared inside context provider .
48- * @param { MonitoringConfig } config - Configuration for sentry to override default configuration.
18+ * @param {MonitoringProps } data - Configuration for sentry to override default configuration .
19+ * @return { React.ReactNode }
4920*/
50- export function MonitoringProvider ( { children, config } : MonitoringConfigType ) {
21+ export function MonitoringProvider ( { children, config } : PropsWithChildren < MonitoringProps > ) {
5122 useEffect ( ( ) => {
5223 Sentry . init ( {
53- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
5424 dsn : config . dsn ,
5525 environment : config . environment ,
5626 debug : config . debug ,
57- enableAutoSessionTracking : config . enableAutoSessionTracking ,
58- enableInExpoDevelopment : config . enableInExpoDevelopment ,
59- sessionTrackingIntervalMillis : config . sessionTrackingIntervalMillis ,
6027 tracesSampleRate : config . tracesSampleRate ,
6128 integrations : [
62- ...( Platform . select ( {
63- web : [ new CaptureConsole ( { levels : [ 'log' ] } ) ] ,
64- native : [ ] ,
65- } ) ) ,
66- new Integrations . BrowserTracing ( { tracingOrigins : config . tracingOrigins } ) ,
29+ new BrowserTracing ( { tracePropagationTargets : config . tracingOrigins } ) ,
6730 ] ,
68- } as Sentry . SentryExpoNativeOptions ) ;
31+ } ) ;
32+ } , [ ] ) ;
33+
34+ /**
35+ * Updates user context information for future events.
36+ *
37+ * @param id {string} set user for in sentry
38+ * @return {void }
39+ */
40+ const setMonitoringUser = useCallback ( ( id : string ) : void => {
41+ Sentry . setUser ( { id } ) ;
42+ } , [ ] ) ;
43+
44+ /**
45+ * Set key:value that will be sent as tags data with the event.
46+ *
47+ * Can also be used to unset a tag, by passing `undefined`.
48+ *
49+ * @param key String key of tag
50+ * @param value Value of tag
51+ * @return {void }
52+ */
53+ const setMonitoringTag = useCallback ( ( key : string , value : Primitive ) : void => {
54+ Sentry . setTag ( key , value ) ;
6955 } , [ ] ) ;
7056
7157 /**
7258 * Error handler function which is used to capture errors in sentry.
7359 *
7460 * @param error {Error | string} - Caught error that to be send to Sentry.io
61+ * @returns {string | null }
7562 */
7663 const errorHandler = useCallback ( ( error : Error | string ) : string | null => {
77- if ( ! Sentry || ( ! Sentry ?. Browser && ! Sentry ?. Native ) ) { return null ; }
64+ if ( ! Sentry ) {
65+ return null ;
66+ }
7867
79- return platform . captureException ( error ) ;
68+ return Sentry . captureException ( error ) ;
8069 } , [ ] ) ;
8170
8271 /**
@@ -85,35 +74,60 @@ export function MonitoringProvider({ children, config }: MonitoringConfigType) {
8574 *
8675 * @param name {string} - Name of transaction
8776 * @param operation {string} - Operation of transaction to be performed
88- * @param data {{[key: string]: number | string}} - Data to be added on transaction
89- */
90- // eslint-disable-next-line @typescript-eslint/ban-types
91- const measurePerformance = useCallback ( ( name : string , operation : string , data ?: { [ key : string ] : number | string } ) : Function => {
92- const transaction = platform . startTransaction ( { name, op : operation } ) ;
93- const transactionOperation = transaction . startChild ( { op : operation , data } ) ;
77+ * @param [data] {{[key: string]: number | string}} - Data to be added on transaction
78+ * @returns {() => void } - Which will helps to close the transaction and complete the measurement.
79+ */
80+ const measurePerformance = useCallback ( ( name : string , op : string , data ?: { [ key : string ] : number | string } ) : ( ( ) => void ) => {
81+ // This will create a new Transaction
82+ const transaction = Sentry . startTransaction ( { name, data, op } ) ;
83+
84+ // Set transaction on scope to associate with errors and get included span instrumentation
85+ // If there's currently an unfinished transaction, it may be dropped
86+ Sentry . getCurrentHub ( ) . configureScope ( ( scope ) => {
87+ scope . setSpan ( transaction ) ;
88+ } ) ;
89+
9490 return ( ) => {
95- transactionOperation . setStatus ( SentryTransactionStatus ) ;
96- transactionOperation . finish ( ) ;
9791 transaction . setStatus ( SentryTransactionStatus ) ;
9892 transaction . finish ( ) ;
9993 } ;
10094 } , [ ] ) ;
10195
96+ /**
97+ * Set the custom measurement on particular transaction
98+ *
99+ * @param transactionName Name of the transaction
100+ * @param name Name of the measurement
101+ * @param value Value of the measurement
102+ * @param [unit] Unit of the measurement. (Defaults to an empty string)
103+ * @return {void }
104+ */
105+ const setMeasurement = useCallback ( ( transactionName : string , name : string , value : number , unit ?: string ) : void => {
106+ const transaction = Sentry . startTransaction ( { name : transactionName , op : name } ) ;
107+
108+ setTimeout ( ( ) => {
109+ transaction . setMeasurement ( name , value , unit ) ;
110+ transaction . setMeasurement ( 'frames_total' , value , unit ) ;
111+ transaction . setStatus ( SentryTransactionStatus ) ;
112+ transaction . finish ( ) ;
113+ } , 100 ) ;
114+ } , [ ] ) ;
115+
102116 const monitoringContextValue = useMemo (
103- ( ) => ( { errorHandler, measurePerformance } ) ,
104- [ errorHandler , measurePerformance ] ,
117+ ( ) => ( { setMonitoringUser , setMonitoringTag , errorHandler, measurePerformance, setMeasurement } ) ,
118+ [ setMonitoringUser , setMonitoringTag , errorHandler , measurePerformance , setMeasurement ] ,
105119 ) ;
106120
107121 return (
108- < MonitoringContext . Provider value = { monitoringContextValue } >
122+ < Context . Provider value = { monitoringContextValue } >
109123 { children }
110- </ MonitoringContext . Provider >
124+ </ Context . Provider >
111125 ) ;
112126}
113127
114128/**
115129 * Custom hook which will provide monitoring context which will expose all the functionality.
116130*/
117131export function useMonitoring ( ) {
118- return useContext ( MonitoringContext ) ;
132+ return useContext ( Context ) ;
119133}
0 commit comments