Search for a command to run...
Software developer documenting my journey through web and mobile development. I share what I learn, build, and struggle with—from React to SwiftUI, architecture decisions to deployment challenges. Not an expert, just passionate about coding and learning in public. Join me as I navigate the tech landscape one commit at a time.
No comments yet. Be the first to comment.
Daily code discoveries from my developer journey. Each post delivers concise, actionable insights I've uncovered while building with React, Typescript, and more. Brief but impactful lessons for curious developers looking to grow incrementally.
The Problem Every Developer Faces with AI Coding Assistants You've probably experienced this frustration: you ask Claude, Cursor, or any AI coding assistant to write a function, and it confidently generates code that looks perfect at first glance. Bu...
The Problem Every Developer Faces with AI Coding Assistants You've probably experienced this frustration: you ask Claude, Cursor, or any AI coding assistant to write a function, and it confidently generates code that looks perfect at first glance. Bu...
The Backstory So there I was, staring at my shiny new Passbolt installation on Ubuntu 24.04, when that familiar dread crept in: "What happens when (not if) something goes wrong?" After one too many "I'll set up backups tomorrow" moments, I finally de...
TL;DR Add parallel: N to your GitLab CI job and pass --shard=${CI_NODE_INDEX}/${CI_NODE_TOTAL} to Playwright to slash your test execution time and keep your team shipping fast. The Backstory Last week, our test suite execution time crossed the dreade...
Error messages are often the first interaction users have with your support system. When they're cryptic, technical, or in the wrong language, they create confusion rather than clarity. That's why I built the Appwrite Exceptions Translator - a lightw...
The custom Reactotron transport for react-native-logs improves logging by handling various message types, adding metadata, and allowing custom prefixes, making your logs more informative and easier to manage.
Logging is a crucial part of development, especially when debugging or monitoring application behavior. Reactotron is a popular tool for inspecting React and React Native apps, and integrating it with react-native-logs can provide a more seamless logging experience. This custom transport enhances the default logging functionality by adding features like timestamps and custom prefixes.
While react-native-logs is powerful, it might not cover all use cases out of the box. For instance, you might want to:
Add timestamps to your logs for better traceability.
Prefix logs with custom identifiers to differentiate between different sources or modules.
Handle various types of log messages (strings, objects, arrays) gracefully.
The custom transport addresses these needs by:
Handling Different Message Types: It can process simple text messages, arrays, and objects, ensuring that each type is displayed appropriately in Reactotron.
Adding Metadata: It includes the log level and an optional timestamp in the metadata.
Custom Prefixes: It allows you to add a custom prefix to each log message, making it easier to identify the source of the log.
Importance Flag: It marks important logs (based on severity) to make them stand out in Reactotron.
Here's a breakdown of the code:
/**
* Custom transport for sending logs to Reactotron with enhanced features
*/
export const reactotronTransport: transportFunctionType<{
showTimestamp?: boolean;
customPrefix?: string;
}> = (props) => {
const { level, msg, rawMsg, options = {} } = props;
const isImportant = level.severity >= 3;
const prefix = options.customPrefix ? `${options.customPrefix}: ` : '';
// Enhanced message handling
let displayMessage: any;
let previewText = '';
// Case 1: Array of arguments (like console.log('text', object))
if (Array.isArray(rawMsg)) {
const firstItem = rawMsg[0];
const restItems = rawMsg.slice(1);
if (typeof firstItem === 'string' && restItems.length > 0) {
previewText = firstItem;
displayMessage = {
message: firstItem,
data: restItems.length === 1 ? restItems[0] : restItems,
};
} else {
previewText = `Array[${rawMsg.length}]`;
displayMessage = rawMsg;
}
}
// Case 2: Single object (including array)
else if (typeof rawMsg === 'object' && rawMsg !== null) {
if (Array.isArray(rawMsg)) {
previewText = `Array[${rawMsg.length}]`;
} else {
previewText = Object.prototype.toString.call(rawMsg).slice(8, -1);
}
displayMessage = rawMsg;
}
// Case 3: Simple text message
else {
previewText = msg;
displayMessage = rawMsg !== undefined ? rawMsg : msg;
}
// Metadata
const metadata = {
level: level.text,
timestamp: options.showTimestamp ? new Date().toISOString() : undefined,
};
// Preview with prefix
const preview = `${prefix}${previewText}`;
// Send to Reactotron
Reactotron.display({
name: level.text.toUpperCase(),
value: {
...(typeof displayMessage === 'object'
? displayMessage
: { message: displayMessage }),
...metadata,
},
preview,
important: isImportant,
});
};
This custom transport makes your logging more flexible and informative. By adding timestamps and custom prefixes, you can better track and differentiate logs. The enhanced message handling ensures that all types of log data are displayed correctly in Reactotron, making debugging and monitoring more efficient.